> ## Documentation Index
> Fetch the complete documentation index at: https://docs.recepai.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Website Widget
> Customize how your receptionist looks, speaks, and interacts — then deploy it to your website, kiosk, or custom domain.
The Website Widget page is where you design your receptionist's entire guest-facing experience — from visual appearance and greeting messages to language support, security settings, and deployment options.
Every change you make is reflected in the **live preview** on the right side of the page. Click **"Open Full Preview"** at the top to see the full widget in a new tab.
## Brand Look
Set the visual identity that guests see when they interact with your receptionist.
| Setting | What It Does |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Hotel Name** | Displayed in the widget header. Use your hotel's official name. |
| **Primary Color** | Your brand color — affects buttons, accents, links, and the overall widget feel. Click the color circle to open the picker, or type a hex code directly (e.g., `#C49E47`). |
## Staff Appearance
Upload the visual assets that represent your receptionist. Each element has specific size and format requirements:
**280×100px** — PNG, JPG, or SVG (max 2MB). Displayed in the widget header.
**800×800px square** — PNG or JPG (max 2MB). The profile picture shown next to your receptionist's messages and on the floating avatar.
**720×720px square** — MP4 or WebM (max 50MB). An optional welcome video that plays when guests first see the widget. Great for a personal touch.
**128×128px** — PNG, JPG, or SVG (max 2MB). Small icon displayed in the chat header bar.
If you don't upload custom media, RecepAI's default receptionist avatar and branding will be used.
### Staff Glow
A colorful shimmer effect that animates around your receptionist's floating avatar — rotating purple, blue, and pink gradients that draw the guest's eye.
* **On (default):** Eye-catching glow that makes your receptionist stand out on the page
* **Off:** Clean, simple shadow — better for a corporate or minimalist look
Luxury resorts and boutique hotels typically keep the glow on. Business hotels and corporate properties often prefer it off for a more understated presence.
## Greeting Bubbles
Floating speech bubbles that appear above your receptionist's avatar before the guest opens the chat. These are your first chance to start a conversation.
| Setting | What It Does |
| ----------------- | ------------------------------------------------------------------ |
| **Show Bubbles** | Toggle the floating messages on or off |
| **Bubble Line 1** | First message guests see (e.g., "Hello, I'm your AI Receptionist") |
| **Bubble Line 2** | Second message that cycles in (e.g., "Click to talk with me!") |
The two messages alternate automatically — the first appears, fades out, and the second takes its place. After two full cycles, the bubbles stop to avoid being intrusive.
**Smart behavior:** If a guest dismisses the bubbles twice, they won't appear again for 24 hours. This respects guest preferences while still engaging new visitors.
## Chat Display
Control what guests see when they open the chat window.
| Setting | What It Does |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Greeting Message** | The first message guests see when opening the chat (e.g., "Hello! Welcome to Grand Hotel. How can I help you today?") |
| **Input Placeholder** | Ghost text shown in the message input field before typing (e.g., "Type your message...") |
| **Hide Sidebar on Start** | When on, the conversation history sidebar is collapsed when guests first arrive — so they focus on your receptionist. Past chats are still accessible via the menu icon. |
## Helpful Conversation Starters
Pre-set questions that appear as clickable pills above the message input, making it easy for guests to start a conversation without thinking about what to type.
| Setting | What It Does |
| ----------------------------- | ------------------------------------ |
| **Enable Guided Suggestions** | Toggle suggestion pills on or off |
| **First Suggestion** | e.g., "What are the check-in times?" |
| **Second Suggestion** | e.g., "Do you have room service?" |
Choose questions your guests ask most. Check your [Dashboard training opportunities](/admin-panel/dashboard#training-opportunities) to see the most common topics.
## Service Channels
Control which communication channels are available in the widget.
### Voice
Toggle voice calls on or off. When enabled, guests see a microphone button in the chat widget for real-time voice conversations.
Voice must be configured first on the [Voice Settings](/admin-panel/voice-agent) page. If voice isn't set up yet, you'll see a warning when trying to enable it here.
### WhatsApp Integration
Connect your receptionist to WhatsApp Business so guests can message via WhatsApp and get instant AI responses.
* **Price:** \$29/mo (add-on)
* **Setup:** Subscribe via the Billing page, then our team connects your WhatsApp Business within 7 days
* **When active:** Enter your WhatsApp phone number and toggle on
### Telegram Integration
Connect your receptionist to Telegram so guests can message via a Telegram bot.
* **Price:** \$19/mo (add-on)
* **Setup:** Subscribe via the Billing page, then our team connects your Telegram bot within 7 days
* **When active:** Enter your Telegram bot username (without @) and toggle on
### Guest Ratings
When enabled, guests can rate AI responses with thumbs up/down. This feedback appears in your [Conversation History](/admin-panel/history) and helps you identify where your receptionist needs improvement.
## Guest Terms
Require guests to accept terms and conditions before starting a conversation. Useful for GDPR compliance and data privacy requirements.
| Setting | What It Does |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Guest Agreement** | Master toggle — when on, guests must accept before chatting |
| **Terms Content** | The terms text displayed to guests. Supports Markdown formatting: `**bold**`, `*italic*`, `[links](url)` |
| **Full Terms URL** | Optional link to your full terms page (e.g., `https://yourhotel.com/terms`). Shows as a "Read full terms" link below the content. |
## World Languages
Set up translations so your receptionist greets guests in their preferred language. RecepAI currently supports **20 languages**: English, Turkish, German, French, Spanish, Italian, Russian, Arabic, Chinese, Japanese, Korean, Portuguese, Dutch, Polish, Ukrainian, Greek, Hebrew, Hindi, Thai, and Vietnamese.
### Language Menu
When enabled, guests see a language dropdown in the chat and can switch languages anytime during their conversation. When disabled, language is detected automatically.
### Default Language
The fallback language used when automatic detection can't determine the guest's preference.
### How Language Detection Works
Your receptionist automatically selects the right language for each guest using this priority order:
1. **URL parameter** — If the link contains `?lang=de`, German is used
2. **URL path** — If the page URL starts with `/tr/` or `/de/`, that language is used
3. **Saved preference** — If the guest changed language before, their choice is remembered
4. **Browser language** — The guest's browser language setting
5. **Default language** — Your configured default
### Adding a Language
Click **"+ Add Language"** to open the language panel. Select a language, then customize all guest-facing text for that language:
* Welcome bubble messages
* Chat greeting text
* Input placeholder
* Button labels (Chat, Call)
* Footer disclaimer
* Terms & conditions (if enabled)
Add the languages most common among your guests. A hotel in Istanbul might add Turkish, English, German, and Arabic. A Paris hotel might add French, English, Spanish, and Chinese.
### Video Timestamps
If you uploaded a **Staff Video** with greetings in multiple languages, you can set timestamps so the video automatically skips to the right language section for each guest.
**Example:** Your video has English at 0s, German at 15s, and French at 30s. A German guest sees the video start at 0:15 automatically.
This section only appears when a staff video is uploaded.
## Widget Placement
Control where the floating receptionist avatar appears on the page. Desktop and mobile have **separate position settings** so you can optimize for each screen size.
**Available positions:** Bottom Right, Bottom Center, Bottom Left, Middle Right, Middle Left
Click a dot on the visual position grid to change placement. The label updates to show the current selection.
**Bottom Right** is the most common position — guests expect chat widgets there. Only move it if your website has a conflicting element in that corner.
## Protection
Security settings to protect your widget from unauthorized use and abuse.
### Domain Security
Restrict your receptionist to work only on specific websites. When enabled, the widget will only load on domains you've added to the **Allowed Domains** list.
**How to set up:**
1. Toggle **Domain Security** on
2. Type your website domain (e.g., `grandhotel.com`) and click **Add**
3. Add all domains where the widget will be used — including `www` variants
**Domain Security enabled + empty domain list = widget blocked everywhere.** Always add at least one domain before enabling this setting. If you accidentally lock yourself out, disable Domain Security to restore access.
**Subdomain matching:** Adding `hotel.com` automatically allows `www.hotel.com`, `booking.hotel.com`, and any other subdomain. You don't need to add each one separately.
### Intelligent Abuse Protection
Automatically limits high-frequency requests to block automated bots while keeping the experience seamless for real guests. When enabled, each guest is limited to **10 messages per minute**.
Normal guests never hit this limit — only bots or automated scripts would be blocked.
### Daily Limits
Set maximum daily usage to control costs and prevent unexpected charges.
| Limit | What It Controls | Range | Default |
| -------------- | ----------------------------- | ---------- | ------- |
| **Chat Limit** | Maximum chat messages per day | 30 – 5,000 | 1,000 |
| **Call Limit** | Maximum voice calls per day | 30 – 5,000 | 100 |
When a limit is reached, the other channel still works — so if chat hits its limit, guests can still use voice, and vice versa. Limits reset daily at midnight.
Start with the defaults and adjust based on your traffic. A small boutique hotel might lower limits. A busy resort during peak season might increase them.
## Reception Ready!
The dark section at the bottom of the page contains everything you need to deploy your receptionist.
### Embed on Your Website
Copy the **RECEPtionist Code** and paste it before the closing `` tag on your website:
```html theme={null}