Embedding Your Agent

Deploy your AI agent to websites, apps, and messaging platforms with multiple integration options

Embedding Your Agent#

Deploy your trained AI agent to your website, app, or messaging platforms. AlonChat provides multiple integration options to reach your customers wherever they are.

Embedding Options#

OptionDescriptionBest For
Website Chat WidgetFloating chat bubble on your websiteMost websites
Inline Frame (iframe)Embedded chat window within your page layoutSupport pages, dashboards
Facebook MessengerAuto-respond to Facebook page messages and commentsFacebook business pages
InstagramAuto-respond to Instagram DMs and commentsInstagram business accounts
WhatsAppAuto-respond to WhatsApp messagesWhatsApp Business users
TelegramAuto-respond in Telegram groupsTelegram communities
EmailDraft email replies for approvalEmail support
API IntegrationBuild custom integrations via REST APICustom apps and workflows

Website Chat Widget#

Overview#

The chat widget appears as a floating bubble in the bottom corner of your website. Clicking it opens a chat window where visitors can talk to your AI agent.

Features:

  • Customizable colors and branding
  • Mobile-responsive
  • Dark mode support
  • Conversation history
  • Lead capture form

Quick Embed#

Copy the exact embed snippet from Deploy > Chat Widget > Embed and paste it before the closing </body> tag on your website. The snippet is a self-contained script that loads the widget from your AlonChat origin using your agent ID — copy it from the dashboard rather than retyping it by hand.

html
<script>
  ;(function () {
    /* AlonChat embed snippet from Deploy > Chat Widget > Embed */
    const onLoad = function () {
      const script = document.createElement('script')
      script.src = 'https://alonchat.com/embed.min.js'
      script.id = 'YOUR_AGENT_ID'
      document.body.appendChild(script)
    }
    if (document.readyState === 'complete') {
      onLoad()
    } else {
      window.addEventListener('load', onLoad)
    }
  })()
</script>

The script reads the agent ID from its id attribute and loads the widget from embed.min.js on your AlonChat origin.

Customization#

Configure the widget from the dashboard at Deploy > Chat Widget — not from attributes on the snippet. There you can set the accent color, position, greeting text, auto-open, suggested messages, lead forms, allowed domains, and identity verification.

Full widget guide

Platform Guides#

WordPress#

  1. Go to Appearance > Theme Editor
  2. Select footer.php (or use a plugin like "Insert Headers and Footers")
  3. Paste the embed snippet before </body>
  4. Save changes

Shopify#

  1. Go to Online Store > Themes > Actions > Edit Code
  2. Open Layout > theme.liquid
  3. Paste the embed snippet before </body>
  4. Save

Wix#

  1. Go to Settings > Custom Code
  2. Click + Add Custom Code
  3. Paste the embed snippet
  4. Select "Body - end" placement and apply to all pages
  5. Publish site

Any HTML Website#

Paste the embed snippet from Deploy > Chat Widget > Embed just before the closing </body> tag:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Your Website</title>
  </head>
  <body>
    <!-- Your website content -->

    <!-- AlonChat Widget: paste your embed snippet here -->
  </body>
</html>

Inline Frame (iframe)#

Overview#

Embed the chat directly into your page layout instead of as a floating widget. This is useful for dedicated support pages, dashboard sidebars, or product Q&A sections.

Installation#

Choose the Iframe embed type in Deploy > Chat Widget > Embed and copy the generated code. The widget URL is /widget/chat/{agentId} on your AlonChat origin.

Add the iframe to your page:

html
<iframe
  src="https://alonchat.com/widget/chat/YOUR_AGENT_ID"
  width="100%"
  style="height: 100%; min-height: 700px"
  frameborder="0"
></iframe>

Responsive design:

html
<div style="position: relative; width: 100%; min-height: 700px;">
  <iframe
    src="https://alonchat.com/widget/chat/YOUR_AGENT_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allow="clipboard-write"
    title="AlonChat Support"
  >
  </iframe>
</div>

Branding, suggested messages, and lead forms are configured from Deploy > Chat Widget, not via URL parameters. Note that advanced features like identity verification are only available with the chat widget snippet, not the iframe.

API Integration#

Overview#

Build custom integrations using AlonChat's REST API at https://alonchat.com/api/v1/.

Use cases:

  • Custom chat UI in your app
  • Integrate with existing CRM
  • Build multi-channel support system
  • Create Slack/Discord bots

Quick Start#

Step 1: Get API key

  1. Go to Project Settings > API Keys
  2. Click Generate API Key
  3. Copy and store securely

Step 2: Send chat message

bash
curl -X POST https://alonchat.com/api/v1/chat/{agentId} \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "message": "How much does shipping cost?",
    "conversationId": "optional-conversation-id",
    "userId": "user-123"
  }'

Response:

json
{
  "response": "Shipping costs vary by location. Metro Manila delivery is free for orders over $50.",
  "conversationId": "conv-abc123",
  "sources": [
    {
      "title": "Shipping Policy",
      "content": "..."
    }
  ]
}

Full API documentation

Best Practices#

1. Placement#

Website widget:

  • Bottom-right is most familiar and has high visibility
  • Bottom-left is a good alternative if something else occupies the right corner
  • Avoid top corners -- visitors do not expect chat widgets there

iframe:

  • Give it enough height (around 700px) for usability
  • Use responsive wrapper for mobile
  • Works well on dedicated support or FAQ pages

2. Customization#

  • Match your brand colors in Deploy > Chat Widget
  • Write a welcome message that matches your tone of voice
  • Test on mobile devices (real devices, not just browser emulators)

3. User Experience#

  • Only auto-open on support pages, not the homepage
  • Provide suggested messages to help visitors start a conversation
  • Set up human handoff for questions the AI cannot answer

4. Performance#

  • The widget loads asynchronously and does not block page rendering
  • Place the embed snippet before </body>

5. Privacy#

  • Add to your privacy policy: "We use an AI chatbot to respond to inquiries"
  • Enable lead capture forms with clear data use explanations
  • Inform visitors they are chatting with an AI agent

Next Steps#