Customising your Chatbot

Chatbot themes control how the chat widget looks, including logos, colours, typography and the copy on each page. Done well, the widget reads as part of your product rather than something bolted on.

Themes are configured per brand. A live preview sits beside the editor so you can see the widget as your customers will.

You can create multiple themes per brand and switch between them, useful for seasonal styling, or for testing a new look before committing to it.

Before you begin

You need:

• To be a workspace administrator. Chatbot theme is only listed for administrators.
• At least one brand configured
• The chat widget installed, if you want to check the result on your site. See Setting up the chat widget.

Step 1 — Open Chatbot theme

1. Go to Chat.
2. Select Chat Settings.
3. Select Chatbot theme.
4. Choose the brand you are customising from the brand selector.
5. The editor has two tabs on the right: Page Settings and Theme Settings. Theme Settings holds the shared look of the widget. Page Settings holds the wording and per-page overrides.

Step 2 — Create or select a theme

On the Theme Settings tab, use the theme dropdown to select an existing theme. The published theme is marked with a check.

To add another theme:

1. Open the theme menu (the three-dot button next to the dropdown).
2. Select Add New Theme.
3. Enter a unique theme name.
4. Optionally choose an existing theme to duplicate properties from. Leave this as None to start from the default.
5. Tick Apply theme to chatbot? if this theme should become the one customers see.
6. Select Create Theme.
7. Theme names must be unique within the brand.

Step 3 — Configure Theme Settings

Work through the blocks on the Theme Settings tab. Changes appear in the preview as you edit.

Set the theme up first, then move on to individual pages. Saving colour changes on the theme overrides the matching colours on every page.

Brand Assets

Brand Logo

The logo at the top left of the home page. Prefer PNG or SVG at 125 × 25. Maximum file size is 1 MB

Chatbot Chat Icon

The avatar shown beside chatbot messages. Prefer PNG or SVG at 48 × 48. Maximum file size is 1 MB

Chatbot Button Icon

The floating launcher customers click to open the widget. Prefer PNG or SVG at 48 × 48. Maximum file size is 1 MB

Background (under Chatbot Button Icon)

The colour behind the launcher icon

Text Styles

Each text type has its own Font, Style and Size.

Text type

Typical use

Heading 1

Largest titles

Heading 2

Section titles

Heading 3

Smaller headings

Heading 4

Lowest-level headings

Main Text

Body copy

Subtext

Captions and secondary labels

Available fonts: Roboto, Arial, Helvetica, Verdana, Tahoma, Trebuchet MS.

Available styles: Normal, Bold.

Default Parameters

What it does

Fallback User Name

The name used when a visitor has not given theirs. The default is User

Color Palette

Group

Colours

Brand

Primary, Secondary

Text

Primary, Secondary, Tertiary

Action

Primary, Secondary — used on buttons and other interactive elements

Background

Primary, Secondary, Tertiary, Input Field, Disabled

Other

Highlight, Border, Warning, Error

Step 4 — Configure Page Settings

Open the Page Settings tab when you need to change the wording or styling of a specific widget page. Use the page dropdown in the top bar to switch pages.

Theme colours and the brand logo are inherited. A page can override them, but those overrides are replaced the next time you save a colour change on the theme.

Pages you can customise:

Home Page

The first screen, greeting, header, shortcuts and contact options

The Home Page greeting supports the {{user.name}} placeholder and simple HTML such as <br> for line breaks.

Help Page

Help links and search

Articles Page

A single knowledge base article, including feedback and related articles

Article Search Page

Search field and results

Chatbot Page

The conversation, message bubbles, suggestions, input and the end-chat button

Chatbot - Live Chat

The sticky banner shown during a live chat

Chatbot - Call

The sticky banner shown during a voice call

Chatbot - Open Request

The form used to create a support request

Chatbot - Transactions

Transaction cards and their actions

Conversations Page

The list of the visitor's previous conversations

Conversation Details Page

A single past conversation

CSAT Page

The satisfaction survey after a conversation

Login Page

The visitor login form

Guest Form Page

The form shown when a visitor is not logged in

Common Modal

Shared dialogs used across the widget

Typical page fields include titles, button labels, placeholder text, and colours for backgrounds, text, borders and icons. Some pages also let you hide a section or point a shortcut at a knowledge base article.

Step 5 — Save and publish

Editing is not enough on its own. Customers only see a change after it is saved and published.

1. Select Save at the bottom of the tab you are editing. Fix any validation errors first — Save stays blocked until they are cleared.
2. Select Publish Changes in the top bar.
3. Tick the themes and pages you are ready to release. Leave anything unfinished unchecked.
4. Select Publish Selected.

The current published theme is shown at the top of Theme Settings.

If you navigate away with unsaved edits, Pleased warns you before you lose them.

Resetting or deleting

Reset a theme or page

Use Reset at the bottom of the tab to restore that theme or page to its default values. Images are left as they are. Reset does not publish. You still need to Save, then Publish Changes.

Reset to Default in the top bar resets all pages to their defaults and saves them. Images are not affected. You still need to publish afterwards.

Delete a theme

1. Select the theme in the dropdown.
2. Open the theme menu and select Delete Theme.

You cannot delete the last remaining theme. If you delete the published theme, you must choose a replacement to become the active theme.

Troubleshooting

Chatbot theme is missing from Chat Settings. You need to be a workspace administrator, and the page must be enabled for your workspace. Contact a workspace administrator or Pleased support.

The preview looks right, but the live widget has not changed. Confirm you selected Save and then Publish Changes, and that you published the same brand the widget is assigned to.

Page colours reverted after I edited the theme. Saving the colour palette overrides the matching colours on every page. Set the theme first, then adjust individual pages.

I cannot delete a theme. At least one theme must remain. Create another theme first if you want to remove this one.

An image will not upload. Use PNG or SVG, keep the file under 1 MB, and match the preferred size where you can — 125 × 25 for the logo and 48 × 48 for the chat and button icons.

Theme name already exists. Names must be unique within the brand. Choose a different name.