You have spent a lot of time and energy creating a survey that was supposed to appear on your website, but the visual aspect does not match what you wanted ?
Before continuing, refer to the issues described in the article "I have a problem displaying a survey on my website" to identify the exact nature of your problem. This will allow you to confirm whether this article is relevant to your situation.
This article gathers the steps to follow to identify and resolve the following design issues you may encounter with your website deployments (buttons, bars, pop-under, pop-in, and inpage) :
- The survey appears with a design different from what you configured on the platform
- The survey appears with a design different from the preview of your web deployment
- The survey appears with proportions that do not match what was configured on the platform
- The survey appears with different colors and/or fonts than what you configured on the platform
- A part of the survey is truncated on your website
- The images and visuals of the survey do not appear on your website
- The buttons or elements of your survey are misaligned or trigger no action
- Error messages obstruct the display of the survey on your website
Glossary of web deployments and console commands
Possible factors that can cause design issues in the display on your website
Skeepers very rarely encounters technical incidents regarding Web, InPage, and Button deployments.
Most cases where the design of the surveys is incorrect on your websites result from incorrect tool configuration, the addition of codes and their interactions with your pages. If your survey displays correctly in the Preview of your deployment on the Skeepers platform but inappropriately on your site, it indicates a misconfiguration or integration issue.
What might cause your survey's design to not display correctly on your website :
- The CSS/HTML codes added to the deployment design causes conflicts with your website’s code (learn more about advanced survey design customization)
- Your website's security blocks the correct display of the survey
- The style codes for your web deployment button are not correctly configured or conflict with your website (learn more about customizing buttons, bars, and pop-in)
- The CSS/HTML codes for the inpage deployment are not correctly configured or conflict with your website
- The target DOM element selector is incorrect
- Your website’s rules conflict with the script provided by Skeepers
For iFrame deployments, Skeepers only provides a URL link to your survey. You are responsible for implementing this link on your website. If the survey displays correctly via the URL, Skeepers Support cannot assist with issues related to this URL integration into your website. We recommend using InPage deployments instead, which are more modern and can be configured directly on the platform.
Requirements
Before starting your web deployment tests, please follow these valuable tips :
- Test in a controlled environment, within a private browsing window, with browser extensions disabled (AdBlock) and full cookie acceptance
- Get familiar with the concepts related to web deployment integration via Skeepers Feedback Management :
- Domain (learn more about domains)
- Variables (learn more about using website variables)
- JavaScript deployment tag (learn more about implementing the tag)
- Content Security Policy (learn more about CSP)
- Learn how to open the browser Console and use the commands with our guide
We explain the purpose of each command here.
Check the rendering in the web deployment preview
First and foremost, it is necessary to check whether your display issue is isolated to the integration of the survey into your website or if it is already malfunctioning in the Feedback Management platform.
To do this, open your deployment and click on the 'Preview' button located at the top right of the platform.
The Preview available on the platform integrates your survey directly into a generic test web page. You can quickly see if the elements’ display matches what was configured on the platform.
This Preview is not available for InPage and Button deployments.
Check the rendering in a new test URL deployment
The URL deployment faithfully applies the design of your survey, as configured on the platform. It is therefore useful for checking the final rendering of the survey while preventing disruptions (code conflicts, security blocks, etc.) that could impact the display when integrated into a website.
Open the campaign that has a deployment with design issues on your site and go to the 'Deployments' tab. Then create a new URL deployment.
In this new deployment, access the design via the "Customize your design" button and check that it exactly matches the design of the integrated deployment on your site.
After configuring the design to match exactly that of your web deployment, click the "Open" button to evaluate the rendering of the survey with this URL deployment.
If the rendering meets your expectations and matches the configuration specified in the platform, it indicates that the design issue comes from the integration of the web deployment into your website. In other words, the correct display of the survey through the URL deployment demonstrates that the integration into your site needs adjustments to ensure visual and functional consistency.
Check the design of the web deployment
After completing the previous steps, we have identified that the display issue is related to the integration of the web deployment.
It is therefore relevant to check whether the design configured in the deployment includes only default elements from Skeepers or if you have made advanced customizations by integrating CSS/HTML codes (as explained here).
To do this, open your web deployment and access the design via the "Customize your design" button.
Here, if not already done, in the left panel, click on "Apply a specific design". Then open the customization panel by clicking the green button with two arrows, located in the upper right corner of the page.
If the advanced customization window contains CSS/HTML code | If the advanced customization window is empty |
It is possible that one or more codes conflict with the code present in your website | The design is default ; there should be no interference with the code present in your website |
Possible Actions | |
You should consider removing all code, saving the changes, allowing a few minutes to pass, and then verifying the survey’s display on your website again | No action is needed |
If, despite the absence of advanced customization codes, the design of your survey still does not display correctly on your website, please consult the following section to find out how to contact us.
Unable to resolve your issue ?
After consulting and following our documentation, contact us via the Contact Icon available in the left-hand sidebar of the platform.
Before contacting us, please check the following and attach the requested screenshots :
-
The exact URL where your web deployment survey is supposed to appear
- The URL where you conducted your display tests (if different from the previous point)
- Specify whether the URL is accessible to Skeepers teams. If possible, make arrangements to provide us access.
- The name of your deployment in the Skeepers platform, along with its direct access link
-
A screenshot of the console after entering the command "_Mfb_ud"
-
A screenshot of the console after entering the command "_Mfb_domain"
-
A screenshot of the console after entering the command "MFB.start()"
If you have a time-based condition, wait for the necessary time before taking the screenshot of MFB.start(). For example, if you need to wait 5 seconds, run MFB.start() and wait the 5 seconds before taking the screenshot.
Without all of these elements, we will not be able to perform a complete analysis of your issue.
After submitting your request, please do not make any changes to your web deployment. This will allow the Skeepers teams to carry out the necessary investigations to resolve your issue.
If this instruction is not followed, our conclusions may not be reliable, as they may not reflect the actual state of the deployment.
When taking screenshots, be sure to include all elements by capturing the entire page, the navigation bar with the visible URL, as well as the entire console with all values displayed. This will provide us with all the necessary information for a thorough analysis.
Also, do not forget to click the arrow to the left of the command answer to expand it and display all elements.