WebChat

Overview

Graph8 Web Chat turns any page into a 24/7 conversion surface powered by your AI agent. Once the JavaScript snippet is installed (see JS Snippet Set‑Up), WebChat appears instantly.

What sets it apart:

  • Unified script – Same snippet drives chat, forms, and visitor tracking.

  • No‑code editor – Configure FAQs, CTAs, and styling from a single console.

  • Contextual routing – Direct questions to different agents or sequences based on URL.

  • Live design preview – Watch changes in real time in the right‑hand demo pane.

Accessing the Web Chat Builder

  1. Side‑nav → Engage → Web Chat

  2. Or go directly to https://subscription.graph8.com/chat (requires workspace login).

You’ll see four tabs across the top:

Tab

Purpose

Questions

Build FAQ‑style prompts that users can click.

Buttons

Add floating CTAs (link, calendar, or question).

Theme

Control colours, fonts, widths, dark‑mode, etc + Demo the WebChat

Agents

Route conversations to specific AI agents by URL pattern.

A live preview sits on the right so you never publish blind.

Creating Guided Questions

Why use them?
Questions pre‑empt objections and nudge visitors down predictable paths, cutting GPT token spend and boosting CSAT.

  1. Open Questions → + New Question.

  2. Fill in the modal:

    Field

    Description

    Example

    Question

    Visible text in the chat.

    “Do you integrate with Salesforce?”

    Category

    Internal label (optional).

    Integrations

    Paths

    Restrict to URLs (comma‑separated). Leave blank for all pages.

    /pricing/, /signup/

    Active toggle

    Turns the question on/off.

    On

  3. Click Add Question.

Pro Tip: Keep each question < 60 characters. Mobile users will thank you.

Adding Action Buttons

Web Chat supports up to two buttons per page, perfect for high‑intent CTAs.

  1. Navigate to Buttons → + New Button.

  2. Configure:

    Setting

    Options

    Label

    Text on the button (e.g., Book a Demo).

    Action Type

    Link (URL), Calendar (routes to /demo booking), or Question (fires a saved FAQ).

    URL

    Destination for Link or Calendar.

    Path Options

    Show on all pages, hidden, or specific pages.

    Active

    Toggle live/paused.

  3. Click Add Button and verify it appears in the preview.

Avoid CTA overload: If you need more than two buttons, swap them programmatically via Paths (e.g., pricing page vs. blog).

Branding Your Chat (Theme Tab)

Everything here updates the preview in real time.

  • General Settings

  • Header Settings

  • Message Settings

  • Suggested Questions Settings

  • Floating Button Settings

Routing with AI Agents

Need a specialised bot for /docs and a sales bot for /pricing? Agents make it dead‑simple.

  1. Go to Agents → Add Agent Rule.

  2. In the modal:

    Field

    Example

    Agent Name

    SupportBot, PricingBot, etc.

    URL Filter

    /docs/*, /pricing/* (supports wildcards).

    Set as Default

    Toggle if this agent should answer everywhere else.

  3. Click Create Agent. The rule appears in the table with status Active.

Hierarchy: The first URL filter match wins; if none match, the Default agent answers.

Testing & Publishing

  1. Open any page on your live site.

  2. Trigger the chat widget and look for your new buttons/questions.

  3. Ask a few queries to ensure the correct agent responds.