Chat is a smart, customisable widget that sits neatly on your website. It lets your visitors communicate in real-time with your team, allowing them to answer questions and solve problems instantly.
Chat has features to boost your communication to the next level:
- Real-time messaging – answer customer questions and fix problems instantly.
- Send and receive content such as tickets, receipts, images, and videos.
- Transfer chats between agents.
- Quickly access and catch-up on your chat history, so customers don’t have to repeat themselves.
You can try Chat now
All our account packages have at least one free chat agent included. Contact your account manager to purchase more agents.
The Chat interface
Use the Chat interface to manage your chats, visitors, and reply to messages.
The Chat interface lets you manage your chat sessions within Engagement Cloud. You can use it to view chat sessions, receive and reply to messages, transfer chats between agents, link conversations to existing contacts, and manage your chat queue.
Chat interface in Engagement Cloud
Customising the chat widget
Learn how to customise your chat widget to match your brand.
To customise your chat widget:
Step 1: Go to Chat > Settings in Engagement Cloud.
Step 2: Enter a team name
Enter your team name in the box. The team name appears at the top of the chat widget, and your visitors will see it – so make it a good one.
Step 3: Pick your colours
Use the Colour picker to change the colours of your chat widget. Get creative or use your brand's colour scheme. It's up to you.
The colour picker uses hex colour codes. Enter your hex colour code or click the box to open the visual colour selector.
You can edit the following colours:
- Main colour
The colour of the top bar, visitor speech bubbles, and send button. Enter a hex code or click to use the visual selector.
- Text colour
Use White text if you have a dark main colour and Dark text with a light main colour.
- Support colour
The colour of the agent speech bubbles and the reply text box. Enter a hex code or click to use the visual selector.
- Text colour
Use White text if you have a dark support colour and Dark text with a light support colour.
The widget colour picker
Step 4: Choose a theme
Themes are little animations to make your widget stand out. You can select a different theme for both new visitors and returning visitors.
There are three theme variations:
A bouncing animation
A pulsating, colour changing animation
Click Basic, Bounce, or Sonar to select your theme.
The chat widget theme selector
Step 5: Click Save and generate code to finish customising.
Adding the chat widget to your website
To embed the chat widget on your site:
- In Engagement Cloud, go to Chat > Settings.
- Once you've customised your widget, click View code.
- Select Yes or No for Auth Callback.
- On the pop-up side panel, click Copy to clipboard.
- Paste the copied script into the head section on the pages of your website where you want the chat widget to appear. The script is compatible with tag managers, like Google Tag Manager.
- The chat widget appears on the bottom right-hand side of your website.
Auth Callback explained
Auth Callback allows you to integrate the chat widget into your existing authentication system. When you configure auth callback, any contacts created in Engagement Cloud using Chat have the same user ID as in their corresponding accounts on your website. If you're not sure about how to use Auth Callback, we recommend using the chat widget with Auth Callback set to No – you'll still get all the great features of Chat.
Adding the chat widget to an Engagement Cloud page
To add the chat widget to an Engagement Cloud page using Pages and forms:
Step 1: Copy the widget code
- Go to Settings > Account > Chat settings.
- Click View code.
- Copy the widget code to your clipboard.
Copying the chat widget code
Step 2: Adding Chat to a page
- Go to Pages and forms and create or edit a page.
- Click Utilities > Add tracking code.
- Click + Add tracking code and select Other.
- Paste the widget code into the Other tracking code box.
Adding the chat widget code to a page
Step 3: Publishing your page
Go to step 3.1 if you are publishing for the first time, or 3.2 if you are republishing a page.
- Publishing for the first time:
i. Click Create a link.
ii. Click Publish.
- Republishing a page:
Publishing your page in Pages and forms
That's it! Visit your page to see Chat in action.