Quick start (60 seconds)
Three steps. Anyone with access to a site head tag can finish in under a minute.
- 1
Connect a workspace
Open /dashboard/integrations and connect any of the channels — Gmail, calendar, phone — that you want the AI to access. The webchat widget can run standalone if you prefer.
- 2
Configure your widget
Open /dashboard/integrations/webchat. Pick a template, color, position, and greeting. Apply an industry preset if your business matches one of our 8 verticals (dental, legal, salon, HVAC, med spa, vet, auto, accounting). Save with Cmd-S or wait for autosave.
- 3
Paste the snippet
Click the Embed code button on the composer. Copy the script tag. Paste it into your site
<head>tag. Done — the widget appears within seconds.
<!-- SUBLAKE Webchat -->
<script
async
src="https://cdn.sublake.com/webchat.js"
data-key="wc_pk_YOUR_KEY_HERE"
data-position="bottom-right"
data-color="#7c3aed"
></script>Platform-specific guides
Six step-by-step guides — pick yours.
Plain HTML
- 1.Open the .html file you want the widget on (or your shared layout / template).
- 2.Locate the closing </head> tag.
- 3.Paste the SUBLAKE snippet immediately above </head>.
- 4.Save and reload the page. The widget appears bottom-right.
Squarespace
- 1.Open your Squarespace dashboard.
- 2.Go to Settings → Advanced → Code Injection.
- 3.Paste the SUBLAKE snippet into the Header field.
- 4.Click Save. Allow up to a minute for Squarespace to publish.
Note: Squarespace Personal plans do not support Code Injection. You will need a Business or Commerce plan.
Shopify
- 1.In your Shopify admin, go to Online Store → Themes.
- 2.Click Actions → Edit code on your live theme.
- 3.Open theme.liquid in the Layout folder.
- 4.Paste the SUBLAKE snippet immediately before the closing </head> tag.
- 5.Click Save.
Wordpress
- 1.Install a header-script plugin (Insert Headers and Footers, or WPCode).
- 2.Go to Settings → Insert Headers and Footers.
- 3.Paste the SUBLAKE snippet into the Scripts in Header field.
- 4.Click Save.
Note: Working with Yoast or Elementor? The snippet goes in the global header — it does not need to be repeated per-page.
Webflow
- 1.In your Webflow project, go to Project Settings → Custom Code.
- 2.Paste the SUBLAKE snippet into the Head Code field.
- 3.Click Save Changes.
- 4.Publish your site. The widget appears within seconds.
Wix
- 1.In your Wix dashboard, go to Settings → Custom Code (under Advanced).
- 2.Click + Add Custom Code.
- 3.Paste the SUBLAKE snippet, set Place Code In to Head, Apply to All pages.
- 4.Click Apply.
Note: Wix Custom Code requires a paid plan (Combo or higher).
Customization
Most customization happens in the dashboard composer at /dashboard/integrations/webchat. A small set of behaviors can be overridden via data-* attributes on the script tag.
| Attribute | Values | Default |
|---|---|---|
| data-key | wc_pk_xxxxx (required) | — |
| data-color | Hex color (e.g. #7c3aed) | Composer setting |
| data-position | bottom-right · bottom-left · bottom-center | bottom-right |
| data-size | small · medium · large | medium |
| data-theme | light · dark · auto | auto |
| data-consent-required | true · false | false |
Per-template options (corner radius, animation, dark mode override, quick action buttons) live in the composer. Changes save in 800ms or sooner with Cmd-S, no redeploy needed.
Domain pinning
Domain pinning is how you tell SUBLAKE which domains your widget is allowed to load on. Any other domain — including localhost previews from other developers, or scrapers embedding your snippet — will silently fail to bootstrap.
- Open /dashboard/integrations/webchat → Domains panel.
- Add each production domain on its own line: example.com, app.example.com, blog.example.com.
- Wildcards are supported on subdomains: *.example.com.
- Add localhost:3000 only if you want the widget to work in local dev.
Multi-site? Pin every domain you want to allow. The widget bootstrapper checks the parent window origin against your pinned list before initializing.
GDPR consent
If your site serves EU visitors, you may need explicit consent before the widget identifies a visitor. Set data-consent-required="true" on the script tag — the widget then waits for an explicit grant before starting a session.
<script
async
src="https://cdn.sublake.com/webchat.js"
data-key="wc_pk_YOUR_KEY_HERE"
data-consent-required="true"
></script>When the visitor accepts your cookie/consent banner, call the grant API:
window.SublakeWebchat.grantConsent()
// Optional: identify a known visitor right after grant
window.SublakeWebchat.identify({
email: 'visitor@example.com',
name: 'Acme Corp visitor',
})Until grantConsent() is called, no visitor identifier is generated, no session is created, and no message is sent. The widget UI shows a passive launcher only.
Troubleshooting
Five common issues and their fixes.
Widget is not appearing on my site
Most common cause: Content Security Policy (CSP) blocks the script. Inspect your browser console — if you see a CSP violation, add cdn.sublake.com to your script-src directive. Second most common: the snippet is in <body> not <head>. Move it to <head> before the closing tag.
Widget appears but the styling is broken
Z-index conflict. The widget renders at z-index 2147483600 (the standard for embed widgets). If your site uses higher z-indexes for modals/overlays, lower them or set the widget data-z-index attribute. Also check for site-wide CSS that targets iframe — the widget runs in an iframe.
AI is not responding
Check three things: (1) kill switch in your dashboard at /dashboard/ai-team/receptionist?tab=brain — make sure it is off, (2) Forbidden Topics — if the visitor question matches a forbidden topic, the AI will not respond and will route to escalation, (3) AI Brain budget — if you have hit your daily AI cost cap, the AI silently downgrades to operator-handoff mode.
Widget not loading on mobile
The widget is mobile-responsive by default. If you are on iOS Safari and the widget is missing, check your iOS Safari content blocker — some block iframes from third-party CDNs. Add cdn.sublake.com to the allow list.
How do I temporarily turn off the widget on one page?
Append ?webchat=off to the URL or wrap the page in a layout that does not include the snippet. For permanent per-page control, use domain pinning (see the section below).
API reference
Once loaded, the widget exposes a small API on window.SublakeWebchat.
window.SublakeWebchat.open()Programmatically opens the chat panel. Use on a "Talk to us" button.
window.SublakeWebchat.close()Programmatically closes the chat panel.
window.SublakeWebchat.identify({ email, name, phone, metadata })Associates the current visitor with a known contact. Useful after sign-in. All fields optional except a callable shape.
window.SublakeWebchat.grantConsent()Required when data-consent-required=true. Authorizes session creation and identifier generation.
Privacy
What we store, what we do not, and how to delete it.
What we store
- · A visitor UUID generated client-side and stored in localStorage
- · Conversation messages (visitor + AI + operator)
- · ip_country (vague geolocation derived from request) — never the IP itself
- · Browser user-agent string
- · Anything you explicitly pass to identify()
What we do not store
- · Raw IP addresses
- · Cookies (the visitor UUID lives in localStorage, not in a cookie)
- · Tracking pixels or third-party trackers
- · Cross-site visitor activity
Right-to-forget
Operators can delete a visitor and all associated sessions / messages via the dashboard or the API: DELETE /api/v1/webchat/visitors/{id}. Cascade is enforced at the database level.
Configure your AI receptionist's brain
The webchat widget is a surface — the intelligence lives in the Receptionist Brain. Set tone, knowledge, instructions, confidence threshold, escalation triggers, and forbidden topics in your dashboard.
Open the Receptionist Brain·Back to Webchat overview