Widget Integration
The Accelerat widget is a powerful communication component that can be embedded into any website or web application. It provides advanced voice capabilities and SIP (Session Initiation Protocol) integration for real-time communication, allowing users to interact with AI agents through both text and voice.
Overview
The widget serves as a bridge between your website visitors and your AI agents, offering:
- Voice Communication: Real-time voice interaction with AI agents
- SIP Integration: Professional telephony features for business communications
- Customizable UI: Flexible theming and branding options
- Easy Integration: Simple HTML embedding with configurable properties
Getting Started
To integrate the widget into your website, simply add the widget code to your HTML and configure it using the properties described below.
Configuration Properties
Configure the widget's appearance and behavior using these HTML attributes:
| Property | Description | Example Value | Required |
|---|---|---|---|
mode |
Theme setting for the widget UI. Choose between "light" and "dark" modes | "dark" |
No |
initial-message |
Welcome message displayed when the widget first loads. This sets the tone for user interaction | "Hello! How can I help you today?" |
No |
widget-title |
Display name for the AI agent. This appears in the widget header | "Customer Support Agent" |
No |
logo-url |
URL pointing to your brand logo image. Supports common formats (PNG, SVG, JPG) | "https://www.yoursite.com/logo.svg" |
No |
voice |
Enables voice communication features. Include this attribute to activate voice capabilities | No value needed | No |
main-color |
Primary background color for the widget in light mode. Use hex color codes | "#ffffff" |
No |
dark-main-color |
Primary background color for the widget in dark mode. Use hex color codes | "#121212" |
No |
contrast-color |
Text color that provides good contrast against main colors. Ensures readability | "#000000" |
No |
SIP Configuration Properties
Found on your deployment information
| Property | Description | Example Value |
|---|---|---|
sip-server |
SIP server hostname | "your.sip.pt" |
sip-websocket-port |
Port for SIP WebSocket connection | "8089" |
sip-user |
Username for SIP authentication | "User1" |
sip-password |
Password for SIP authentication | "1234" |
sip-ext |
SIP extension number | "7" |
sip-domain |
SIP domain name | "your.sip.pt" |
Example Widget Implementation
<accelerat-widget
mode="dark"
initial-message="Welcome! I'm here to help you."
widget-title="Support Assistant"
logo-url="https://yoursite.com/logo.svg"
main-color="#ffffff"
dark-main-color="#1a1a1a"
contrast-color="#333333"
voice
>
</accelerat-widget>
Troubleshooting
Performance Tips
- Optimize logo images: Use SVG format when possible for crisp display at any size
- Choose appropriate colors: Ensure sufficient contrast ratios for accessibility
- Test voice features: Always verify microphone permissions work in your target browsers
Common Issues and Solutions
Voice Features Not Working
- Check browser permissions: Ensure microphone access is granted
- Verify SIP configuration: Double-check all SIP parameters are correct
- Test network connectivity: Confirm WebSocket connections can reach the SIP server
- Browser compatibility: Voice features require modern browsers with WebRTC support
Visual Customization Issues
- CSS specificity conflicts: Your site's CSS might override widget styles
- Color not applying: Verify hex color codes are properly formatted (include #)
- Logo not displaying: Check image URL accessibility and format compatibility
Connection Problems
- SIP server unreachable: Verify server hostname and port configuration
- Authentication failures: Confirm username and password are correct
- WebSocket errors: Check if firewall allows connections on the specified port