Resolve issues with the lay-out of the pop-up invitation

Resolve issues with the lay-out of the pop-up invitation


Are you experiencing issues with the way the invitation pop-up looks? Are buttons unreadable and/or disappearing?

Conflicting CSS is causing this unwanted result

Task Analytics uses custom stylesheets (CSS) to add styling to the pop-up. When you’re also using styles for the same elements as Task Analytics is, it can interfere with each other. We’ve seen this problem occur when you’re styling <button>-elements.

The positioning of the pop-up isn't right

You can always set the preferred pop-up positioning,  but if this isn't working, you can add custom styles to adjust the positioning. Use Google Tag Manager or your Content Management System to add the following stylesheet to show the pop-up at a different location:
  1. <style>
  2. #_tmc {
  3.      left:25px!important;
  4.      bottom:40px!important
  5. }
  6. </style>

Caching causes delays in the positioning of the pop-up
Task Analytics stores pop-up settings in your browser to make the pop-up load fast. This means it is possible you aren't seeing the pop-up on a different location after changing the pop-up positioning in the admin-section.


Add extra CSS to tackle the problem

The best way to fix this problem is by adding your custom stylesheets to your website. This can be done through your prefered tag manager or by adding the stylesheets directly onto your website.

You can adjust and add the following code to adjust the Task Analytics pop-up so it’s readable and in line with your company style guide:
  1. <style>
  2. /* This style is to prevent the existing stylesheets to interfer with the Task Analytics survey buttons (stylesheet). */
  3. #_tmc BUTTON._tmcNav{background-color:#FFF!important;color:#008bd0!important;border-bottom:2px solid #008bd0}#_tmc BUTTON._tmcNav:hover{background-color:#008bd0!important;color:#FFF!important}#_tmc ._tmcDone._tmcNav{background:#FFF!important;color:#00842d!important;border-bottom:2px solid #00842d}#_tmc button._tmcClose,#_tmc button._tmcMinimize{background:#FFF!important;color:#00842d!important}#_tmc button._tmcClose:hover,#_tmc button._tmcMinimize:hover{background:#008bd0!important;color:#FFF!important}#_tmc ._tmcDone._tmcNav:hover{background:#00842d!important;color:#FFF!important;border-bottom:2px solid #00842d!important}#_tmc ._tmcDone ._tmcSpinner{background-color:#00842d!important}#_tmc ._tmcClose,#_tmc ._tmcMinimize,#_tmc ._tmcClose:hover,#_tmc ._tmcMinimize:hover{background-color:#FFF!important;color:#008bd0!important}#_tmc ._tmcDone._tmcNav:hover > ._tmcSpinner{background-color:#FFF!important}
  4. </style>
You can download the CSS-file in the attached ZIP you find at the bottom of this article.


Modify the CSS to match your color palette

The script above uses 3 different colors, being blue (#008bd0), white (#FFF) and green (#00842D). You can change these colors accordingly. Don't forget the change all the colors where they occur.


Use CSS custom properties
You can also experiment with the use of CSS custom properties (variables) to make changing the colors easier. However, this is not always supported so test this before publishing it. Download the file attached to this article below.

    • Related Articles

    • Customize the look & feel of the invitation pop-up

      We designed Task Analytics to be as minimally invasive as possible while still trying to successfully engage your visitors. One of the ways we do this is by blending into the look and feel of your website. This guide will show you how to style your ...

    • Change the position of the invitation pop-up

      You can control where you want the survey pop-up to appear. There are four options in the pop-up positioning to choose from: the top-left corner the top-right corner the bottom-left corner the bottom-right corner Select the position of the invitation ...

    • Preview the invitation popup & survey

      You can check what the survey pop-up will look like and what the user flow will be like. Option 1: Use the preview option in the admin section You can always see a preview of your invitation and the questions you’ve composed in the admin section of ...

    • Can I install and still design the survey at the same time?

      The Task Analytics tracking code is unique per survey. The tracking code will not change when making alteration and/or adjusting the settings of the pop-up or survey.  Installing & refining the survey at the same time You’re able to install the ...

    • Adjust the time between visitors entering your website and showing the pop-up

      You can delay the pop-up invitation Task Analytics uses to invite visitors to participate. Doing so allows you to invite visitors after a defined number of seconds. Follow the instructions below to adjust your survey code. Adding a time delay to the ...