Customize your buttons, bar and popin for the questionnaires published on your website Marine Aubagna
Bars, buttons and popins can be configured both on the trigger rules (the visitor is on a specific page, moves the mouse over an element, is inactive, is a new user...) and on their design and location. All these elements are to be taken into account in order to optimize the user experience, maximize the engagement on your popin, bars and buttons and generate a maximum number of responses.
What good practices should be followed when customizing these elements?
- Differentiation and coherence: it is important to observe a continuity between the design of your page and the one of your popin, bar or button. The element must attract attention without being aggressive: you can for example use the main and secondary colours of your graphic charter.
- Size and location: In order to optimize the number of responses collected, and to maximize interactions on your buttons, bars and popin we recommend you to adjust their size and location. For example, use a margin display for solicitations related to pages viewed during navigation (see practical case below); and a full screen display for a questionnaire distributed at the end of the customer journey.
How to do?
Thanks to advanced CSS settings! Once you have set up your website deployment and selected the type of container (popin, sidebar, button...), click on the "Advanced settings" tab:
Then enter the CSS code for the fields you want to customize. The "Preview" button allows you to preview your design before validating.
In practice:
Let's take the example of a winter sports retailer that wants to know what activities its visitors do most. To do so, the company will ask a question in a popin window to visitors who have seen more than three product pages and who use a computer.
Here is what the default preview gives:
We want to display a reduced popin in the lower right corner to solicit the visitor while allowing him/her to continue browsing. In this case, we decide to remove the logo that will already be visible on the site. We have therefore configured the CCS parameters as follows:
Here is the result:
Try it yourself!