Setting Up Live Chat

Overview#

The Klyra chat widget is a lightweight, isolated component that embeds on any website. It supports real-time messaging, file attachments, knowledge base search, and AI-powered auto-responses — all in a clean, customizable interface.

Step 1: Create a live chat inbox#

1. Go to Settings > Inboxes
2. Click Create Inbox
3. Select Live Chat as the channel type
4. Give it a name (e.g., "Website Chat")
5. Click Create

Step 2: Copy the embed snippet#

After creating the inbox, you'll see an embed snippet like this:

<script
  src="https://your-domain.com/widget.js"
  data-token="your-inbox-token"
  async
></script>

Copy this snippet and paste it into your website's HTML, just before the closing </body> tag. It works with any website — static HTML, React, Next.js, WordPress, Webflow, etc.

Framework-specific instructions#

Next.js / React:

Add the script to your root layout or a client component:

import Script from "next/script";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://your-domain.com/widget.js"
        data-token="your-inbox-token"
        strategy="lazyOnload"
      />
    </>
  );
}

WordPress:

Go to Appearance > Theme Editor > footer.php and paste the snippet before </body>. Or use a plugin like "Insert Headers and Footers."

Step 3: Customize the widget#

Go to Settings > Widget to customize:

• Colors — match your brand's primary color
• Position — bottom-right (default) or bottom-left
• Greeting message — the welcome text visitors see when opening the widget
• Pre-chat form — optionally collect name and email before the conversation starts
• Business hours — show an "away" message outside working hours
• Knowledge base search — let visitors search your help articles directly in the widget

Step 4: Test it#

1. Open your website in a new browser tab
2. You should see the chat launcher icon in the corner
3. Click it and send a test message
4. Check your Klyra inbox — the conversation should appear in real time

Troubleshooting#

Widget doesn't appear:

• Make sure the data-token matches your inbox token in Settings > Inboxes
• Check your browser console for errors
• Ensure the script URL is correct and accessible

Messages not showing in inbox:

• Verify the inbox is active (not paused) in Settings > Inboxes
• Check that no ad-blocker is blocking the widget script

Widget looks wrong on my site:

• The widget uses Shadow DOM isolation — your site's CSS won't affect it
• If the launcher overlaps with other elements, adjust the position in widget settings

What about mobile?#

The widget is fully responsive. On mobile devices, it opens as a full-screen panel for a native-feeling experience. No extra configuration needed.

Next steps#

• Configure the AI agent to auto-respond to widget conversations
• Set up email as a fallback channel
• Create knowledge base articles for the widget's search feature