RunSignUp

Embed Widget

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.

EMBEDDING WIDGETS

Select Page to Embed 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”.

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.

General Options

General Options 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.

Hide Menu Tabs? 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.

Modify Widget Style Colors 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.

Embed Code and Sample

E-Mail
From Our Blog:
May 23rd, 2017
RaceJoy Record: Most Relay Teams at Colfax Marathon

RaceJoy had the most usage of relay teams at a single race since its inception at this last weekend’s Colfax Marathon in Denver, Colorado with close to 700 teams using RaceJoy. RaceJoy recently released an industry breakthrough where it virtually ties relay team phones together to provide progress alerts for the team. Colfax is one of … Continue reading "RaceJoy Record: Most Relay Teams at Colfax Marathon"

May 23rd, 2017
Google Analytics for Partner Websites

We have added the ability to tie your Google Analytics account to Partner Websites. Like Race Websites, this enables tracking for the entire website, including e-commerce data and registrations. For example, this is the type of report you can produce in Google Analytics if you tie your RunSignUp data to it (showing real data from … Continue reading "Google Analytics for Partner Websites"

What Our Customers Say:

“The biggest feature that we are integrating with is the Race Day Check-In feature This has been a huge hit, and it not only increases efficiency, but it improves the Race Day overall.”

- Aaron Ford, Ford Timing