Widget 2.0

Transparent WidgetWidgets are the way that you can easily put a part of RunSignUp, like race registration, right on your website. This means people are not re-directed to another website to register for your race or club. About 50% of the registrations on RunSignUp happen in this way – so it is very popular and very nice.

Bluegrass Half Marathon WidgetWe have released our Widget 2.0, which makes widgets even more powerful and easy to use. The new release allows you to save Widget Styles and apply them across a variety of pages. You can also save Widget Pages as well.

A single race website will be able to use this for a single style that can apply across a page for Race Info, a separate page for Registration, one for Donations, one for Results, one for Result Notification Setup, etc. If you decide to change something like the button color, it will ripple across all of those pages immediately.

For Timers, this now greatly eases the task of using RunSignUp Widgets across all of your races. Create a custom page for each race on your website, stick the widget in each page and all the pages “inherit” the same look and feel.  If you want to change the background from white to transparent, just do that once in the Widget Style setup.

How is this done?
The key idea is that instead of embedding all of the widget options in the Javascript and therefore in your page, the options are held as a set of parameters in RunSignUp. That set of parameters are sent to the browser when a page is loaded into the browser.

For those a bit more technical, you can see the widget is just referenced in the script code you put on your site now.

<script type=”text/javascript” src=”https://runsignup.com/js/widget2.js?widgetId=7″></script&gt;

So there are two things that are done – set a Widget Style, and then apply that style to one or more Widgets.

Widget StyleWidget Style
The widget style is the common set of look and feel parameters that will show across all widgets using that style. Style is set in two sections – a set of parameters and a set of colors. The parameters allow you to modify:

  • Font
  • Show/Hide Menu Tabs
  • Show/Hide User AccountsScreen Shot 2014-01-09 at 2.07.23 PM
  • Auto detect mobile users and redirect to just RunSignUp’s responsive design
  • Hide the details of the race that show at the top of a widget like the logo, name and date
  • Apply a Transparent background so your website “wallpaper” would show thru
  • Hide the Social Sharing buttons

The color options provide a convenient way to customize all of the color options for the widget so that you can match your website as closely as possible.

You can set up and save multiple widget styles. Style SelectorThis is convenient to allow you to test different styles on your website so you can just flip back and forth between the option that you want to save. The example on the right show two styles that have been created – “Red Style” and “Blue Style”.

Widget Creation/Editing
Create WidgetOnce you have styles set (or just use the standard RunSignUp Style), you can create your widget.  There are 3 things to do here:

  • Name your widget. This is how RunSignUp will match things up when your website requests the widget to be displayed.
  • Pick your Widget Style.
  • Pick what page you want to display.

One you do this, you will see a set of widget code that appears below the setup.  This is what you will copy and paste into your website. You will cut and paste for each widget that you want to display on your website.

Race, Club and Partner Widgets
There is a full set of widgets for races, clubs and partners (like Timers and running stores). The list of Race pages is shown in the image above. The Partner and Club widget list are below:

Club and Partner Widget     Screen Shot 2014-01-09 at 2.29.59 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Up ↑