Tutorial · 15 min read

Getting started with Embedded Chat — full tutorial.

Sign up → install → theme → moderate → automate. The complete walkthrough from zero to a live community chat on your site.

This is the long-form version of "how do I get this thing running". If you prefer a 30-second install tour for Shopify specifically, jump to that guide. Otherwise, follow along — by the end you'll have a live, themed, moderated, auto-welcoming chat running on your website.

Total time: ~15 minutes including reading. Most of it is configuration choices, not waiting.

Step 1 · Sign up (1 minute)

Go to /user/signup/. Email + password, or one-click Google sign-in. You're on the 15-day Pro trial — no credit card requested, full feature access.

The first thing you'll see post-signup is the admin panel dashboard. You'll have a default "project" already created. Think of a project as one chat instance with its own rooms, theme, and settings. Most customers run one project. Larger orgs (radio station + podcast + paid community) might run two or three.

Step 2 · Grab your project token (30 seconds)

In the admin panel, find your project ID near the top of the dashboard. It looks like a number — e.g. 15267. This is the only thing your website needs to load the chat.

Also note: the "restricted domain" field. Set this to the domain your chat will live on (yoursite.com,www.yoursite.com). It's the chat's defense against someone else embedding your project token on their site. Optional but recommended.

Step 3 · Install the chat (1–5 minutes, depending on platform)

Shopify

Install our app from the Shopify App Store. Open the theme editor → App Embeds → enable Embedded Chat → Save. Done. Full Shopify walkthrough.

Wix

Add an HTML widget to your Wix page. Paste this snippet (with your token):

<script>
(function() {
  var s = document.createElement('script'); s.async = true;
  s.src = '//d2yy16lkdmfg04.cloudfront.net/resource/chat.js';
  var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
window.embeddedChatAsyncInit = function() { embeddedChat.init("YOUR_PROJECT_TOKEN"); };
</script>
<div class="embedded-chat" style="height: 600px; width: 100%;"></div>

Replace YOUR_PROJECT_TOKEN. Save the Wix page, publish. Wix-specific notes.

WordPress

Paste the same snippet into your theme's footer (Appearance → Theme File Editor → footer.php) or use a header/footer-script plugin like WPCode. WordPress walkthrough.

Anything else (custom site, Webflow, Squarespace, static HTML…)

Drop the snippet anywhere in your page's HTML — typically just before </body>. The chat is rendered into the <div class="embedded-chat"> wherever you put it.

Step 4 · Refresh your site (10 seconds)

Hard-refresh (Ctrl/Cmd + Shift + R) the page where you installed the snippet. You should see the chat widget render. Click into it; sign in as yourself; post a test message.

If you see "This project is disabled" or the chat doesn't appear, double-check the project token and the restricted_domain setting. Skip restricted_domain entirely during testing, then add it after you confirm everything else works.

Step 5 · Theme it (2 minutes)

In the panel → Theme. Pick one of eight presets — Ocean, Forest, Rose, Sunset, Sand, Charcoal, Mint, Default. The preview updates live as you click. Save when you're happy.

On Pro, you also get a custom CSS slot. Common tweaks:

/* Hide avatars for compact mode */
#chat-container .chat-img { display: none; }

/* Tighten bubble padding */
#chat-container .chat-body-wrap { padding: 6px 12px; }

/* Match your brand pink */
#chat-container .self .chat-body-wrap {
  background: #d946ef;
}

Step 6 · Configure moderation (2 minutes)

In the panel → Moderation:

  1. Slow mode: 15 seconds is a sensible default. Crushes accidental spam without affecting normal posters.
  2. Banned words: start with 5–10 obvious entries. The live tester previews exactly what visitors will see after redaction.
  3. Members-only mode: leave this OFF unless you have a reason. It cuts first-time-poster rate ~70%.
  4. AI moderation (Pro): enable if you expect 50+ active visitors at peak. Threshold 0.85 is a good starting point.

The full moderation philosophy: moderation playbook.

Step 7 · Set up the welcome flow (3 minutes)

In the panel → Behavior → Welcome Bot. Enable it, set the delay (8–15 seconds is the sweet spot), and write your greeting + follow-up. Real examples here.

If you're on Pro, also consider enabling the AI chat assistant for cold-start coverage when your regulars aren't around yet:

  1. Pick a persona: Community manager, E-commerce, Topic expert, DJ banter, or Custom prompt.
  2. Give it a name and avatar (these show up next to its messages, so it doesn't look like an admin posting).
  3. Set the daily token cap — start at 5,000 tokens/day (~$0.30/day with gpt-4o-mini). Adjust up if the cap fires before peak time.

Step 8 · Test the full flow (2 minutes)

  1. Open your site in an incognito window (you're an anonymous visitor now).
  2. Wait the welcome-bot delay. The greeting should appear.
  3. Type a message — should land in the chat.
  4. Type a banned word from your list — should be redacted.
  5. Post a message, wait less than your slow-mode interval, try to post again — should be rate-limited.
  6. (Pro) @-mention the AI bot's name — it should reply within a few seconds.

Step 9 · Invite your regulars (variable)

Your chat is live. Tell your audience it exists. The patterns that work:

  • Pin a welcome message at the top of the room: "first-time here? introduce yourself 👋"
  • Mention the chat in your email list / show notes / podcast outro / social posts.
  • Don't try to seed conversation yourself. Let it grow organically; 1-3 regulars showing up consistently is more valuable than a single launch-day surge.

Step 10 · Watch what they do (ongoing)

In the panel → Analytics, you'll see:

  • Daily messages chart
  • Hour-of-day heatmap (when your audience is most active)
  • Top rooms (if you have multiple)
  • Top reactions used (tells you which emojis your audience wants)

Check it weekly for the first month. Adjust slow mode, banned-words, and welcome-bot timing based on what you see.

You're done

That's the full setup. The chat is now live on your site with theme, moderation, and an auto-welcome flow. From here, the useful follow-up reads are:

Start your free trial
15 days. No credit card. Cancel anytime.
Try the chat — it's right here 👇