How to embed and present the promotion on any website with Widgets

The platform provides the Widgets system, which allows embedding and presenting the promotion on any web page in order to give it extra visibility and attract more users. In this way, Widgets are installed on a web page and allow visitors to participate in the promotion directly from there, without having to go through any social network.

In this way, the user experience will be exactly the same as if the user participated from the promotion link that opens in microsite mode, that is, the user must identify themselves to participate, complete the registration form, vote, etc.

Widgets are available for all promotions that are created in Easypromos, regardless of the version used - Basic, Premium and White Label - and they work for any promotion or contest mechanic.

In this tutorial we explain the different formats of Widgets available and how to configure their different options for a correct display of the promotion integrated into your website.

 

These are the contents of the tutorial:

 

Access to the Widgets

Once you have created your promotion, you can go to the Publish > Widget section:

widgets_eng_1.jpg

2. Here you will find all the Widgets available to integrate the promotion on your website:

widgets_eng_2.jpg

Below we explain the specific features and configuration options for each widget.

 

Types of Widgets available

The platform provides 4 formats of Widgets available:

  1. Embed your promotion Widget

  2. Widget Media

  3. Widget Link

  4. Widget Popup

 

1. Embed your promotion Widget

With the Embed your promotion widget you can obtain the iframe code of your promotion to embed it and present it in a specific area of ​​your website, blog or microsite. In this way, the promotion will allow users who visit your website to participate directly from there.

In the following video you can see a promotion that is embedded in the brand's website, where we can see that the experience of participation of a user through the Widget is exactly the same as if they did it from anywhere else:

In addition, the "Embed your promotion" widget presents as its main advantage that it allows automatic management of the height of the widget in an external website. This way, the height of the widget will adapt automatically depending on the content that is shown in the promotion. 

 

To do so, you'll be able to customize the widget dimensions (width and height) to adjust the widget to the available space in your website. Then copy the iframe code and paste it in your website. Below we show you the configuration options you have available:

widget_eng.jpg

The widget presents the following features:

  • The widget automatically calculates the height of the iframe for an optimal visualization depending on the page of the promotion that is shown.
  • The optimal visualization means not showing the scroll bar in the iframe and avoids blank space at the bottom.
  • The pop-ups inside the promotion (Share, terms & conditions, My Networks) are placed better in the visible area of the iframe.

Note: There are some web platforms (like WordPress) that block adding content via scripts. If you experience problems with your widget, you can alternatively use the non-adaptive height widget version that we provide. To do this, click on the following option and copy the embed code.

widget_eng1.jpg

 

2. Widget Media

This widget allows you to embed and present the image gallery of your contest on any web page, blog, online store or microsite. The Media Widget can be customized with the following options:

  • Widget dimensions (width and height) to adjust the widget to the available space in your website.
  • Enable/Disable Actions Header. Actions Header is a bar which is displayed at the top of the gallery that includes action buttons: Access the promotion landing page, and Share buttons:widgets_eng_3.jpg
  • Enable/Disable Control Header. Control Header is a bar which is displayed at the top of the gallery that offers tools for the users to filter for last entries, most voted, search the name of a participant:widgets_eng_4.jpg

Then copy the iframe code and paste it in your website:

widgets_eng_5.jpg

Note: There are some web platforms (like WordPress) that block adding content via scripts. If you experience problems with your widget, you can alternatively use the non-adaptive height widget version that we provide. To do this, click on the following option and copy the embed code.

widget_eng2.jpg

 

3. Widget Link

The Widget Link will be placed as a link on a part of the text. By clicking on the link, the promotion will be displayed as a modal box over the page.

We show you below an example of how the Widget Link is displayed on a blog post:

widgets_eng_6.jpg

The Widget Link can be set up with the following options:

  • Width and Height: these will define the size of the modal box where the promotion will be displayed, so that you can adjust it to the available space in your website.
  • Title: this will be the text that will link with the modal box of the Widget, so that this will be the text that users will click on in order to open the promotion. Therefore, write this text with a call-to-action, with a text that catches the users’ attention.
  • Open as: Allows you to select to open the widget as a modal window or as a new window.

Copy then the iframe code which is the one you’ll need to introduce within the HTML code of your website.

widgets_eng_7.jpg

 

4. Widget Popup

The Widget Popup shows the promotion on a modal box over the page you insert this code. You can control the delay (seconds widget popup waits to show after the web page is loaded) and the frequency (control frequency for recursive visitors).

We show you below an example of how the Widget Popup is displayed on a website:

You’ll be able to set up the following options:

  • Delay to open: This option allows you to control when the widget popup appears when accessing the page. You can configure it to appear as soon as the page loads or set a waiting time of between 5 and 30 seconds.
  • Frequency: This option allows you to control how often the widget popup will appear to recurring visitors to the page.

Copy then the embed code which is the one you’ll need to introduce within the HTML code of your website. 

 widgets_eng_8.jpg

In the following screenshot we show an example of how to insert the embed code in an article of a Wordpress blog, in this case, the code is entered in an HTML block:

widgets_eng_9.jpg

 

Advanced configuration options

Below we present the following additional configuration options presented by the Widgets:

 

1. Direct the main link of the promotion to the web page where you have embedded the widget.

To do this, you must go to the Publish> Link settings section, where the option "Destination of the promotion main link" will appear, where you can select the option "Site where widget is embedded", which will allow you to enter the URL where you have embedded the iframe code of the promotion widget:

widgets_eng_10.jpg

In this way, when opening the main link of the promotion, the system will redirect the user to the web page where you have embedded the Widget.

 

2. GET parameter [option available for the Embed your promotion Widget and Widget Media]

This option allows to add customized GET parameters to the call to the promotion.

gets:"micro=1&utm_source=widget&utm_medium=embed",
			max_height:"100%",

You can use this parameter to customize your UTM parameters or to force the language of the widget with the GET parameter "lc". For example, in the following screenshot we show how to use the parameter utm_medium = embed & lc = eng to force the language of the promotion to English:

widget_2.jpg

You can obtain the language codes by going to the promotion's management page and clicking on the "Options" window:

widget_3_eng.jpg

3. MAX-HEIGHT parameter [option available for the Embed your promotion Widget and Widget Media]

This option allows to define a maximum height allowed for the widget. If the content of the promotion exceeds this height, the system will add a scroll bar to the widget.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.