Customize the appearance of the widget

Settings of the button

You can modify:

• the wording;
• the background color;
• the color of the icon and text;
• the screen position;
• associated offsets.

The available positions are: bottom right, bottom left, top right and top left.

Message Colors

Separate settings exist for:

• the background of the user message;
• the text of the user message;
• the background of the message IA;
• the text of the message IA.

An overview helps you to verify their association.

Good accessibility practices

• keep a legible contrast between text and background;
• avoid a button color too close to the background of the site;
• check the position on mobile;
• do not hide an important button from the site;
• use a short and action-oriented wording.

Check on the website

1. Save the settings.
2. Update the public website.
3. Control display on computer and mobile.
4. Open the conversation and compare user messages and IA.
5. Check overfly and focus states on the keyboard.

Deployed section

The current copy displays two very close blocks for the button. The values relate to the same configuration. Change them once, save, and then check the final result on the site.

Example: make the button visible without disturbing the site

For a clear site, you can choose:

• labelled:Besoin d’aide ?;
• position: bottom right;
• Color of the button: a sufficiently contrasting brand color;
• text color: white if the background is dark;
• lower decal: a value that leaves the consent banner visible;
• lateral disconnection: a margin that does not cover the purchase button.

The wording explains the action, the position follows the navigation habits and the offsets avoid superpositions with the elements of the site. Check the result on computer and mobile, then use the keyboard focus to confirm that the button remains accessible.