WebChat — Turn Page into a 24/7 Conversion Surface

graph8 WebChat adds a chat widget to your site. It uses AI agents and works smoothly with Forms, Visitors, Lists, Enrichment, and Sequences. One JavaScript snippet gives you chat, tracking, and form capture. You can create no-code flows, send conversations via a URL, and view changes live before you publish.

This guide covers the WebChat Builder. It shows you how to create guided questions and CTAs. You’ll learn to route traffic to agents, test, and publish safely.

It also explains how to connect chat actions to your outreach workflows.

Where to find WebChat

To find the WebChat, simply go to the left nav of graph8, select Engage, then WebChat.

You can also open it directly here (workspace login needed).

When you open WebChat, you’ll see the builder UI. The live preview is on the right. At the top, there are 4 main tabs: Questions, Buttons, Theme, and Agents.

Before you start, install the JS code snippet

WebChat (like Forms and Visitors) runs from the graph8 JS snippet.

1. Copy the snippet from your graph8 dashboard.

2. Paste it before </head> on each page template or landing page.

3. If your site uses a consent manager, ensure the widget only loads after consent when required.

Once installed, WebChat will appear on pages according to the rules you define in the builder.

Builder overview (tabs)

Questions

It creates guided questions (like FAQs) that visitors can click on. These questions cut token use, guide visitors, and enhance the user experience.

• Use for common queries (pricing, integrations, demo booking).

• Recommended length: under 60 characters for question text.

• Fields: Question text, optional category, paths (URL restrictions, comma-separated), and Active toggle.

Example: Question: “Do you integrate with Salesforce?” Paths: /pricing/, /integrations/ → appear only on those pages.

Buttons

Here you can add up to two floating CTAs per page (link, calendar/bookings, or fire a saved question). Just click on '+ New Button' and get started.

• Fields: Label, Action Type (Link / Calendar / Question), URL (if Link), Path Options (all pages, hidden, or specific pages), Active toggle.

• If you need more CTAs, use Paths to swap buttons by page (e.g., pricing page shows “Book a Demo”, blog shows “Ask a Question”)

Theme

Style the chat widget and preview changes live.

• Controls: Colors, fonts, widths, dark mode, header text, button style, message style, suggested question style, and floating button placement.

• Live preview updates instantly; test desktop and mobile widths.

Agents

With Agents here, you can route conversations to specific AI agents based on URL patterns.

• You can add Agent Rules with Agent Name and URL Filter

• Toggle Set as Default for the fallback agent.

• Rules are evaluated top → bottom; the first matching URL wins.

Routing and actions (connect chat to workflows)

graph8 WebChat supports actions that integrate with other graph8 features:

• Add to List: capture an asker into a List for follow-up.

• Add to Sequence: start an automated outreach sequence directly from the chat.

• Enrich: trigger an enrichment job (AI/Waterfall) on captured leads.

• Open a URL / Calendar: route to external or internal booking pages.

• Trigger Workflows: send Slack alerts, notifications, or custom webhooks (if Workflow Builder is available).

Use these to create immediate sales handoffs (e.g., high-intent chat → add to Hot Leads list → notify AE).

Best practices

• Start with a small FAQ set (8–12 questions) and expand based on real user queries.

• Use question prompts to save tokens. Guided paths are cheaper and quicker than free-text flows.

• Route high-intent pages (pricing, demo, signup) to SalesBot and docs pages to SupportBot.

• Keep buttons minimal: two CTAs are the maximum per page but swap them via Paths.

• Test often: preview and test on live pages before publishing widely.

Troubleshooting

• WebChat not showing up? First, check if the snippet is installed and published. Also, look at the consent manager settings.

• Buttons/questions not showing on a page: verify path rules and agent URL filters; clear cache. Check the agent rule order and wildcards. The first match is the one that counts.

• Links or calendar not opening: confirm URL/Calendar config and browser pop-up settings.

• Poor answer quality: adjust agent prompt, update the knowledge base, or use a different model/tuning.

Need help?

• Use the in-app chat (bottom-right) for immediate support.

• Email support@graph8.com for account, integration, or permission issues.

• For advanced routing, workflow integration, or enterprise audits, contact Customer Success.