Connect & Deploy

Connect and Deploy Your Agent

Once your agent is trained, tested, and performing well in the Playground, it is time to deploy it to your users. Chatsby offers multiple deployment methods to fit different use cases, from a simple copy-paste widget to full API integration. This guide covers every deployment option, configuration attribute, and best practice for going live.

Visibility Settings

Before your agent can be accessed by anyone outside the Chatsby dashboard, you need to configure its visibility.

Public vs. Private

To change visibility:

1. Go to the Connect tab in your agent dashboard.
2. Toggle the Public switch to enable or disable public access.

Chat Widget (Recommended)

The chat widget is the most common deployment method. It adds a floating chat bubble to any webpage. When clicked, it opens a full chat interface where users can interact with your agent.

Basic Embed Code

Copy the following code and paste it before the closing </body> tag on any page where you want the widget to appear:

<script
  src="https://chatsby.co/widget.min.js"
  bot-id="YOUR_BOT_ID"
  async
  defer
></script>

Replace YOUR_BOT_ID with your agent's unique identifier, found on the Connect tab of your agent dashboard.

Full Embed Code with All Configurable Attributes

The widget supports a comprehensive set of attributes for customizing appearance and behavior without writing additional code:

<script
  src="https://chatsby.co/widget.min.js"
  bot-id="YOUR_BOT_ID"
  widget-position="bottom-right"
  widget-color="#4F46E5"
  widget-text-color="#FFFFFF"
  widget-title="Chat with us"
  widget-subtitle="We typically reply in under a minute"
  widget-welcome-message="Hi there! How can I help you today?"
  widget-placeholder="Type your message..."
  widget-avatar="https://yoursite.com/avatar.png"
  widget-bubble-icon="https://yoursite.com/chat-icon.svg"
  widget-auto-open="false"
  widget-auto-open-delay="5000"
  widget-mobile-fullscreen="true"
  widget-z-index="9999"
  widget-suggested-questions='["What are your pricing plans?","How do I get started?","Do you offer a free trial?"]'
  widget-lead-capture="true"
  widget-allowed-domains="yoursite.com,app.yoursite.com"
  async
  defer
></script>

Attribute Reference

Widget Behavior

Desktop: The widget appears as a floating bubble in the configured position. Clicking it opens a chat panel approximately 380px wide and 600px tall, anchored to the corner of the viewport.

Mobile: When widget-mobile-fullscreen is enabled (the default), the chat panel expands to fill the entire screen on devices narrower than 768px. This provides a native app-like experience for mobile users. The user can close the panel by tapping the close button or swiping down.

Z-index considerations: The widget uses a default z-index of 9999. If your site uses high z-index values for modals, sticky headers, or other overlays, you may need to increase the widget's z-index to ensure it appears on top. Test across all pages where the widget is deployed.

iFrame Embedding

Use an iFrame to embed the chat interface directly within your page layout, rather than as a floating overlay. This is ideal for dedicated support pages, help centers, or knowledge base portals where you want the chat to be a primary element on the page.

<iframe
  src="https://chatsby.co/iframe/YOUR_BOT_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
  style="border: 1px solid #e5e7eb; border-radius: 12px;"
></iframe>

When to Use iFrame vs. Widget

Responsive Sizing

For a responsive iFrame that adapts to its container, wrap it in a div and use CSS:

<div style="width: 100%; max-width: 800px; height: 70vh; margin: 0 auto;">
  <iframe
    src="https://chatsby.co/iframe/YOUR_BOT_ID"
    width="100%"
    height="100%"
    frameborder="0"
    allow="clipboard-write"
    style="border: 1px solid #e5e7eb; border-radius: 12px;"
  ></iframe>
</div>

Shareable Link

Every public agent gets a shareable link that opens a full-page chat interface hosted on Chatsby:

https://chatsby.co/embed/YOUR_BOT_ID

Use Cases for Shareable Links

• Email signatures -- Add a "Chat with our AI assistant" link at the bottom of team emails.
• QR codes -- Generate a QR code from the link for printed materials, business cards, or event booths.
• Social media -- Share the link in social media bios, posts, or ads.
• Internal distribution -- Send to team members for testing or internal use.
• Customer communications -- Include in onboarding emails, newsletters, or support responses.

The shareable link provides the full chat experience with no additional code or embedding required.

API Integration

For applications that need full programmatic control over conversations, use the Chatsby REST API. This is the right choice when you are building a custom chat UI, integrating with a mobile app, or connecting your agent to other systems like CRMs, helpdesks, or messaging platforms.

curl -X POST https://api.chatsby.co/v1/agents/YOUR_AGENT_ID/chat \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "message": "How do I reset my password?",
    "session_id": "user-abc-123"
  }'

For complete API documentation including streaming responses, conversation management, and webhook integration, see the Developer Documentation.

Platform-Specific Deployment

Chatsby integrates with popular website builders and platforms. Each guide provides step-by-step instructions specific to that platform's interface.

CORS and Domain Restrictions

For security, you can restrict which domains are allowed to load your widget. When widget-allowed-domains is configured, the widget will only function on the specified domains. Requests from other domains will be blocked.

If no domains are specified, the widget loads on any domain. For production deployments, it is recommended to restrict the widget to your known domains to prevent unauthorized use.

Domain restrictions apply to the chat widget and iFrame embed. They do not apply to the shareable link (which is hosted on chatsby.co) or API requests (which use API key authentication).

Testing Your Deployment

After deploying your agent, verify it works correctly.

Common Deployment Issues

Monitoring After Launch

Deploying your agent is not the end of the process -- it is the beginning. After launch:

1. Monitor analytics daily for the first week. Watch for unexpected question patterns, low satisfaction scores, or high escalation rates.
2. Review the first 20-30 real conversations. Read through actual user interactions to verify the agent performs as expected with real-world input, which often differs from your test scenarios.
3. Iterate based on data. Use the Analytics workflow to continuously improve your agent based on real usage data.

Automatic Updates

When you update your agent's sources, system prompt, instructions, or model settings, changes propagate automatically to all deployment channels. There is no need to re-deploy or update embed codes. The next conversation after a change will use the updated configuration.