Back to Docs

Site chat

A chat bubble that answers from the site's own pages and collects leads.

This is the guide the PageHub MCP server gives an AI agent for get_style_reference({ topic: "chat" }). Names like set_theme are its tools (connect one), and the liquid topic is the HTML + Liquid reference.

A chat bubble that answers from the site's own pages and collections and turns visitors into leads. Visitors see it while the owner has AI credits.

  • get_site_chat reads the settings, set_site_chat changes only the fields you pass: enabled, assistantName, greeting, instructions (tone, what to push or avoid), leadFields (name, email, phone, message; must include email or phone), leadCollectionSlug (also save leads as rows), notifyEmail, dailyCreditCap (0 pauses). Leads land in Form Submissions as "Chat".
  • The widget is markup in a page or partial (start from get_block({ slug: "site-chat-bubble" })):
HTML + Liquid
<div class="contents" data-chat-bubble hidden>
  <button class="btn btn-primary btn-circle fixed bottom-4 right-4 z-[1100]" type="button" popovertarget="site-chat-panel" aria-label="Chat with us">{{ 'tb/TbMessageCircle' | icon }}</button>
  <div id="site-chat-panel" popover class="fixed inset-auto bottom-20 right-4 z-[1200] m-0 p-0 w-[min(24rem,calc(100vw-2rem))] bg-base-100 text-base-content rounded-box border border-base-300">
    <div id="site-chat" data-chat hidden class="flex flex-col h-[28rem]">
      <p class="px-space-sm py-space-xs font-semibold" data-state-text="site-chat:assistantName">Assistant</p>
      <div class="flex-1 overflow-y-auto flex flex-col gap-space-xs p-space-sm" data-chat-turns aria-live="polite">
        <template data-chat-role="user"><div class="self-end rounded-box bg-primary text-primary-content px-space-sm py-space-xs"><span data-turn-text></span></div></template>
        <template data-chat-role="assistant"><div class="self-start rounded-box bg-base-200 text-base-content px-space-sm py-space-xs"><span data-turn-text></span></div></template>
      </div>
      <p class="px-space-sm text-sm text-error" role="alert" data-state-show="site-chat:hasError" data-state-text="site-chat:error" hidden></p>
      <div class="flex items-end gap-space-xs p-space-sm border-t border-base-300">
        <textarea class="flex-1 border border-base-300 bg-base-100 rounded-box px-space-sm py-space-xs min-h-12 resize-none" name="agentMessage" rows="1" aria-label="Your message"></textarea>
        <button class="btn btn-primary min-h-12" type="button" data-chat-send="agentMessage">Send</button>
      </div>
    </div>
  </div>
</div>
  • data-chat-bubble and data-chat are hidden until chat is on. The widget's id prefixes its state keys: available, ended, sending, hasTurns, hasError, error, streamingText, assistantName, accentColor (read them with data-state-show / data-state-text, as above). Turns are drawn by cloning the data-chat-role templates and putting the message in [data-turn-text].
  • data-chat-send="agentMessage" on a button or form sends the field named agentMessage (or, with no field, the element's own text, so a suggestion chip works: <button type="button" data-chat-send>Do you ship to Canada?</button>) and opens the panel.