Login Get started free
Product Solutions Knowledge Pricing Blog Docs
Back to blog

How to Add Live Chat to Your Website (Step-by-Step Guide)

Paulo Steinberg ·
live chat tutorial getting started

I used to lose customers because I wasn’t at my desk.

I ran Gleap, then Chatwoot — both fine tools — but here’s what kept happening: someone would land on my site, send a message, and by the time I checked (I was sleeping, exercising, in the shower, whatever) they were gone. A chat widget doesn’t help if nobody’s there to answer it.

That frustration is why I built Receiveo. The idea was simple: AI answers when I can’t, and hands off to me when it needs to. But regardless of which tool you pick, adding live chat to your site is one of the highest-impact things you can do — and it takes about 5 minutes.

Why bother

I’m not going to cite a study. I’ll tell you what happened to me: the moment I had a chat widget on my site, I started having real conversations with people who would’ve otherwise bounced silently. Some converted, some didn’t, but I went from guessing what visitors wanted to actually knowing.

Visitors who can ask a quick question (“does this work with Shopify?” or “what’s on the free plan?”) stick around longer. Visitors who can’t find an answer leave. It’s that simple.

The setup

I’ll use Receiveo for this tutorial because I built it and know it inside out. But the pattern — sign up, customize, paste a snippet — works for any live chat tool. The steps are nearly identical.

Step 1: Sign up

Head to receiveo.com and create a free account. No credit card, no trial countdown. You’ll land in the dashboard where you can set your workspace name and invite teammates.

Step 2: Customize the widget

Before adding the widget to your site, spend a minute configuring it. In the dashboard, click Widget in the sidebar to adjust:

  • Colors — match the accent color to your brand. The widget adapts to light and dark themes automatically.
  • Greeting message — something like “Hey! Have a question? We usually reply within a few minutes.” Keep it human. Nobody wants to be greeted by a robot disclaimer.
  • Position — bottom-right or bottom-left.
  • Behavior — auto-open after a delay, or wait for the visitor to click. I’d test both — auto-open boosts engagement on some sites and feels intrusive on others.

For all the customization options, check the chat widget page.

Step 3: Grab the snippet

In the widget settings, you’ll find your embed code:

<script>
  window.receiveo = { publicKey: 'your-workspace-key' }
</script>
<script async src="https://widget.receiveo.com/loader.js"></script>

Replace your-workspace-key with the actual key from your dashboard. The script loads asynchronously — it won’t slow down your page.

Step 4: Add it to your site

Where you paste the snippet depends on your platform.

Plain HTML

Paste it before the closing </body> tag. If you have a shared layout file, add it there so it loads on every page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Website</title>
</head>
<body>
  <!-- Your page content -->

  <script>
    window.receiveo = { publicKey: 'your-workspace-key' }
  </script>
  <script async src="https://widget.receiveo.com/loader.js"></script>
</body>
</html>

WordPress

Two options:

Option A: Header/footer plugin (recommended). Install a plugin like WPCode or Insert Headers and Footers. Paste the snippet in the “Footer” section and save. This survives theme updates.

Option B: Theme editor. Go to Appearance → Theme File Editor, open footer.php, and paste the snippet before </body>. Works, but you’ll lose it if you switch themes.

<!-- Paste in the footer section of your plugin or footer.php -->
<script>
  window.receiveo = { publicKey: 'your-workspace-key' }
</script>
<script async src="https://widget.receiveo.com/loader.js"></script>

Next.js

Use the next/script component in your root layout:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script
          id="receiveo-config"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `window.receiveo = { publicKey: 'your-workspace-key' }`,
          }}
        />
        <Script
          id="receiveo-loader"
          src="https://widget.receiveo.com/loader.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

afterInteractive means the widget loads after the page is interactive — no impact on your initial render.

Shopify

In your Shopify admin, go to Online Store → Themes → Edit code. Open theme.liquid and paste the snippet before </body>.

  <!-- Receiveo live chat -->
  <script>
    window.receiveo = { publicKey: 'your-workspace-key' }
  </script>
  <script async src="https://widget.receiveo.com/loader.js"></script>
</body>

Save, and the widget appears across your entire store.

Google Tag Manager

If you use GTM and don’t want to touch code, this is the easiest option. Create a new Custom HTML tag, paste the snippet, and set the trigger to All Pages.

  1. In GTM, go to Tags → New → Custom HTML
  2. Paste:
<script>
  window.receiveo = { publicKey: 'your-workspace-key' }
</script>
<script async src="https://widget.receiveo.com/loader.js"></script>
  1. Set trigger to All Pages
  2. Save and publish the container

No theme files to edit, no plugins to install. If you’re already using GTM for analytics, this takes 30 seconds.

Step 5: Test it

Open your site in an incognito window (so you see what visitors see). You should see the widget in the corner. Click it, send a test message, and confirm it arrives in your Receiveo dashboard.

Check:

  • Widget loads without console errors
  • Messages arrive in the inbox in real time
  • Colors match your brand and nothing overlaps with important page elements
  • Mobile works — pull up your site on a phone or use responsive mode in dev tools

If something looks off, adjust in the widget settings. Changes apply immediately — no code updates needed.

After you’re live

Getting the widget on your site is the starting point. Here’s what to set up next.

Invite your team

The free plan includes 10 seats. Bring your team into the shared inbox so conversations get routed to the right person. Assign conversations, tag them by topic (billing, technical, sales), and make sure nothing slips through.

Write knowledge base articles

The questions you’ll get most are predictable — pricing, setup, compatibility, return policies. Write up the answers in your knowledge base and Receiveo’s AI can suggest them to visitors automatically. Less repetitive work for you, faster answers for them.

Fix your notifications

This is the one I wish I’d done sooner. On Chatwoot, I kept missing messages because the mobile notifications were unreliable. On Receiveo, configure browser notifications and email alerts in your notification preferences. Set them up before you need them — you don’t want to discover they’re off after you’ve already missed a conversation.

Set business hours

If you’re not available 24/7 (and if you’re a small team, you’re not), configure business hours. The widget shows an offline message outside those hours and collects the visitor’s email so you can follow up. This sets expectations and avoids the frustration of an unanswered chat sitting there for hours.

That’s it

Five minutes to set up, zero dollars to start. Whether you’re running a SaaS product, an e-commerce store, or a portfolio site, a chat widget gives your visitors a direct line to you.

And if you’re worried about being the one who has to sit in front of a computer all day answering messages — that’s exactly the problem I built Receiveo to solve. The AI handles the common questions while you’re away, and you step in for the ones that need a human.