Quick start

Get the ZebChat chat bubble on your website in about five minutes: create an account, add your website and paste one line of HTML.

1. Create your account#

Sign up for ZebChat with your name, email, a password and the name of your company. This creates your organization with you as its owner. We send you an email to verify your address.

The agent app runs in the browser, and on Android and iOS. Everything below works the same in each.

2. Add your website#

1. Open Websites and choose Add website.
2. Enter a name (only your team sees it) and your domain, for example example.com. You can paste a full URL: ZebChat keeps only the host name.
3. Optionally pick a default team: new chats from this website then go only to that team’s members.

The widget loads on your domain and all of its subdomains. To use it on other hosts, add them under Allowed domains in the website’s Settings tab. localhost and IP addresses are allowed for testing. See domain rules.

3. Paste the install code#

Open the website’s Install tab and copy the install code. It looks like this, with your own site key instead of SITE_KEY:

<script src="https://cdn.zebchat.com/widget/v1/widget.js" data-site="SITE_KEY" async></script>

Paste it just before the closing </body> tag on every page where the chat should appear, usually in your site’s shared template or footer. The script is loaded async, so it never blocks your page, and the loader is under 5 KB.

Single-page apps#

In React, Vue, Angular or Next.js apps, load the script once in your root layout. The widget notices route changes by itself (including history.pushState navigation), so each page shows up in the visitor’s journey without extra code.

// app/layout.tsx (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.zebchat.com/widget/v1/widget.js"
          data-site="SITE_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

4. Say hello#

1. Open your website. The chat bubble appears in the bottom-right corner.
2. Send a message as a visitor.
3. In the agent app, the conversation appears in the Inbox straight away. Reply, and the visitor sees your answer, your typing indicator and read receipts in real time.

If the bubble doesn’t appear, check the browser console for a [ZebChat] warning, and make sure the page’s host name is the website’s domain, one of its subdomains or an allowed domain.

Next steps#

• Match your brand and set up forms and business hours: widget settings.
• Open the chat from your own buttons and identify logged-in customers: JavaScript API.
• Invite your team from Settings → Members and organize them into teams.