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
EmailAuto-respond to emailsEmail 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#

Add this code before the closing </body> tag on your website:

html
<script src="https://cdn.alonchat.com/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  data-color="#006ED9">
</script>

Replace YOUR_AGENT_ID with your agent ID from the Settings page.

Customization#

Configure the widget using data attributes on the script tag:

AttributeDescriptionDefault
data-agent-idYour agent ID (required)--
data-colorWidget accent color (hex)#006ED9
data-positionbottom-right or bottom-leftbottom-right

For more options (greeting text, auto-open, suggested messages, lead forms, domain restrictions), use the dashboard at Settings > Widget.

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 script tag before </body>
  4. Save changes

Shopify#

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

Wix#

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

Any HTML Website#

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

  <!-- AlonChat Widget -->
  <script src="https://cdn.alonchat.com/widget.js"
    data-agent-id="YOUR_AGENT_ID"
    data-color="#006ED9">
  </script>
</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#

Step 1: Get iframe URL

Code
https://alonchat.com/embed/YOUR-AGENT-ID

Step 2: Add iframe to your page

html
<iframe
  src="https://alonchat.com/embed/YOUR-AGENT-ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
  title="AlonChat Support">
</iframe>

Responsive design:

html
<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0;">
  <iframe
    src="https://alonchat.com/embed/YOUR-AGENT-ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allow="clipboard-write"
    title="AlonChat Support">
  </iframe>
</div>

Customization via URL parameters:

Code
https://alonchat.com/embed/YOUR-AGENT-ID?
  primaryColor=006ED9&
  hideHeader=true&
  autoFocus=true

API Integration#

Overview#

Build custom integrations using AlonChat's REST API at https://api.alonchat.com/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 Settings > API
  2. Click Generate API Key
  3. Copy and store securely

Step 2: Send chat message

bash
curl -X POST https://api.alonchat.com/v1/agents/{agentId}/chat \
  -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:

  • Minimum height of 500px for usability
  • Use responsive wrapper for mobile
  • Works well on dedicated support or FAQ pages

2. Customization#

  • Match your brand colors using data-color
  • 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 script is loaded from a CDN and is optimized for fast loading
  • Place the script tag before </body> so it does not block page rendering

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#

Embedding Your Agent | AlonChat Docs