Customize the chat widget's appearance
Set the chat widget's theme, font, colors, corners, avatar, launcher, welcome messages and footer, open it automatically, or import your logo and colors.
The Appearance tab controls how the chat widget looks and what it says before a visitor types. Your site loads these settings from intoCHAT on every page view, so you never edit the embed code to change them.
Where to find it
Open your agent and select the Appearance tab. The Live preview beside the controls shows the widget as it will render, with the launcher on the side you chose. On smaller screens, tap the Preview button instead.
Edits go live only when you click Save changes at the top of the page. Then reload your website to see them.
Match your website
Under Match your website, enter your domain and click Detect branding. intoCHAT reads your homepage and proposes a logo and four colors. Nothing changes until you apply the result:
- Apply colours & logo sets all four colors and uses the logo as the agent avatar.
- Colours only sets the colors and keeps your current avatar.
If your brand color is too light for white text, the importer darkens it. The logo is cropped to a circle, so a square mark works better than a wide wordmark. The launcher icon is never changed. A lookup doesn't use a crawl credit.
Wording
| Field | What it does |
|---|---|
| Welcome message | The agent's first message in every new chat, up to 500 characters. If empty: Hello! How can I help you today? Click Add another message to add up to 3 more of the same length. Each appears as its own bubble after the first. |
| Suggested questions | Up to 6 questions of up to 120 characters, shown as buttons above the message box until the visitor sends a first message. Clicking one sends it. |
| Launcher tooltip | The label next to the launcher. It appears one second after the page loads, hides after three seconds and shows again on hover. If empty, it reads "Chat with" followed by your agent name, such as "Chat with Example Bikes". |
| Input placeholder | The hint text in the message box. If empty: Type your message... |
| Footer text | Small print under the message box, such as a privacy notice, up to 300 characters. Web addresses starting with http:// or https:// become links that open in a new tab. It sits above the "Powered by intoCHAT" credit. |
The agent replies in the visitor's language, but these texts are shown exactly as you write them. On a multilingual site, keep them short and in your main language.
Images
- Agent avatar appears next to each of the agent's messages, not in the header. Without one, the messages show "AI". Use a square image of at least 64 × 64 pixels.
- Launcher icon replaces the default sparkle icon. A custom icon fills the whole 56-pixel launcher, so the launcher color no longer shows.
Both accept PNG, JPG, GIF or WebP up to 5 MB.
Style
Under Style you set the chat window's theme, font and corners.
| Theme | What visitors see |
|---|---|
| Light | A white window, as the widget has always looked. The default. |
| Dark | A dark window. |
| Auto | Light or dark, following each visitor's device setting. The window switches if the visitor changes the setting while the chat is open. |
In the dark theme, your header, visitor message and launcher colors stay as you set them. The agent's messages turn dark grey only while they still use the default light grey; a color you picked stays. With Auto, the Live preview has Light and Dark buttons to check both.
Font applies to everything inside the chat window: System default, Inter, Roboto, Open Sans, Lato, Poppins or Serif (Georgia). System default and Serif use fonts already on the visitor's device. The web fonts are served by intoCHAT, and visitors only download the one you pick. The tooltip and the welcome pop-up on your page keep the system font.
Corners sets how round the message bubbles, the message box, the send button, the suggested questions and custom buttons are: Sharp, Soft or Rounded. Soft is the default and matches how the widget looked before the setting existed.
Colors
Start from a preset under Colours (Ink, Ocean, Forest, Plum, Ember), then adjust any field with the color picker or a hex value.
| Color | Used for |
|---|---|
| Header | The top bar of the chat, which shows the agent name |
| Launcher bubble | The round launcher button and the send button |
| Visitor messages | The background of the visitor's messages |
| Agent messages | The background of the agent's messages |
Placement
Under Placement, set Side of the screen to left or right. The launcher sits 20 pixels from that bottom corner. On desktop, the chat opens as a 380 × 600 pixel window above it. On screens 768 pixels wide or narrower, the chat fills the screen. The chat window has a close button in its header, and clicking the launcher again also closes it.
Removing "Powered by intoCHAT"
The Show "Powered by intoCHAT" switch controls the small credit under the message box. On the Free plan the switch is locked on, and the link Remove the intoCHAT credit on any paid plan below it opens your billing settings. On any paid plan you can switch it off. See pricing.
Launcher behaviour
Under Launcher behaviour, two optional invitations bring visitors into the chat without waiting for a click. Each has a switch and a delay of 0 to 300 seconds on the page.
- Show the welcome message above the launcher shows your welcome messages as small bubbles beside the launcher, after 5 seconds unless you change the delay. Your avatar sits next to the first one, and long messages are cut after four lines. Clicking a bubble opens the chat. The × button dismisses them.
- Open the chat automatically opens the chat window by itself, after 10 seconds unless you change the delay. It is skipped on screens 768 pixels wide or narrower, where the chat would cover the whole screen.
A visit lasts until the visitor closes the browser tab. Auto-open runs at most once per visit. The pop-up appears again on each new page until the visitor dismisses it. Neither appears for the rest of the visit once the visitor has opened or closed the chat, dismissed the pop-up, or the chat has opened automatically. If both are on, the shorter delay comes first, and opening the chat removes a pop-up that is showing.
Common problems
- Changes don't show on your site. Click Save changes, then reload the page. The widget fetches its settings fresh on every page load.
- The launcher color doesn't change. A launcher icon is set and covers the color. Remove the icon to use the color again.
- "Logo could not be imported". The colors were still applied. Upload a logo yourself under Agent avatar.
- The pop-up or auto-open doesn't appear. Both stop for the rest of the visit once the chat was opened, closed or dismissed, and auto-open also after it has run once. To test again, open your site in a new tab. Auto-open never runs on screens 768 pixels wide or narrower.
Next, install the widget with a script tag or see other platforms.