What Is the Web Widget?
The Web Widget is a customizable chat launcher that you style inside Plural’s designer, then add to your website by pasting a single code snippet into your page’s HTML. With the widget in place, your site visitors can:- Ask your avatar questions and receive spoken or text responses.
- Navigate your conversation flow through buttons, menus, and voice input.
- Get real-time assistance, product information, or guided experiences — all without leaving your website.
Customizing the Widget
Open the Web Widget designer from the left sidebar inside Plural. The designer is divided into four settings groups:1. General Settings
1. General Settings
- Plural Avatar Link — paste your Plural Avatar URL here.
- Avatar Live Link — choose the live link associated with your avatar.
- Widget Position — place the widget on the left or right side of the screen.
- Widget Hint Position — set where the hint tooltip appears: left, right, top, or bottom.
2. Chat Bubble Settings
2. Chat Bubble Settings
- Chat Bubble Color — choose the background color of the circular launcher button.
- Chat Bubble Icon URL — provide a URL to a custom icon (PNG, JPG, SVG, or WebP) to replace the default launcher graphic.
3. Chat Hint Settings
3. Chat Hint Settings
- Chat Hint Title — enter the tooltip text visitors see before they click (e.g., “Click here to chat”).
- Hint Background Color — set the tooltip background color.
- Hint Text Color — set the tooltip text color.
4. Chat Widget Settings
4. Chat Widget Settings
- Chat Widget Title — enter the header text shown when the widget is open (e.g., “Plural Assistant”).
- Chat Widget Color — set the header background color.
- Chat Widget Text Color — set the header text color.
- Chat Widget Height — define the open widget height in pixels.
- Chat Widget Width — define the open widget width in pixels.
- Chat Widget Border Radius — set the corner rounding of the widget panel in pixels.
Embedding the Widget on Your Website
Finish customizing
Complete all settings in the Web Widget designer until the preview looks the way you want.
Copy the embed code
The embed code snippet is shown in the bottom-right corner of the designer page. Click to copy it.
Web Widget vs. Plural Embedded
Plural offers two ways to integrate an avatar into external products. Use the table below to choose the right approach for your project:| Feature | Plural Web Widget | Plural Embedded |
|---|---|---|
| Creation Process | No coding required; easy setup | Requires programming for integration |
| Operational Environment | Managed within Plural.io; hosted on your website | Flexible integration into any product or service |
| Integration Method | Code snippet pasted into website body | Library-based; integrated into apps or websites |
| Customization | Visual designer for appearance | Programmatic control via API/SDK |
| Pricing | Styler included with Plural.io subscription; interaction-based billing | Separate pricing based on Embedded usage |
| User Interface | Non-developer friendly | Developer-centric; requires coding skills |
| Control & Hosting | Managed by Plural.io; displayed on your site | Self-hosted and fully controlled by you |
| Advanced Features | Simplified chat features for website integration | Advanced TTS, STT, standalone Avatar, and custom app support |
