Rectify a design issue in a web deployment

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

Glossary of web displays

Glossary of 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 :

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.

Display OK Display Not OK
If the display in the Preview matches what has been configured in the platform, proceed to the next section.

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 :

  1. The exact URL where your web deployment survey is supposed to appear

  2. The URL where you conducted your display tests (if different from the previous point)
  3. Specify whether the URL is accessible to Skeepers teams. If possible, make arrangements to provide us access.
  4. The name of your deployment in the Skeepers platform, along with its direct access link
  5. A screenshot of the console after entering the command "_Mfb_ud"

  6. A screenshot of the console after entering the command "_Mfb_domain"

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

   

 

If you have any questions, feel free to contact our Customer Care team.

Was this article helpful?
0 out of 0 found this helpful