Live chat setup

Connect your Shopify storefront to the team inbox. Start on an unpublished theme, then test both sides of a conversation.

1. Check your Supabase connection

Supabase browser configuration is present. Check database access with your invited teammate account.

Supabase setup checklist

Apply this repository’s SQL migrations in order. Keep row-level security enabled.
Enable anonymous sign-ins in Supabase → Authentication → Sign In / Providers.
Include conversations and messages in the supabase_realtime publication.
Invite your teammates through Supabase Auth and provision active teammate membership. An Auth account alone does not grant inbox access.
Before public launch, implement CAPTCHA for anonymous sign-in and agree on anonymous-user retention. The current chat client does not collect CAPTCHA tokens.

Supabase anonymous sign-in guide

Working hours & away replies

Chat requires a name and email before the first message. It follows the same shared assignment rules, working hours, timezone, holiday overrides, and away reply as email. Configure these under Rules & hours in the live inbox. Changes in the demo workspace apply only to the demo.

After-hours chats are still accepted. When enabled, the away message appears at the start and is posted once on the first customer message. It does not claim the conversation or send an email.

2. Confirm your storefront domain

Storefront origin

This storefront origin is allowed to display the chat frame in this deployment.

Allow every domain you will test, including the exact myshopify.com preview domain and any www domain. The theme preview must be opened on the storefront itself.

CHAT_ALLOWED_ORIGINS=https://sxthelement.com https://www.sxthelement.com

3. Add chat to your Shopify theme

Public CRM origin

Use the deployed HTTPS address where this app runs. Localhost cannot serve your Shopify visitors.

Enter a public HTTPS origin without a path to generate the installation code.

In Shopify, open Online Store → Themes. Duplicate your theme to keep a backup.
On the unpublished copy, open the theme actions menu and choose Edit code.
Open layout/theme.liquid and paste the snippet once, immediately before </body>. Save.
Open the theme’s storefront preview in a new tab. Look for Chat with SXTH in the bottom-right corner.

This is a theme-code installation; it does not add a Shopify app embed. Checkout and customer account pages are outside this theme installation.

Shopify theme editing instructions

4. Test before publishing

Open the preview in a private browser window and send a message with a test name and email.
In the live inbox, find the new chat and send a reply. Confirm it arrives in the widget.
Add an internal note. Confirm it stays hidden from the visitor.
Reload the storefront and reopen chat. The same browser session should recover the conversation.
Repeat on a phone and in browsers that restrict cross-site storage. Publish the theme only after these checks succeed and public-launch abuse protection is ready.

Troubleshooting and removal

Launcher missing: confirm the script URL loads and the snippet is in the theme you are previewing.
Frame blocked: match the storefront’s exact HTTPS origin in CHAT_ALLOWED_ORIGINS, then rebuild the CRM deployment.
Sign-in fails: confirm anonymous Auth is enabled. If CAPTCHA is enabled, the client must first be extended to supply a CAPTCHA token.
Conversation disappears: cross-site storage may be restricted. Prefer a CRM subdomain on the same site as your storefront. Clearing storage or changing devices starts a new visitor session.
Replies delayed: verify Realtime publication and RLS. The client also refreshes on focus and every 15 seconds.
Remove chat: remove the script line from layout/theme.liquid and save. Conversation history remains in the inbox.

Messages are stored in Supabase. The entered email is unverified and does not unlock previous chats or orders. Follow-up by email is not yet implemented.