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


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.


How to Create your Widget


To create a Widget, begin by going to Promotions opening up the section Widgets and then clicking on New Widgets



You can then name your Widget and using the Widget Page drop down menu, you can select the widget you would like to embed. 



Once you have created your widget, if you wish to embed your widget onto your Race Page you will need to create a Custom Page/Content. To learn more about this please refer to "How to Add Custom Section"


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”.


Widget Options


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.


Widget Installation Code


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.




Widget Styles


Widget Style Options


RunSignup also gives you the ability to customize your widget style. This can be accessed by selecting Promotion > Widgets > New Widget Style. These widget styles can be used for any current or future widgets that are setup.


Under the widget style options, you have the ability to set a max width of your widget and also edit the main font and header font. You also have the ability to fit the widget to the available width.


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.











Widget Style Display Options




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”.



Widget Style Color Options


Widget color can be edited for each component of the widget by selecting Edit. You have the ability to enter in the hexadecimal value of the color you are looking for or selecting the color manually.