Styles

For your visitors, the chat is part of your site: same colours, same look.
The Styles page matches the chat to your site in a few clicks: colour, icon, bubbles, font, height.
A preview, the chat itself, shows the result before you save.

Settings

• Main colour: links, buttons and the visitor's question.
  • Pick a swatch, any colour, or type its code (#rrggbb).
  • A colour too light for links on a white background is flagged.
• Chat icon:
  • DigiSeerDigiSeer logo (default);
  • the initials of the agent name (set on the Texts page) on the colour of your choice;
  • or an image: paste the address of your logo (https://…) or, in the WordPress admin, click Use my site icon.
• Bubbles:
  • corners (Square, Rounded, Very rounded): also applied to suggested questions, the input field and the chat outline;
  • shadow (None, Answers, Questions and answers).
• Text:
  • font (DigiSeerDigiSeer, device font, serif, humanist): no font loaded from an external service;
  • size (Small, Normal, Large);
  • on phones, the text is slightly larger (14, 15 and 17 px) and the input field is 16 px, which avoids the iPhone's automatic zoom.
• Chat height:
  • Automatic (default): the chat grows with each answer;
  • fixed height (400, 500, 600 or 750 px): the conversation scrolls inside the chat and your site's page no longer gets longer, the last question moves to the top of the chat;
  • full screen takes the same height;
  • on phones, the chat keeps an automatic height.
• Background colours:
  • Chat background (white by default) colours the chat itself, preview included; Transparent lets what is behind show through;
  • Background around the chat (transparent by default: your site's page background stays visible) only applies to the chat shown on your site;
  • choose Transparent, a swatch, a free colour or type its code.

Save

• Click Save.
• Back to the default style restores all the original settings (to be saved).
• Default, next to a colour, restores that colour only.

Preview

On the right (below the settings on mobile, with the See the preview link), the chat shows a sample exchange with the current style.
You can also ask a real question there: these tests are not counted in the statistics.

Advanced: CSS rules

Comfortable with CSS?
To go further, click Advanced: CSS rules:

1. Type a selector (for example .e-chat-send).
2. Type the CSS values (for example color: #2e7d32;).
3. Click Add a rule.

• These rules apply after the settings above and take precedence over them.
• Click a rule to edit it (✓ to save, ↻ to cancel), ✕ to delete it.
• Rules created by the settings appear in grey: they are changed through the settings.

Free plan

You can set the styles and try them in the preview.
Saving requires a paid plan: the Save button is greyed out, with a link to the Subscription page.

Your settings are not lost: if a site goes back to Free, its styles are kept but no longer applied.
They come back with a paid plan.

Does your chat speak several languages? See Languages.