Put a live chat bubble on a website
Set the widget's name, colour and greeting, choose who answers, install it on a website and reply from the Revenue inbox.
The written steps below are complete. The Video script tab shows exactly what the video will cover.
The live chat widget is a chat bubble for a website. A visitor's message arrives as a thread in Messages under Revenue, and the built-in assistant can answer common questions from your knowledge base when nobody is online.
By the end you can
- Configure the main widget
- Add a separate widget for another website
- Install the widget and answer a visitor
Screens used
Before you start
- Team Chat turned on for the workspace. If it is off, the page says the widget will not load on your site.
Steps
- 1
Open the settings
On: /settings/live-chatType "live chat" in Find a page… and open the live chat settings.
You should see: A page titled "Live chat widget" with a Website selector.
- 2
Set how it looks
On: /settings/live-chatThe main widget is selected first. Set the Name in the chat header, the Logo, the Language and the Brand colour. Fields you leave empty use your workspace branding.
You should see: The header name and colour are yours.
- 3
Set the greeting and the questions asked
On: /settings/live-chatWrite the Greeting (when someone's online). Tick Ask for name and email before chatting if you want every visitor's details before the conversation starts.
You should see: The greeting is filled in.
- 4
Choose who answers
On: /settings/live-chatTick the teammates who should receive visitor chats. Tick Assistant: hand hard questions to a human at once if you would rather a person takes over quickly.
You should see: At least one teammate is ticked.
- 5
Limit where it can run
On: /settings/live-chatUnder Allowed domains list the website addresses the widget may load on, and turn the Widget status to live.
You should see: The status shows the bubble is live.
- 6
Add a widget for another website
On: /settings/live-chatFor a client's site press Add a widget for another website, type the Website name and press Add widget. That widget is its own website: empty fields use neutral defaults, never your workspace's name, logo or colour.
You should see: The new website appears in the Website selector.
- 7
Install it
On: /settings/live-chatOpen Install, copy the script and paste it into the website's header and footer scripts area, or just before the closing body tag. Save your changes first; the page warns about unsaved changes.
You should see: The chat bubble appears on the website.
- 8
Answer a visitor
On: /messagesSend a test message from the website. Open Messages, choose Revenue and reply in the new thread.
You should see: Your reply appears in the bubble on the website.
Tips
- With the status off, the script still loads but shows nothing, so you can pause the widget without touching the website.
- Label (only you see this) names the widget in your own lists.
- You can choose how much of the visitor's page address is stored: the full address, the path only, or nothing.
Troubleshooting
- The chat bubble does not appear on the website.
- Check three things: the widget's status is on, the script is pasted into the website and the site was published again, and Team Chat is switched on for the workspace.
- Visitors write but nobody is notified.
- No teammate is ticked to receive chats. Tick at least one on the widget's page.
One row per shot, in the same order as the guide. Estimated length 3:10, recorded signed in as Owner. Use made-up data only. How to record
Say: Put a live chat bubble on a website. Set the widget's name, colour and greeting, choose who answers, install it on a website and reply from the Revenue inbox.
Hold until you see: Lesson title on screen for three seconds.
Say: Type "live chat" in Find a page… and open the live chat settings.
Hold until you see: A page titled "Live chat widget" with a Website selector.
Say: The main widget is selected first. Set the Name in the chat header, the Logo, the Language and the Brand colour. Fields you leave empty use your workspace branding.
Hold until you see: The header name and colour are yours.
Say: Write the Greeting (when someone's online). Tick Ask for name and email before chatting if you want every visitor's details before the conversation starts.
Hold until you see: The greeting is filled in.
Say: Tick the teammates who should receive visitor chats. Tick Assistant: hand hard questions to a human at once if you would rather a person takes over quickly.
Hold until you see: At least one teammate is ticked.
Say: Under Allowed domains list the website addresses the widget may load on, and turn the Widget status to live.
Hold until you see: The status shows the bubble is live.
Say: For a client's site press Add a widget for another website, type the Website name and press Add widget. That widget is its own website: empty fields use neutral defaults, never your workspace's name, logo or colour.
Hold until you see: The new website appears in the Website selector.
Say: Open Install, copy the script and paste it into the website's header and footer scripts area, or just before the closing body tag. Save your changes first; the page warns about unsaved changes.
Hold until you see: The chat bubble appears on the website.
Say: Send a test message from the website. Open Messages, choose Revenue and reply in the new thread.
Hold until you see: Your reply appears in the bubble on the website.
Say: That is put a live chat bubble on a website. The written steps are on this lesson's page in the ItzSEO course.
Hold until you see: End card with the lesson link.
Mark it complete to keep your place in the course.
Related lessons
Create a reminder with a due time and priority, have it keep nagging until done, and snooze or complete it.
Let people book a call from a link: set the length, your weekly hours, notice and buffer, and attach a Google Meet link.
Start a voice or video call from any one-to-one conversation, with teammates or with leads, and share your screen.