Set up webchat with visitor tracking and outbound chat

When this is done, your website has a chat widget that customers can use to reach an agent. Agents also see which visitors are on the pages you choose – for example your pricing page – and can send them a message first. The widget opens on the visitor's screen with the agent's message.

Visitor opens a tracked page with the widget
  → the visitor appears under Website Visitors in the Agent application
  → an agent clicks Message
  → an outbound chat task opens, showing the page the visitor is on
  → the agent writes; the widget opens on the visitor's screen with the message
  → the visitor answers, the agent closes the chat and wraps up

It takes about 30 minutes. Roles involved: Administrator (Part 1), Integrations & IT (Part 1, step 4 – whoever maintains your website), Agent (Part 2).

Before you start

What	Who	Where
Access to the Chat section of the portal	Administrator	Roles
A chat workflow with a queue, for chats that visitors start themselves	Administrator	Build your first chat workflow
A web page you can add the widget code to – a test page is best	Whoever maintains your website	–
An agent with Allow adhoc outbound & lookup turned on	Administrator	Disable outbound capabilities per agent
A second browser or device to play the visitor	Tester	–

Agents without Allow adhoc outbound & lookup don't see the Website Visitors tab at all. The option is on by default.

Part 1 – Set it up (Administrator)

1. Create the webchat channel

1. Go to Chat › Webchat and click Create.
2. On Channel Details, enter a Name and choose the Workflow. Both are required. Choose a Business unitBusiness Unit – A label assigned to channels, agents, customers and agent workspaces to split one tenant into separate groups. if your agents work in business units.
3. On Widget Configuration, leave the defaults for this first test. Optionally, choose the Starting visual theme (Light or Dark) – you can only pick it here, but you can change the colours later.
4. Click Next through Business HoursBusiness Hours – A channel's time zone, opening hours, holidays and exceptions, set on the channel's Business hours tab. and Completion CodesCompletion Codes – Short labels an Agent picks when closing a Work Item to record the outcome of the Conversation, used in Reporting. They are set per Channel, and an Agent Workspace can replace them with its own codes and sub-codes., and click Create.

Expected result: the channel appears in the Webchat list. Customer tracking isn't part of the create steps – you turn it on in step 2.

See Create a webchat channel.

2. Turn on customer tracking

1. In the Webchat list, click your channel to open it.
2. Open the Customer Tracking tab and turn on Customer Tracking.
3. Under Tracked page paths, type a path and press Enter. Use / to track every page, or a wildcard such as /products/* for a group of pages. Add one path per row.
4. Optionally, under Excluded IP ranges, click Add and enter a Range start and Range end – for example your office network, so agents don't see colleagues browsing the site.
5. Click Save.

Expected result: Widget config successfully updated! If Save is disabled, an IP range row is empty – fill it in or remove it with X.

Don't exclude the network you'll test from, or your own test visit won't show up in Part 2.

See Customer tracking tab.

3. Check the widget in the portal

1. Open the Widget Versions tab.
2. Click Show demo widget.

Expected result: the chat bubble appears on the portal page. Open it and write a message to try your workflow. Click Dismiss demo widget when you're done.

4. Add the widget to your web page

1. On the Widget Versions tab, click Copy embed code. You see Embed code copied to clipboard.
2. Send the code to whoever maintains your website. It's a <div> and a <script> line; they paste it into every page that should show the widget.
3. If you turned on Trusted Domains on the Widget Configuration tab, add your website's address there, or the widget won't load on it.

Expected result: the chat bubble appears on your web page.

See Embedding the webchat widget.

No web page yet?

Copy integration page URL on the same tab gives you a hosted page with the widget, for testing chats without a website. For visitor tracking you need the widget on your own page, at a path you track.

Part 2 – Chat with a visitor (Agent)

5. Visit the page as a customer

1. In a second browser or on another device, open the web page from step 4. Use a page that matches one of the Tracked page paths.
2. Leave the page open.

6. Find the visitor

1. Log in to the Agent applicationAgent Application – The Agent facing website of Graia providing the UI elements to consume its feature set.. You can stay on break.
2. On the dashboard, open the Website Visitors tab.

Expected result: the tab has a badge with the number of visitors. Your test visit is listed with the page title, its path and how long the visitor has been on the page. If several pages are tracked, use the Page filter to show one of them.

See Website Visitors.

7. Start the chat

1. Click Message on the visitor's row.
2. Wait a few seconds while the task loads. The header then shows Outbound Chat and the channel name.
3. Read the banner Customer was browsing:, which names the page the visitor is on.
4. Type an opening message, for example Hi! Can I help you find the right plan?, and send it.

Expected result: on the visitor's screen, the widget opens by itself with your message as the first one – pre-conversation messages aren't shown in an outbound chat. In the Agent application, the message shows Seen once the visitor has read it.

If you were on break, your state is now Pending break: you go back on break when you close the task.

See Outbound webchat to website visitors.

8. Finish the chat

1. Answer as the visitor in the widget, and reply as the agent. The chat works the same as an inbound one: templates, transfer and attachments are all there.
2. Click the X on the conversation header, then Close chat.
3. Choose a Completion code and click Complete task.

Expected result: the widget shows Conversation ended, and the task leaves your task listTask List – A list of the Agent's Tasks, shown on the left side of the Agent Application..

See Managing chat.

Check that it works

#	Do this	You should see
1	Click Show demo widget on the channel's Widget Versions tab	The chat bubble on the portal page
2	Open your web page	The chat bubble on your page
3	Open the Website Visitors tab in the Agent application	Your visit, with page title, path and time on page
4	Open a page that isn't tracked	The visit isn't listed
5	Click Message and send a message	The widget opens on the visitor's screen with your message
6	Start a chat from the widget yourself	The chat goes through your workflow to the queue
7	Close the visitor's page	The visitor leaves the Website Visitors list; an open chat shows the customer as Offline

If it doesn't work

Symptom	Likely cause	Fix
No Website Visitors tab	Allow adhoc outbound & lookup is off for the agent	Turn it on in the agent's Agent Configuration tab
The tab is there but your visit isn't	Customer tracking is off, the page path isn't tracked, or your IP address is excluded	Step 2
The widget doesn't appear on your page	The code isn't on the page, or Trusted Domains is on without your site	Step 4
Save is disabled on Customer Tracking	An excluded IP range row is empty or invalid	Fill it in or remove it – step 2
Chats the visitor starts don't reach an agent	The workflow has no queue, or no agent with its attributes is available	Build your first chat workflow
The task still says Unknown Channel	It's still loading	Wait a few seconds

Related

• Webchat channel
• Chat workflows
• Agents: outbound and lookup
• Agent dashboard: Website Visitors
• Outbound webchat to website visitors
• Managing chat
• Embedding the widget (developer docs)