Widgets allow you to take certain aspects of RunSignUp (ex: the registration form, the race store, the donation page, etcetera) and embed them directly into your personal race website. RunSignUp provides this feature because we would rather keep runners focused on what your independent race website has to offer instead of becoming a central site that running sites point to. This tutorial will explain how to select and customize the widgets available for embedding.
Widgets allow you to take certain aspects of RunSignUp and embed them directly into your personal race website (ex: the registration, the race store, the donation page, etcetera). RunSignUp provides this feature because we do not want to become a central site that all running sites point to, but instead, we want to keep runners focused on your race and what your independent race website has to offer.
If you go to either the “Social” tab, the “Donations” tab, or the “Store” tab of the race dashboard, then you will find the “Widget” sub-heading. Regardless of how you arrive at the “Widget” sub-heading, from there you will have access to all of the widgets available for your race.
Begin by choosing the widget you would like to embed from the “Select Page to Embed” drop-down menu. Your choices will be “Race Information”, “Race Registration”, “Registration Lookup”, “Race Store”, “Race Donation”, “Race Results”, and “Top Referrers”.
IMPORTANT: The “Top Referrers” widget will not display any information unless “Referral Tracking” is enabled and the “Top Referrers” widget is enabled. To learn more about how to do these two steps, please refer to both “How to Set Up Referral Tracking” and “How to Set Up the Top Referrers Widget”.
Depending on the widget you select, it may have its own set of “Widget Options” that allow you to customize certain aspects of that widget.
The “General Options” section of the widget setup page is similar across all widgets. The first option you can set is the “Width” in which you would like the widget to be housed. Note: Certain widgets have a minimum width of 600px.
Next, you can type in the names of the fonts that you would like to be used for the “Main Font” and the “Header Font” of your widget.
Note: Make sure that you enter in the exact font names to use, because these names will be entered into the code used for embedding the widget.
After that, you will have a series of check boxes that you can use to customize your widget further. The first check box will ask you “Do you want to hide the menu tabs?” and you can check the box next to “Yes, hide menu tabs” if necessary. This option allows you to remove the menu tabs that would normally allow users to jump from race page sections such as “SignUp” or “Race Info”, so unless you have a specific reason for hiding these, it is best to leave this box unchecked.
You can choose to either show or hide user account links (ex: Profile, Running Log, Find a Race, etcetera) by checking off “Yes, hide the user account links at the top of pages”, and then you can decide whether you want the widget to detect and open the mobile site. By checking “Yes, detect mobile users”, this option will cause the first widget on the page to redirect the user to the mobile website.
In some cases, in order to make the widget look seamless within your race’s independent website, you may want to hide the details that would be redundant, such as the race name, location, logo, and social options. To do this, simply check off the box next to “Yes, hide race top details”. If you would like to just eliminate the social options from the widget, then click on the following check box labeled “Yes, hide social options”.
Click on “Update Options” when you are finished, and if you are done customizing the widget at this point, then you can click on “Jump to Embed Code”, copy the generated HTML, and paste it into the code for your website. However, before copying the HTML code for your site, you may also want to modify the widget style in the section below the widget options.
Colors can be edited for each component of the widget by first clicking on the check box next to that color, and then either editing the hexadecimal value manually, or choosing a color from the pop-up color palette. Below the color options will be a preview of what the widget style will look like. If, at any point, you want to return to the default RunSignUp colors, then click on the button for “Reset Colors”.
Note: The widget preview will only show a preview of the style elements; fonts and other settings will not be reflected in the preview.
When you are finished customizing your widget, copy the generated HTML at the bottom of the page and paste it into the code for your website.