Chat Widget Setup
Install and configure the Raya chat widget on your website so she can greet visitors and resolve questions instantly.
What Is the Chat Widget?
The chat widget is a lightweight snippet you embed on your website. Once live, Raya appears as a chat bubble in the corner of every page. Visitors click to ask questions and Raya responds in real time, drawing from your knowledge base and escalation rules. She handles conversations across 50+ languages, 24/7, with no queue times.
Setup Steps
Follow these five steps to get Raya live on your website. The entire process takes under 5 minutes.
- 1
Create or select a Support employee
Go to the Dashboard and create a new Support employee (Raya), or select an existing one. This employee is the AI teammate that will power the widget.
- 2
Open Chat/Widget settings
Navigate to the employee's channel settings and select the Chat/Widget tab. This is where you control appearance, behavior, and allowed domains.
- 3
Configure brand, behavior, and domains
Set your brand colors, greeting text, welcome message, widget position, and the domains where the widget is allowed to appear. See the configuration table below for all available settings.
- 4
Copy the embed snippet
Click "Copy Code" to get the JavaScript embed snippet. This is a single script tag you paste into your website.
- 5
Paste before closing body tag
Paste the snippet just before the closing </body> tag in your website's HTML. Raya goes live immediately. No page reload required for returning visitors.
Widget Configuration
Every aspect of the chat widget is customizable. Use the table below to configure Raya's appearance and behavior.
| Setting | Description | Options / Default |
|---|---|---|
| Widget Type | Visual style of the widget button | Floating bubble (default), Embedded bar |
| Theme | Light or dark mode for the chat window | Light (default), Dark |
| Primary Color | Main brand color for the widget header and buttons | Any hex value (default: #2563eb) |
| Secondary Color | Accent color for highlights and hover states | Any hex value (default: #60a5fa) |
| Position | Screen corner where the widget appears | Bottom-right (default), Bottom-left |
| Size | Dimensions of the chat window when open | Small, Medium (default), Large |
| Greeting Text | Short text shown on the bubble before the visitor clicks | Custom string (e.g., "Need help?") |
| Welcome Message | First message Raya sends when the chat opens | Custom string (e.g., "Hi! I'm Raya. How can I help you today?") |
| Button Text | Label on the chat input submit button | Custom string (default: "Send") |
| Header Title | Name displayed at the top of the chat window | Custom string (default: "Raya") |
| Header Subtitle | Secondary text under the header title | Custom string (e.g., "Usually replies instantly") |
| Allowed Domains | Domains where the widget is permitted to load | Comma-separated list (e.g., "example.com, app.example.com") |
| Auto Popup | Automatically open the chat after a delay | On/Off, delay in seconds (default: Off) |
| Show/Hide Rules | Conditionally display the widget based on URL path or visitor properties | URL path patterns, visitor segment filters |
| Business Hours | Define when the widget shows "online" vs "offline" | Time ranges per day, timezone |
| Offline Message | Message displayed when outside business hours | Custom string (Raya still responds, but sets expectations) |
Widget Limitations
The chat widget requires HTTPS. It will not load on pages served over plain HTTP. Some browser ad-blockers and privacy extensions may block the widget script. If visitors report that the widget is missing, ask them to allowlist your domain in their ad-blocker settings.
Frequently Asked Questions
Can I use the chat widget on multiple websites?▾
How many credits does each chat response cost?▾
Does the widget slow down my website?▾
Related Articles
Still need help?
Contact our team