Embed a chat widget on your website using a single script tag.
Navigate to your project settings and find the Widget Key section. This special key is used only for the widget and cannot access other API endpoints.
Allowed Domains
You must specify at least one allowed domain in Widget Settings for the widget to work. This security feature ensures your widget key can only be used on authorized websites. If left empty, the widget will be blocked on all domains.
Simply add this script tag to your website's HTML:
<script
src="https://filebrain.pro/api/widget/v1/fbp-widget.js"
data-widget-key="wdg_your_widget_key_here"
></script>That's it! The widget will appear in the bottom-right corner with a chat bubble button.
Override default settings with additional data attributes:
<script
src="https://filebrain.pro/api/widget/v1/fbp-widget.js"
data-widget-key="wdg_your_widget_key_here"
data-chat-header="Support Chat"
data-welcome-message="Hi! How can we help?"
data-widget-color="#4f46e5"
data-position="bottom-left"
data-tags="product, pricing"
data-language="EN"
></script>| Attribute | Description | Default |
|---|---|---|
| data-widget-key | Your widget API key | Required |
| data-chat-header | Chat window title | From Widget Settings |
| data-welcome-message | Initial greeting message | From Widget Settings |
| data-widget-color | Widget button and accent color (hex) | #8b5cf6 |
| data-user-message-bg | User message bubble color | #8b5cf6 |
| data-user-message-text | User message text color | #ffffff |
| data-ai-message-bg | AI message bubble color | #f3f4f6 |
| data-ai-message-text | AI message text color | #1f2937 |
| data-ai-avatar-url | Custom AI avatar image URL | Default icon |
| data-user-avatar-url | Custom user avatar image URL | Default icon |
| data-show-unread-badge | Show unread message count badge (true/false) | true |
| data-position | Widget position | bottom-right |
| data-button-size | Chat button size | 60px |
| data-tags | Comma-separated tags to filter files (e.g., "product, pricing") | — |
| data-language | Widget language for button text (EN or RU) | EN |
bottom-right
Default position
bottom-left
Left corner placement
For more control, initialize the widget programmatically:
<script src="https://filebrain.pro/api/widget/v1/fbp-widget.js"></script>
<script>
new FileBrainWidget({
widgetKey: 'wdg_your_widget_key_here',
chatHeader: 'Support Chat',
welcomeMessage: 'Hello! How can we help?',
widgetColor: '#4f46e5',
showUnreadBadge: true,
position: 'bottom-right',
tags: 'product, pricing', // Optional: filter files by tags
language: 'EN' // Optional: 'EN' or 'RU' for button text
});
</script>Note: IE11 is not supported due to Shadow DOM requirements.
Important: Press F12 to open browser developer tools and check the Console tab. The widget will display exact error messages there if something goes wrong.
Error: "Widget key is required" - Make sure the data-widget-key attribute is present and not empty.
Error: "Invalid widget key" - The widget key is incorrect. Copy it again from Widget Settings in your project.
Error: "Widget is not enabled" - Go to Widget Settings and enable the "Widget Active" toggle.
Error: "Domain not allowed" - Add your domain to the "Allowed Domains" list in Widget Settings. The widget will not work until at least one domain is specified.
Error: "Failed to fetch configuration from server" - Check your network connection and ensure the script URL is accessible.
Error: "Widget is not enabled" - Enable the widget in Widget Settings.
Error: "Domain not allowed" - Add your current domain to the allowed domains list in Widget Settings.
Error: "Invalid widget key" - Verify the widget key is correct and matches the one in Widget Settings.
• Check Network tab in browser dev tools (F12) to see the exact API response
• Ensure CORS is not blocking requests (check browser console for CORS errors)
• Widget uses Shadow DOM - host page CSS won't affect it
• Customize only via data attributes or Widget Settings
• Check browser compatibility (Shadow DOM support required)
• All widget settings can be configured in Widget Settings (found in Integrations block of your project)