Product update · Widget
Style the message box, and let the launcher message fade away
Set the colours of the box where visitors type, and choose how many seconds the message beside the chat button stays before it fades.
· 3 min read
- Shipped
- Area
- Widget
- Available on
- Every plan
Two small things could make a carefully designed chat window look off. On a dark chat window, the area around the message box stayed white, and you couldn't change it. And the short message beside the chat button stayed on screen for as long as the visitor was on the page. Now you control both.
What's new
Input Box colours. The Conversation screen in the designer has a new Input Box section with three colours:
- Background, the fill of the box where visitors type
- Border Color, the outline around it
- Text Color, the colour of what visitors type
The strip around the box now uses your chat window's background, so a dark chat window stays dark all the way to the bottom. The preview in the designer shows the same colours your visitors will see.
A launcher message that fades away. The message shown beside the chat button has a new Hide message after (seconds) setting. Enter a number and the message gently fades out after that many seconds. Once it's gone, it stays gone for the rest of that page visit, even if the visitor opens and closes the chat. Leave it empty to keep the message on screen, as before.
How to use it
To style the message box:
- Open your chatbot in Studio and go to the Design tab.
- Pick Conversation, then open the Branding sub-tab.
- Under Input Box, set the Background, Border Color and Text Color.
To make the launcher message fade:
- On the Design tab, pick Chat button and stay on the Content sub-tab.
- Check your Message Text, then enter a number of seconds in Hide message after (seconds).
When you're happy with the preview, click Save Draft, test it, and click Publish.
Good to know
- Existing chatbots look the same until you change them. If you never set the input box colours, the box keeps its white background and light grey border. If you leave the hide-after field empty, the launcher message stays shown.
- Whole seconds only. Enter a whole number. Zero or an empty field keeps the message on screen.
- It fades once per page visit. If the visitor moves to another page on your site, the message appears again and the timer starts over.
- For the classic chat button. The fade applies to the message shown beside the Classic chat button.
- Website chat only. WhatsApp, Instagram DM and Messenger use their own apps' interfaces, so these settings don't apply there.
For more ways to make the chat window your own, see the visual chatbot designer and custom chat window text.