Configuration
HTML attributes, display modes, and CSS custom properties for the Virbe web widget.
The <virbe-plugin> element is configured through HTML attributes and can be styled using CSS custom properties.
HTML Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
profileId | string | required | Profile identifier from the Virbe dashboard. |
profileSecret | string | required | Authentication secret from the Virbe dashboard. |
mode | "floating" | "embedded" | "floating" | Widget display mode. |
position | "top" | "bottom" | – | Vertical position of the floating widget. Only applies when mode="floating". |
initialVariables | JSON array | – | Variables to inject when a conversation starts. Pass as a JSON-encoded string in HTML. |
Floating Mode
In floating mode the widget appears as a small avatar bubble that the user can click to expand. This is the default mode.
<virbe-plugin
profileId="YOUR_PROFILE_ID"
profileSecret="YOUR_PROFILE_SECRET"
mode="floating"
position="bottom">
</virbe-plugin>Embedded Mode
In embedded mode the widget renders inline within your page layout. It fills the dimensions of its parent container, so make sure the parent has an explicit width and height.
<div style="width: 100%; height: 600px;">
<virbe-plugin
profileId="YOUR_PROFILE_ID"
profileSecret="YOUR_PROFILE_SECRET"
mode="embedded">
</virbe-plugin>
</div>Initial Variables
You can pass context variables that will be available to the conversation engine from the start. Set the initialVariables attribute as a JSON array:
<virbe-plugin
profileId="YOUR_PROFILE_ID"
profileSecret="YOUR_PROFILE_SECRET"
initialVariables='[{"key":"email","value":"[email protected]"},{"key":"plan","value":"enterprise"}]'>
</virbe-plugin>Or set it programmatically in JavaScript:
const widget = document.querySelector('virbe-plugin');
widget.initialVariables = [
{ key: 'email', value: '[email protected]' },
{ key: 'plan', value: 'enterprise' },
];CSS Custom Properties
The widget defines three CSS custom properties that control its color scheme:
| Property | Default | Description |
|---|---|---|
--virbe-plugin-bg | #ffffff | Background color |
--virbe-plugin-text | #374151 | Text color |
--virbe-plugin-accent | #1e429f | Accent color (buttons, links, highlights) |
You can override these in your stylesheet:
virbe-plugin {
--virbe-plugin-bg: #1a1a2e;
--virbe-plugin-text: #e0e0e0;
--virbe-plugin-accent: #e94560;
}Or set them directly via JavaScript:
const widget = document.querySelector('virbe-plugin');
widget.style.setProperty('--virbe-plugin-bg', '#1a1a2e');
widget.style.setProperty('--virbe-plugin-text', '#e0e0e0');
widget.style.setProperty('--virbe-plugin-accent', '#e94560');Runtime Style Updates
You can also use the updateStyles() method to change colors at runtime. This is useful when you want to dynamically theme the widget based on user preferences or page context:
widget.updateStyles({
bg: '#1a1a2e',
text: '#e0e0e0',
accent: '#e94560',
});Colors configured in the Virbe dashboard (under your Profile's UI settings) are applied as defaults when the widget loads. CSS custom properties and updateStyles() override those defaults on the client side.