Guide

Customise the look of your website chat

Change the chat’s texts, colours, button and the way it opens from your agent’s Widget tab, with a live preview and without touching your website again.

In the app:: Agents › your agent › Widget; Open the app
Reviewed on: Reviewed on 6 October 20266 min read

In this article

You change the look of the chat in your agent’s Widget tab: the texts, the colours, the button that opens it and the way it opens. Every change shows at once in a preview and, when you press Save changes, it applies on your website without pasting the code again.

Where to change it

Go to Agents and open your agent.
Open the Widget tab.
Choose the section you want to change: Content, Appearance, Launcher and window or Behaviour.

The fifth section, Installation, holds the chat code and the domains where it may be used. See install the chat on your website and limit the chat to your domains.

To change anything you need the Member, Admin or Owner role. With Read only you can see the settings but not change them.

The preview

The preview is the real chat with your changes not yet saved, shown on a sample conversation. It creates no conversations and spends no credits.

If you do not see it next to the settings, press Preview.
Desktop and Mobile show how it looks on a computer and on a phone.
You cannot type in it. To talk to your agent, use the Playground tab, as explained in test your agent.

Content: texts and images

Group	What you set
Header	The chat’s Title and Subtitle. With an empty title, the name of your business is shown or, if you have not given one, the agent’s name
Start of the conversation	The Welcome message, which is the agent’s first message (if empty, the chat starts without a greeting); up to 4 Suggested questions, which a visitor sends with one tap; and the Input placeholder
Widget language	The language of the chat’s buttons and notices, not of the replies. Automatic uses the visitor’s browser language if your agent speaks it and, otherwise, the agent’s default
Images	The Logo, shown in the header, and the Agent avatar, shown next to its messages

Worth knowing:

Suggested questions are shown as buttons under the greeting, in the order of the list. Change it with Move up and Move down.
The greeting and the questions are shown at the start of a conversation. If you had already written in the chat on your website, you will see that conversation: to start afresh, open the chat’s menu and choose “New conversation”.
The chat’s own texts exist in Spanish, Catalan and English; Galician, Basque and Portuguese use the Spanish ones, and every other language the English ones. The language your agent replies in is chosen separately, in its Behaviour tab: see adjust how your agent answers.

Images: formats and size

PNG, JPEG, WebP or GIF images of at most 1 MB are accepted. SVG files are not. Press Upload image to add one, Replace image to swap it and Remove to stop using it. Without images, the chat uses its own icon and the agent’s initial; if you upload an avatar but no logo, the avatar is used in the header too.

Appearance: mode, colours and typeface

Mode: Light, Dark or Automatic, which follows the light or dark preference of each visitor’s device.
Colours: choose the Brand colour and the rest is worked out from it. If you need to, you can set the colour of one specific part: Header, Window, Agent messages, Visitor messages, Message field, Send button, Launcher or Links and borders. All automatic puts them back to the calculated ones.
Type and shape: the Typeface (System, Your site’s, Rounded, Serif or Monospace), the Text size and the Corner radius, which rounds the window, the messages and the buttons. Your site’s uses the typeface of the page the chat is installed on, so check it on your own website.

Contrast warnings

If a text or an icon is hard to read on its background, the app marks the affected part with “Low contrast” and gathers every case at the start of Appearance. It is a warning, not a block: you can still save. To fix it, change one of the two colours or leave it on automatic. When everything reads well, Colours shows “Contrast is fine”.

Launcher and window

The launcher is the floating button that opens the chat.

Launcher: the Shape (Circle, Rounded or Pill), the Icon and the Size. The Pill shape takes a Pill text next to the icon, for example “Chat with us”; without text it is shown as a circle. The Your image icon uses the Launcher image you upload, which fills the whole button; if you upload none, the logo is used.
Position on the page: the Side (Left or Right), the Side offset and the Bottom offset. Use them so that the button does not cover something else on your website.
Chat window: the Width and Height of the window on a computer. Under Header you choose Show the logo and Show the status (“Online” or “Outside opening hours”); under Messages, Show the agent’s avatar and Show the time of each message.

Behaviour: how it opens, opening hours and branding

Opening

Option	What it does
Closed	Only the launcher is visible. The visitor opens the chat when they want
Open	The chat opens when the page loads. If the visitor closes it, it stays closed in that tab
Opens after a while	Lets the page be seen first and opens by itself, once per visit, after the Seconds before opening you set

Outside opening hours

Your agent replies at any hour. This option only changes what a visitor sees while the business is closed.

Turn on Take the business hours into account.
Write the Out-of-hours message, for example “We are closed right now. Leave your details and we will call you tomorrow.”

Outside opening hours, your message appears as a notice at the top of the chat and the header says “Outside opening hours”, if Show the status is on. The hours are not set here: they are the Opening hours in the agent’s Profile tab, with their Time zone, and the Edit the hours link takes you there. If Always open is selected in the profile, the chat never shows as closed.

To see how it looks without waiting for closing time, turn on Show the “outside opening hours” state in the preview. It only changes the preview and is not saved.

iAgentify branding

The bottom of the chat reads “Powered by iAgentify”. Whether you can remove it depends on your plan. If your plan includes it, you will see the Remove the iAgentify branding switch. If not, the app says that your plan always shows the branding and which plans allow removing it, with the See plans button.

On phones

The chat takes the whole screen, so the Width and Height of the window do not apply.
It never opens by itself, even if you chose Open or Opens after a while: the visitor taps the launcher.

Saving and seeing the change on your website

Press Save changes. “Widget saved” appears. One save covers the changes in every section.
Open your website and reload the page. The change can take about a minute to show.

There is no need to paste the code again: the look is not stored on your website, the chat asks iAgentify for it each time a page loads. A page that was already open keeps the previous look until it is reloaded.

Until you save, Discard undoes the changes, and if you leave the Widget tab the app asks “Leave without saving?”.

If you have saved and the chat does not show on your website, the look is not the reason: go through the chat does not appear on your website.