Website Integration

1. Deployment Methods

Chat.co provides three ways to deploy your chatbot. Choose based on your needs:

Finding Your Embed Code

1. Go to your chatbot's dashboard
2. Click Deployment in the sidebar
3. Choose your deployment method
4. Copy the code or link

2. Script Tag Embed

The script tag is the easiest way to add a chat widget to your website. It creates a floating bubble that expands into a full chat window when clicked.

Basic Installation

Add this code just before the closing </body> tag on any page:

<script
  defer
  src="https://chat.co/api/embed"
  data-bot-id="YOUR_BOT_ID"
></script>

Replace YOUR_BOT_ID with your actual chatbot ID (found on the Deployment page).

How It Works

• Floating bubble — A circular button appears in the corner of the page
• Hover preview — Shows "Ask AI" text when users hover
• Click to open — Expands into a full chat window
• Mobile responsive — Goes full-screen on mobile devices

Platform-Specific Instructions

// In your _app.tsx or layout component
import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://chat.co/api/embed"
        data-bot-id="YOUR_BOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

3. Iframe Embed

Use an iframe when you want to embed the chat directly into a page section rather than as a floating widget.

Basic Iframe Code

<iframe
  src="https://chat.co/embed/YOUR_BOT_ID"
  style="width: 400px; height: 600px; border: none;"
  title="Chat Assistant"
></iframe>

Responsive Iframe

Make the iframe adapt to its container:

<div style="width: 100%; max-width: 500px; height: 700px;">
  <iframe
    src="https://chat.co/embed/YOUR_BOT_ID"
    style="width: 100%; height: 100%; border: none; border-radius: 12px;"
    title="Chat Assistant"
  ></iframe>
</div>

When to Use Iframe

4. Direct Link & QR Code

Sometimes you don't need to embed anything—just share a link to your chatbot's standalone page.

Your Chatbot Link

Use Cases

QR Code Generation

Chat.co automatically generates a QR code for your chatbot link. Find it on the Deployment page and download it in SVG format for print-ready quality.

5. Customization Options

Make your chatbot match your brand with extensive appearance customization. All settings are configured in your chatbot's Appearance tab.

Color Customization

Widget Position

Choose where the chat bubble appears:

• Right (default) — Bottom-right corner
• Left — Bottom-left corner

Branding Options

Content Customization

• Chat Title — The name shown in the header
• Welcome Message — First message users see when opening the chat
• Placeholder Text — Text shown in the empty input field
• Suggested Questions — Quick-reply buttons for common questions

Advanced Features

6. Deployment Security

Protect your chatbot with security settings to control who can access it and from where.

Security Options

Enabling Security

1. Go to your chatbot's Deployment page
2. Toggle "Enable Deployment Security"
3. Configure your desired security options
4. Save changes

7. Troubleshooting

Common issues and how to fix them.

Next Steps