Web Widget

Install and configure the AlonChat chat widget on your website

Web Widget#

Use the Web Widget to add a floating AlonChat chat bubble to your website. Setup, styling, embed code, and domain restrictions are all managed from Deploy > Chat widget.

Quick Start#

  1. Go to your agent dashboard.
  2. Click Deploy.
  3. Open Chat widget.
  4. Open the Embed tab.
  5. Copy the widget code shown in the dashboard.
  6. Paste it before the closing </body> tag on your website.

The embed tab shows the exact code for your agent. It follows this pattern:

html
<script>
(function(){
  const onLoad = function () {
    const script = document.createElement("script");
    script.src = "https://alonchat.com/embed.min.js";
    script.id = "YOUR_AGENT_ID";
    script.domain = "alonchat.com";
    document.body.appendChild(script);
  };

  if (document.readyState === "complete") {
    onLoad();
  } else {
    window.addEventListener("load", onLoad);
  }
})();
</script>

The widget loads automatically and appears as a floating chat bubble on your site.

Chat Widget Tabs#

Inside Deploy > Chat widget, you will see four tabs:

TabWhat you configure
ContentGreeting, display name, suggested messages, placeholder text, and lead capture
StyleColors, theme, bubble position, profile image, and chat icon
AIWidget-specific AI instructions and response behavior
EmbedWidget code, iframe code, allowed domains, and identity verification

Dashboard Customization#

Customize the widget from Deploy > Chat widget:

  1. Open the Content tab for greeting text, placeholder text, suggested messages, and lead capture.
  2. Open the Style tab for colors, theme, and bubble alignment.
  3. Open the AI tab for channel-specific instructions.
  4. Open the Embed tab for widget code, iframe code, domain restrictions, and identity verification.

Appearance#

  • Primary color -- Brand color for the widget
  • Position -- Bottom-right or bottom-left
  • Theme -- Appearance options configured from the Style tab

Text#

  • Greeting -- Initial greeting message
  • Placeholder -- Input field placeholder text
  • Title -- Widget header title (defaults to agent name)
  • Subtitle -- Widget header subtitle

Behavior#

  • Auto-show initial message -- Show the first message automatically after a delay
  • File uploads -- Let visitors upload files when enabled
  • Emoji picker -- Show or hide the emoji picker

Suggested Messages#

  • Add quick-reply buttons visitors can tap when the widget opens
  • Use them to guide first questions and common actions

Lead Capture#

Collect visitor information before or during chat:

  1. Go to Deploy > Chat widget.
  2. Open the Content tab.
  3. Use the Lead capture card to turn lead capture on or open its settings.
  4. Configure the fields and choose when the form should appear.

Full lead capture guide

Domain Restrictions#

Restrict the widget to only work on specific domains:

  1. Go to Deploy > Chat widget > Embed.
  2. Turn on Allowed domains.
  3. Add each domain you want to allow, such as yoursite.com or shop.yoursite.com.
  4. Copy the embed code after your domain list is set.

If no domains are configured, the widget can be embedded on any website where the code is added.

Platform-Specific Installation#

WordPress#

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

Shopify#

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

Wix#

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

Any HTML Website#

Paste the widget code before the closing </body> tag:

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

  <!-- AlonChat Widget -->
  <script>
    /* Paste the widget code from Deploy > Chat widget > Embed here */
  </script>
</body>
</html>

Testing#

Before going live:

  1. Install the widget code on a test page.
  2. Verify the chat bubble appears in the correct corner.
  3. Click the bubble to open the widget.
  4. Send a test message and verify the agent responds.
  5. Test on a mobile device.
  6. Verify the lead form works if enabled.
  7. Check that conversations appear in your AlonChat dashboard.

Troubleshooting#

Widget Not Loading#

  • Check the embed code -- Make sure you pasted the exact code from Deploy > Chat widget > Embed
  • Check browser console -- Open developer tools (F12) and look for errors in the Console tab
  • Allowed domains -- If you configured allowed domains, make sure the current domain is listed
  • Ad blockers -- Some ad blockers may block third-party scripts

Widget Not Responding#

  • Agent is trained -- Ensure your agent has been trained with knowledge base content
  • Agent has credits -- Check your credit balance in Billing
  • Test in Playground -- Test the same question in the Playground first to rule out widget-specific issues

Wrong Colors or Styling#

  • Cache -- Clear your browser cache or try in an incognito window
  • Check the Style tab -- Confirm your saved values in Deploy > Chat widget > Style

Mobile Issues#

  • Test on real devices -- Browser emulators do not always match real behavior
  • Widget overlap -- If the widget overlaps with other elements, change the bubble position in the Style tab

Best Practices#

  1. Match the widget to your brand colors.
  2. Write a clear greeting message.
  3. Add suggested messages for common first questions.
  4. Configure allowed domains before sharing the code.
  5. Test on desktop and mobile before going live.

Next Steps#