A promotion can be presented as a microsite, or embedded within a web page. If the promotion is embedded in a website, users will first access the website, and from there they will be able to access and participate in the promotion.

Widgets is the Easypromos functionality that allows embedding and presenting the promotion on a web page, and in this way, web visitors can access the promotion directly from there.

Widgets are the ideal solution to increase the visit time on a website, offer an integrated design experience, offer discounts and prizes within the website itself, etc.

Note: The widgets allow you to embed the first page of the promotion on your website. By default, when the user tries to participate, the next page will be opened outside the web to increase the conversion of participants.  More information.

These are the contents of the tutorial:

• 1. What are Widgets?

• 2. What type of Widgets can I use?

  • Embed your promotion Widget

  • Widget Link

  • Widget Popup

  • Widget Bracket

• 3. Access and configuration of the Widgets

• 4. Advanced configurations

  • How to force the widget language in a multi-language promotion

  • How to force the maximum height of the widget

  • How to force the opening of the widget on the same page

  • How to add tracking parameters in the widget

  • How to add the Login Token (LT) parameter of the autologin api in the widget

  • How to force the promotion link to the website with my widget

• 5. Widget Integration Troubleshooting Guide

1. What are Widgets?

A widget consists of an HTML or Javascript code, which must be inserted into a web page. When the code is correctly inserted, the result is that the web page shows the promotion integrated into the web content. Where exactly it appears will depend on where the code is inserted.

When the widget code is inserted into your own web page, an iFrame is generated with the content of the promotion, thus allowing users to participate in the promotion directly from there. The user participation experience through a widget is exactly the same as if it were done from anywhere else.

Note: For a correct installation of the widget code on a website we recommend that the integration is carried out by the developer or programmer of the website.

Widgets include options to customize their width and height. The promotion will adapt to the size of the Widget, offering optimal visualization thanks to its responsive functionality.

2. What type of Widgets can I use?

The platform provides 4 different Widget formats:

• Embed your promotion Widget

• Widget Link

• Widget Popup

• Widget Bracket

1. Embed your promotion Widget

This widget allows you to embed the promotion in your own web page, so that the promotion is presented in the environment of the client's web page. The application offers the possibility of customizing the dimensions of the widget, in order to fully adjust it to the space available on your web page.

Next, we show a promotion embedded in an own web page:

2. 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:

3. 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:

On mobile it is also presented in an adapted way, full screen, and with the cross to close on the upper right side.

4. Widget Bracket

If you have created a Tournament Bracket, with this widget you can obtain the iframe code to embed the complete visual table of the tournament on an external website. In this way, the promotion will allow users who visit your website to view the Tournament directly from there.

Like the other widgets, the Widget Bracket allows an automatic management of the height of the widget on an external website to automatically adapt according to the content that is being displayed in the promotion, thus offering an optimal display of the promotion on any device and screen.

Next, we show you an image of how a Tournament Bracket is presented embedded in a blog:

3. Access and configuration of the Widgets

Below we explain the steps you must follow to embed the promotion on your website with the Widget.

1. Once you have created your promotion, you can go to the Publication Resources > Widget section:

2. Next, enter the URL of the web page where you plan to embed the Widget:

Below you will find all the Widgets available to integrate the promotion on your website

 

1. Embed your promotion Widget

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. 

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.

2. Widget Link

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.

 

3. Widget Popup

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.

 

4. Widget Bracket

The Widget Bracket can be customized with the following options:

• Width and Height: these will be the dimensions of the widget where the promotion will be presented, so that you can adjust it to the space available on your web page.
• Tournament: Here you can select which tournament you want to present in the widget, in case you have more than one.

4. Advanced configuration options

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

How to force the widget language in a multi-language promotion

If you have created a promotion with multiple languages, and you want to use the widgets, it is possible that your website has multilanguage, and you want to force the language of the widget display.

You can force the language of the widget by passing the language value in the lc parameter of the gets field of the widget code.

Example: force the display of the widget to English.

gets:"micro=1&utm_source=  widget&utm_medium=embed&lc=eng"

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

How to force the maximum height of the widget

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.

To do this, the parameter max_height must be used and define the height that we want to give to the widget.

How to force the opening of the widget on the same page

The default behavior of the widget is that when interacting with it, the next screen is loaded outside of the website where the widget is embedded. This is the recommended behavior to optimize the user experience and avoid issues with third-party cookie restrictions imposed by web browsers.

To force all participation to occur within the Widget, you can apply the following option in the dropdown menu.

WARNING: To ensure this solution works without issues regarding third-party cookie restrictions, make sure you have connected a subdomain to your promotion. The subdomain should belong to the main domain of the website. More information.

How to add tracking parameters in the widget

If you want to customize the parameters to measure the source of the participants, you will need to modify the utm_source and utm_medium parameters of the gets field of the widget code. Learn how to measure the source of the participants of a promotion.

How to add the Login Token (LT) parameter of the autologin api in the widget

If you embed a promotion on a website where users have previously logged in through the Autologin API, you can pass the lt(Login token) parameter in the gets field of the widget code.

gets:"micro=1&utm_source=widget&utm_medium=embed&lt=$$xx555666hsf$3!qq2"

Example: add the user login token obtained from the Autologin call in a widget

<!-- Put this div wherever you want in your code. It will contain the widget: -->
<div id="ep_frame_885667" style="width:100%;"></div>



<!-- Add this code at the bottom of your page, right before the <body> closing: -->
<script type="text/javascript" src="https://wl.easypromosapp.com/widget/widget_embed_adaptable.js?v=1.93"></script>
<script type="text/javascript" src="https://wl.easypromosapp.com/js/jquery.ba-postmessage.js?v=1.93"></script>
<script type="text/javascript">
	if(typeof(EasyEmbedAdaptable) !== "undefined") {
		EasyEmbedAdaptable.init({
			container_id:"ep_frame_885667",
			domain:"https://wl.easypromosapp.com/",
			gets:"lt=$$xx555666hsgaf$3!qq2&micro=1&utm_source=widget&utm_medium=embed",
			max_height:"100%",
			promo_id:885667
		});
	}
</script>

How to force the promotion link to the website with my widget

To do this, you must go to the Publication Resources tab > 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:

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.

5. Widget Integration Troubleshooting Guide

Due to the very nature of iframes, some incidents may occur in users who try to participate in the promotion. These incidents are mainly related to the blocking caused by third-party cookies, and some of the cases that users may experience are: they cannot login, they cannot change the language of the promotion, etc. In this article we present some of the common situations that users experience when trying to participate in a promotion that has been embedded in a web page through a Widget, and a resolution guide that provides a solution to all cases.