In this article we present some of the usual situations and some of the incidences that users experience when trying to participate in a promotion that has been embedded in a website using a Widget, and a resolution guide that solves all cases.

Below we list the most common incidents in the case of users who access the promotion published in the widget:

• Issue 1: The user can't register

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

• Issue 3: The user's language preference isn't retained in multilingual promotions

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

• Issue 5: After Autologin the users are asked again to identify themselves

• Issue 6: An error screen appears after logging in with Facebook and/or Google

• Issue 7: Error: “jQuery is not defined” o “$ is not defined”

• Issue 8: My Wordpress does not accept the <iframe/> tag

• Issue 9: Pop-up windows and pop-ups are misaligned

Issue 1. The user can't register

Issue: The user cannot register, the following screen appears with the "Retry" button, which when clicked opens the promotion outside the widget.

Problem: The problem is due to the user's browser security settings that block third-party cookies.

Resolution: To avoid this incident, the solution is to connect your own subdomain to the promotion or open the participation and registration screen outside the widget. In this link we explain the step by step of the two possible solutions.

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

Problem: The login system, as the process to register and identify users in the promotion works through cookies. The problem is due to the user's browser security settings that block third-party cookies.

Resolution: To avoid this incident, the solution is to connect a subdomain to the promotion or configure the participation and registration page to happen outside the widget, as we explain in this link.

Issue 3. The user's language preference isn't retained in multilingual promotions

Issue: When clicking on one of the available languages of the promotion, the content of the promotion is not displayed in the chosen language.

Problem: The promotion's language change depends on cookies, and third-party cookies are blocked by the user's browser security settings.

Resolution: To prevent restrictions caused by third-party cookies from blocking the promotion's language change, the solution is to connect a subdomain to the promotion, as we explained in the first point of this resolution guide.

Issue 4. The user sees an "invalid game" screen when finishing a game

Issue: The user manages to access the play screen, but will see that the game is not valid, because it has not been possible to set a security/login cookie that we have for the game.

Problem: The problem is due to the user's browser security settings that block third-party cookies.

Resolution: To avoid this incident, the solution is to connect your own subdomain to the promotion or open the participation and registration screen outside the widget. In this link we explain the two possible solutions step by step.

Issue 5. 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.

Problem: 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 above will appear to them.

Resolution: The solution is to connect a subdomain to the promotion, as we explained in the first point of this resolution guide.

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

Issue: When the user tries to participate in the promotion via Social Login, the user gets a rejected login screen.

Problem: 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:

Resolution: 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 this tutorial. 

Issue 7. Error: "jQuery is not defined" o "$ is not defined"

Issue: 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":

Resolution: 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>

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

Issue: 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>

Resolution: 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]

Issue 9. Pop-up windows and pop-ups are misaligned

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

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