Web Widget

Embed a chat widget on your website

Web Widget#

Add an AI-powered chat widget to any website with a simple code snippet.

Quick Start#

Add this code to your website:

<script>
  window.ALONCHAT_AGENT_ID = 'your-agent-id';
</script>
<script src="https://alonchat.com/widget.js"></script>

Replace your-agent-id with your actual agent ID (found in Settings).

Widget Options#

Configure the widget with additional options:

<script>
  window.ALONCHAT_CONFIG = {
    agentId: 'your-agent-id',
    
    // Appearance
    primaryColor: '#2563eb',
    position: 'bottom-right',
    
    // Text
    greeting: 'Hi! How can I help you today?',
    placeholder: 'Type your message...',
    
    // Behavior
    autoOpen: false,
    showBranding: true
  };
</script>
<script src="https://alonchat.com/widget.js"></script>

Configuration Options#

Appearance#

Text#

Behavior#

Customizing Appearance#

Via Dashboard#

1. Go to Settings → Widget
2. Customize colors, text, and position
3. Preview changes
4. Save

Via CSS#

Add custom CSS to your page:

/* Custom widget button color */
.alonchat-widget-button {
  background-color: #your-color !important;
}

/* Custom chat window size */
.alonchat-widget-window {
  width: 400px !important;
  height: 600px !important;
}

Lead Capture#

Collect visitor information before chat:

1. Go to Settings → Lead Form
2. Configure required fields:
   • Name
   • Email
   • Phone
   • Custom fields
3. Form shows before first message

Initial Messages#

Set suggested messages for users:

1. Go to Settings → Widget → Suggested Messages
2. Add up to 4 quick reply buttons
3. Users can click to send instantly

Domain Restrictions#

Restrict widget to specific domains:

1. Go to Settings → Widget → Allowed Domains
2. Add domains (e.g., yoursite.com)
3. Widget only works on listed domains

Testing#

Before going live:

1. Install on a test page
2. Verify widget loads
3. Test conversations
4. Check mobile responsiveness
5. Verify lead form works

Troubleshooting#

Widget not loading:

• Check if script is added correctly
• Verify agent ID is correct
• Check browser console for errors

Widget not responding:

• Verify agent is trained
• Check if agent has credits
• Test in playground first