Browser and page data in chat workflows

Plans and permissions:

• Add-on: AI agents, billed separately
• Create the smart fields: Admin role, or a custom role with Smart fields set to Can edit smart fields settings
• Map user data to smart fields: Admin, Manager, or Team Lead role, or a custom role with Chat agent settings set to Can edit chat agent settings
• Add the data to a workflow: Admin, Manager, or Team Lead role, or a custom role with Workflows set to Can create, edit, and delete workflows

Use browser and page data to tailor chat agent workflows to how and where a visitor is chatting: their browser, operating system, and device, and the page they opened the chat from. The chat widget sends these details with every chat, even when the visitor isn’t logged in, so you can give device-specific troubleshooting steps, help with the product on the page, or route mobile visitors to the right team.

This works in chat agent workflows only, not in email agent workflows. To set it up, you create smart fields in Configure > Smart fields, map the data to them in AI support > Chat agent, and add a Collect information step to your workflow.

How browser and page data works

• The chat widget collects the data when the chat starts, and it’s available for the whole conversation.
• It works in the embedded chat widget and in public chat. Test conversations may not include all of it.
• The widget sends only the page and browser details listed below. It doesn’t send the visitor’s location.
• Browser and device detection works for modern desktop and mobile browsers.

Data the chat widget sends

For signed-in visitors, your website can also send their ID, email, name, and other details in metadata. See Identify signed-in users.

The user data for a visitor who isn’t logged in looks like this:

{
  "user_id": "anonymous_12345",
  "email": null,
  "name": null,
  "current_page_data": {
    "url": "https://example.com/products/widgets",
    "title": "Premium Widgets | Example Corp",
    "meta_description": "High-quality widgets for...",
    "meta_keywords": "widgets, premium, quality",
    "main_heading": "Our Premium Widget Collection",
    "device_type": "Desktop",
    "operating_system": "macOS",
    "browser_name": "Chrome",
    "browser_version": "120.0.6099.129"
  },
  "metadata": {}
}

Set up browser and page data

Setup has three parts, in three different places: create the smart fields, map the data to them, and add a step that loads them into your workflow.

Create the smart fields

1. Go to Configure > Smart fields and select Create smart field.
2. Enter the Name, choose the Type, and enter the Description for one of the fields in the table below.
3. For device_type, choose Dropdown and add the options Desktop, Mobile, and Tablet.
4. Select Save changes.
5. Repeat for each field you want to use.

For more on smart fields, see Smart fields.

Map the data to smart fields

Map each path to its smart field. Every path starts with current_page_data.:

1. Go to AI support > Chat agent, select the chat agent, and open the Setup tab.
2. In User data mapping, select Add variable.
3. Enter the JSON path, such as current_page_data.browser_name, and choose the matching Smart field.
4. Repeat for each path in the table.
5. Select Save changes.

Add a Collect information step

A Collect information step loads the mapped values into the workflow. Because the values are already known, the AI agent doesn’t ask the visitor for them.

1. Go to AI support > Workflows and open the chat agent workflow.
2. Select + directly after the trigger, select Add step, and choose Collect information.
3. Optionally, enter a Step name, such as Load browser data.
4. Enter Response instructions, such as “These details come from the chat widget. Don’t ask the customer for them.”
5. Under Information to collect, choose each smart field you created.
6. Select Update step, then save or publish the workflow.

Use the data in later steps

Every step after the Collect information step can use the fields:

• In a Guide step, type @ in Response instructions and choose the smart field, such as browser_name. See Guide steps in workflows.
• In a Condition step, branch on a value, such as device_type equals Mobile, browser_name equals Chrome, or current_url contains products.

Examples

Technical troubleshooting

A Guide step’s instructions say: “Tell the customer you can see they’re using @browser_name on @operating_system, and give the steps for @device_type.” A visitor on Chrome on Android gets the mobile steps without being asked what they’re using.

Routing

A Condition step sends conversations where device_type equals Mobile to a branch that hands off to your mobile support team, and conversations from older browsers to a branch with browser-specific help.

Page-specific help

A Guide step uses @page_title or @current_url to open with “I can see you’re on our Premium Widgets page. Let me help you with that product.” and to look up the right article.

Common issues

• Replies show a placeholder instead of the value: Add the Collect information step directly after the trigger. The values aren’t loaded if the workflow has no Collect information step, or if it isn’t the first step.
• Fields stay empty: The JSON paths in User data mapping are wrong. Check that they’re full paths, such as current_page_data.browser_name, not browser_name.
• The smart fields aren’t listed in the Collect information step: The smart fields haven’t been created. Check Configure > Smart fields, and the mappings on the chat agent’s Setup tab.
• A Guide step doesn’t use the values: The Collect information step doesn’t include those fields. Add them under Information to collect.

To check your setup, confirm that each smart field exists with its exact name, each mapping starts with current_page_data., the Collect information step comes first and includes every field you need, and later steps refer to the fields with @.