The entry widget is used to display individual entries. This widget is typically used in conjunction with the Gallery widget. All widgets are responsive in design so they will resize based on the size of the device displaying the widget.
To edit the Entry widget select Design for the specific contest and then select the Contest Widgets tab.
Then select "Edit" to modify the look and feel of the Entry widget.
The following options are then available to style your entry widget:
- Widget Title - This is just the name of the widget to help you identify the widget from the list of all widgets.
- Select Entry - This option allows you to set the default entry that is displayed when the widget is first displayed. This option will bring up an entry selection dialog box to select the entry you would like to display from the currently active contest.
- Vote Label - This provides the label on the vote button
- View All Label - This is the label on the View All button if enabled. The View All button links back to the gallery so all entries can be displayed.
- Enable View All Button - Enables the View All button.
- Gallery Widget - This allows you to select the Gallery Widget to be displayed when the View All button is selected. The Gallery Widget selected will replace the entry widget.
- Background - This is the background colour for the Entry Widget
- 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.
- Show Metrics - This enables the total Views, Comments and Votes metrics to be displayed under the entry
- Social Network Sharing - This enables social sharing of the entry. The supported social platforms include Facebook, Twitter, Linkedin, Tumblr and Reddit
- 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 entry 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 entry taking consideration of the title and description. Note if this is set too small the widget will display vertical scroll bars.
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 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.