The content of the present tutorial is organized as follows:

• A. Issues related to third party cookies

  • Introduction to the problem of third-party cookies in Widgets

  • Common issues

    • Issue 1: After logging in, the user is sent back to the login screen

    • Issue 2: User cannot change language in multi-language promotions

    • Issue 3: The user sees an "invalid game" screen when finishing a game

    • Issue 4: after Autologin the users are asked again to identify themselves

  • Resolution of issues related to third-party cookies

B. Other issues

• An error screen appears after logging in with Facebook and/or Google 
• Error: “jQuery is not defined” o “$ is not defined”
• My Wordpress does not accept the <iframe/> tag
• Popup windows are displayed

A. Issues related to third-party cookies

Introduction to the problem of third-party cookies in Widgets

When you insert the widget code into your own website an iFrame is generated with the content of the promotion. The contents of an iFrame are third party content on the web. This means that the promotion cookies become third party cookies on the website where the widget has been embedded.

Easypromos generates applications with interactive content, and for this purpose cookies are required to provide the functionalities necessary for the correct functioning of the application. For example, cookies are necessary to:

• Use the login system, to create and maintain a participating user session.
• Fraud control checks on game participants, registrations, quizzes, etc.
• Language management in multi-language promotions.
• Provide specific features according to the type of game or application.

Therefore, in order to participate in Easypromos promotions, the user must have third-party cookies enabled. Otherwise, the user will not be able to participate in Easypromos promotions and games.

However, we must bear in mind that:

1. By default ALL mobile device browsers (phones, tablets) come by default with third-party cookies blocked.
2. Most desktop web browsers have third-party cookies enabled, but the trend, as Safari and Chrome have already stated, is for them to be disabled. In addition, the first security barrier applied by antivirus and security extensions installed by users usually is the blocking of third-party cookies.

How to identify if the widget is embedded using an Easypromos domain or your own domain

The first step is to know if the domain of the embedded promotion is part of Easypromos (easypromosapp.comorcstmapp.com) or if it a custom domain. To know it is necessary to inspect the source code of the web where the widget is embedded, and look for the code that is embedded. There you can see if the promotion has been embedded with an Easypromos domain or with your own domain:

• If you have embedded the code of the adaptable version, you should look at the "domain" field, and there you will see the domain used.

• In case you have embedded the non-adaptive code, we must look at the URL of the element <iframe>.

Below we show in a screenshot how to inspect the web with the Chrome inspector:

1. Once the inspector is opened, press CTRL+F to search the source code.
2. Search the word "easy", so you can quickly find the code that has been embedded.

In this screenshot we can see that the widget code is using the Easypromos domain (a.cstmapp.com), while the domain of the website isthe-crispy-cookie.com. Therefore, in this example the third-party cookie restriction applies.

Below we list the most common incidents when users access the promotion from a browser that has the third-party cookies disabled.

List of common issues

What happens in a promotion embedded in a Widget in case the device used by the user has the third-party cookies disabled? Here are some of the most common incidents:

1. Issue 1: After logging in, the user is sent back to the Login screen
2. Issue 2: User cannot change language in multi-language promotions
3. Issue 3: The user sees an "invalid game" screen when finishing a game
4. Issue 4: after Autologin the users are asked again to identify themselves

You can confirm that your incident is related to third-party cookies by checking the domain with which the widget is served. Here we explain it.

Issue 1: After logging in, the user is sent back to the Login screen

Issue: Users cannot pass the Login screen, are trapped in a loop, and cannot progress through the registration and participation process. The login system, as the process to register and identify users in the promotion works through cookies. See resolution here.

Issue 2: User cannot change language in multi-language promotions

Issue: Clicking on one of the available languages of the promotion, the content of the promotion is not displayed in the chosen language. The language change of the promotion depends on cookies, so if the browser blocks them, the system cannot present the contents of the promotion in the selected language. See resolution here.

Issue 3: The user sees an "invalid game" screen when finishing a game

Issue: The problem happens when the user’s browser has third-party cookies blocked or disabled. In this case, if the user manages to access the play screen, they may see an error message the game is not valid, because it has not been possible to set a security/login cookie that the platform uses to control participations in the games. See resolution here.

Issue 4: after Autologin the users are asked again to identify themselves

Issue: The users cannot move from the Login screen, as they see the screen without the social login buttons FB, Google, email, etc.

One of the common problems of Autologin + Widget integration happens when the promotion is embedded with a widget's domain that does not belong to the main web. In this case third-party cookies apply, and if the browser blocks them, then you cannot log on the participants with their token, and a screen like the one below will appear to them. See resolution here.

Resolution of issues related to third-party cookies

If the domain of the widget belongs to Easypromos (easypromosapp.comorcstmapp.com), or it is a domain that does not belong to your web, then it will be necessary to apply one of the two solutions that we detail below:

• Solution 1: Available only for White Label promotions. Use your own domain to publish the promotion.
• Solution 2: Available for Premium and White Label promotions. Force the opening of the promotion outside of your website. 

You can confirm that your incident is related to third-party cookies by checking the domain that the widget is using. See more information here.

 Solution 1: AVAILABLE ONLY FOR WHITE LABEL PROMOTIONS. Use your own domain to publish the promotion.

The first and most efficient solution to avoid blocking caused by third-party cookies is to customize the domain of the widget with a URL that belongs to the website itself. In this way, as both domains will coincide, cookies will no longer be third party, so there will be no blocking in this regard.

Example: If the promotion will be embedded in the domainmywebpage.com, the promotion URL should belong to this domain, setting for example a subdomain that is promotion.mywebpage.com.

Here are the steps to follow:

1. Create a subdomain of your domain. For example:promotion.mywebpage.com

2. Configure this subdomain in the promotion by following these steps.

3. Once linked, just copy the code of the widget and it will come with your domain.

In this way, the code of the widget with the promotion will include a subdomain that belongs to the same domain as the website where it has been embedded, meaning that the restrictions caused by third-party cookies will not apply.

In this screenshot we can see that the domain of the widget code is the same domain as the web page where it is embedded (the-crispy-cookie.com), therefore, in this case cookies are no longer third party, so the restrictions of third party cookies do not apply.

Important: The feature to set up your own domain is only available in the White Label version, it is not available in promotions created in the Premium version.

 Solution 2: FOR PREMIUM (AND WHITE LABEL) PROMOTIONS. Force the opening of the promotion outside of your website

In this case, you can embed the Welcome page of the promotion, but when the user clicks on the "Participate" button, the promotion will open the next screen outside of the web where the promotion is embedded, because the URL of the widget and the URL of the web page where the widget is embedded are not of the same domain, so that orcing the opening outside the widget minimizes incidences and maximizes user experience and conversions.

This is the default behavior in mobile browsers, which will be always applied and cannot be changed. This ensures an optimal user experience, as explained here.

On desktop devices this is also the recommended behavior, so to ensure that you obtain this behavior, please check the following points:

1. Ensure that the promotion’s Welcome page is published. This step is essential, as it is the "Participate" button that appears on this welcome page of the promotion that will force the opening of the next screen outside the web.

The Welcome page is published when the button appears as follows:

2. Enable the option "Open the participation page outside the widget in desktop browsers", which you will find in the Publication Resources section of your promotion > Widgets:

B. Other issues

Below we list other issues and errors that may occur if you have embedded your promotion in your own website:

1. An error screen appears after logging in with Facebook and/or Google 

2. Error: “jQuery is not defined” o “$ is not defined”

3. My Wordpress does not accept the <iframe/> tag

4. Popup windows are displayed

1. An error screen appears after login with Facebook and/or Google

Incidence: When you try to participate in the promotion via Social Login, you get a rejected login screen. Because of the social media security policy itself, login with a Google account is not supported within an iframe. For this reason, in case the promotion is embedded in a page and has configured that the participation page opens within the widget in desktop browsers, when the user tries to click on a Social Login, the following error will appear:

Solution: If you want to keep Social Login, you must force the participation page of the promotion to open outside the widget, as we explained in Action 2 of the present tutorial. Acción 2 de este tutorial.

2. Error: "jQuery is not defined" o "$ is not defined"

Incidence: When inspecting the source code of the page where the widget is embedded, the console displays the error "jQuery is not defined" or "$ is not defined":

Solution: To fix this, you must add the following code at the top of the widget code:

<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

3. My Wordpress does not accept the <iframe /> tag

Incidence: Some versions of Wordpress do not support the tag<iframe /> by default and it is necessary to convert it to the tag [iframe /].

Example: 

The code by default is the following:

<iframe class="_widget" src="https://a.cstmapp.com/p/948383?micro=1&utm_source=widget&utm_medium=embed" width="100%" height="300" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"></iframe>

Solution: In this case, you will need to change the widget code to the following:

[iframe class="_widget" src="https://a.cstmapp.com/p/948383?micro=1&utm_source=widget&utm_medium=embed" width="100%" height="300" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"][/iframe]

4. Popup windows are displaced

Incidence: If the height of the widget exceeds the height of the visible area of the screen, it is possible that some popups will appear outside the user’s visual area. These popups are centered vertically in relation to the height of the widget, so we do not recommend that the "maximum height" values of the widget exceed 100%. This value indicates that at most the widget will have the height of the user window. This will make pop-ups always visible when they appear and not lead the user to confusion.