Skip to main content
Registration Widget

This article describes how the configure the Registration widget

Andrew Busuttil avatar
Written by Andrew Busuttil
Updated over 3 years ago

Please note the Registration widget is currently not supported due to recent changes made by Apple and Google browser security. If login and registration is required please use the ContestPad templates.

The Registration widget is used to allow entrants to register into your contest. This widget is typically used in conjunction with the Entry or Upload widget. All widgets are responsive in design so they will resize based on the size of the device displaying the widget.

To edit the Registration widget select the Widgets menu from the side menu. 

Then select "Edit" to modify the look and feel of the widget.

Registration Behaviour

The Registration widget behaviour after a user has registered will vary depending on how you configure the widget and how your contest is setup. For example if User Moderation is turned on the user will be presented with a "Waiting to be moderated message" which you can setup in the Registration widget setup.

If User Moderation is not enabled then the next screen displayed will depend on whether you have selected to display the Upload or Gallery widget. If both widgets have been specified then the Upload widget will be displayed if it is a valid Upload period and the Gallery widget will be displayed if it is not a valid Upload period.

Styling

The following options are then available to style your Registration widget:

  • Widget Title - This is just the name of the widget to help you identify the widget from the list of all widgets.

  • Background - This is the background colour for the Registration Widget

  • Gallery Widget - This option sets the gallery widget to display once the user has successfully registered. It is important to note that this widget is only displayed if user moderation is not turned on and the Upload widget is not selected in the next option or if it is, the Upload period is not a valid period.

  • Upload Widget - This is the Upload Widget to be displayed if User Moderation is not enabled and the upload period id valid.

  • Signup success message - This is the message that is displayed after a user registers and User Moderation is not enabled in the contest.

  • Signup success message with moderation - This is the message that is displayed after a user registers and User Moderation is enabled in the contest.

  • Field outline colour # - This is the colour of the field box outlines.

  • Field fill colour # - This is the colour of the field box fill

  • Text Styling - The text styling and associated settings (Typeface, Weight, Size, Colour, Background Colour*, Shadow colour) is used to set the various fonts and button styling. *Note background colour only applicable to buttons.

  • iFrame width - This sets the widget of the widget to be displayed on the page. This can be expressed in either px or %. To maximise the width available to the gallery widget set this to 100%. This will allow it to be displayed correctly on mobile devices

  • iFrame height - Set this to the height of the gallery. Note if this is set too small the widget will display vertical scroll bars.

Embed code

The widget can be embedded in to the site by using the embed code.

Head/Footer embed code
The first code to embed includes the code that should be included in the header or footer section of your website.

In order to use this select the "Copy div to clipboard" option and then paste this code into the header or footer of your website. Then edit the code and paste the API key you registered ( refer: here ) earlier replacing the "Your API Key Here" text with your key. Make sure you keep the quotes around the API key.

Note that once you have done this for one widget you will not need to add this code for any other widgets as they all use the same header/footer embed code.

Widget embed code
Now that the header/footer code is inserted you can now place the embed code for the specific widget.  

Copy the embed code by selecting the "Copy div to clipboard" button and place the code wherever you would like the widget to appear in your website.

Once this is complete review your site and if required adjust the widget styling to fine tune to match with your site.

Did this answer your question?