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.
Unlike basic live chat tools, Raya does not just answer questions — she takes actions. She can process refunds, look up order statuses, create support tickets, and escalate to your human team when needed. All of this happens 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.
Pro Tip
Using a CMS like WordPress, Shopify, or Webflow? You do not need to edit HTML directly. Most CMS platforms have a "Custom Scripts" or "Code Injection" section in settings where you paste the snippet once. It automatically appears on every page.
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 |
|---|---|---|
| Theme | Light or dark mode for the chat window | Light (default), Dark |
| Brand Color | Main brand color for the widget header and buttons | Any hex value (default: #0047AF) |
| System Heading | Title displayed at the top of the chat window | Custom string (default: "Hi there Raya is ready to help ✨") |
| System Paragraph | Subtitle text below the system heading | Custom string (default: "Ask any question — Raya is fast and friendly.") |
| Welcome Message | First message Raya sends when the chat opens | Custom string (default: "Hi there 👋 How can I help?") |
| Input Placeholder | Placeholder text in the message input field | Custom string (default: "Type your message...") |
| Pre-Set Quick Replies | Suggested prompts shown to visitors as clickable buttons | List of strings (e.g., "Pricing", "Book a demo") |
| Voice Notes | Allow visitors to send voice notes | On (default) / Off |
| Image Upload | Allow visitors to send images | On (default) / Off |
| Real-Time Voice Calls | Allow visitors to make voice calls through the widget | On / Off (default) |
| Collect Email | Ask visitors for their email before starting a chat | On / Off |
| Collect Phone | Ask visitors for their phone number before starting a chat | On / Off |
| Custom Chat Icon | Replace the default chat bubble icon with your own image | Upload image (PNG, SVG) |
| Custom Button Icon | Replace the submit button icon with your own image | Upload image (PNG, SVG) |
| Allowed Domains | Domains where the widget is permitted to load | Comma-separated list (e.g., "example.com, app.example.com") |
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.
Warning
Always add your domain to the Allowed Domains list before going live. Without it, the widget will not load — even if the embed snippet is correctly installed. This is a security feature that prevents your widget from being embedded on unauthorized sites.
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
Ready to try Raya?
Start free — no credit card required.