Skip to main content

​
Web Widget

The Famulor embeddable Chat Widget is a production-ready, customizable, and secure chat widget for websites. The widget can be embedded via a single <script> tag—no backend proxy required.

​
Overview

What is the Famulor Web Widget?

The Famulor Web Widget allows your website visitors to interact directly with your AI assistant via a voice chat button. The widget is fully customizable and can be seamlessly integrated into any website.

​
Accessing the Web Widget

Configure Widget

You can find the Web Widget settings here:
  1. Go to “Assistants”.
  2. Select your assistant.
  3. Click on “Edit”.
  4. Navigate to “Web Widget”.

​
Widget Configuration

Live Preview

  • View a real-time preview of your widget.
  • Auto-updates with changes.
  • Test functionality directly.

Customization Options

  • Choose the position on the website.
  • Customize the primary color.
  • Edit button and menu texts.

​
Customization Options

​
1. General Settings

Position and Color

Position:Select the widget’s position (e.g., “Bottom right”).
Primary Color:Customize the widget color (e.g., #3B82F6).

​
2. Button Configuration

​
3. Menu Configuration

​
Script Tag Integration

Simple Integration

Copy the generated script tag and paste it into your website:

​
Example Script Tag

Usage: Insert this script tag anywhere in your website’s HTML code, preferably before the closing &lt;/body&gt; tag.

​
Data Attribute Explanation

Available Attributes

data-assistant-id:Unique ID of your assistant.
data-position:Widget position (e.g., “right-bottom”).
data-color:Primary color of the widget.
data-header-title:Title in the widget header.
data-header-subtitle:Subtitle in the widget header.
data-button-main-text:Main button text.
data-button-sub-text:Sub button text.
data-start-button-text:Start button text.
data-modal-title:Modal title.
data-modal-description:Modal description.

​
Positioning Options

Available Positions

right-bottom:Bottom right
left-bottom:Bottom left
right-top:Top right
left-top:Top left

Recommended Position

Bottom rightis the most common and user-friendly position for chat widgets on websites.

​
Customization Tips

Best Practices

Colors:Choose a color that matches your branding.
Texts:Use inviting and clear wording.
Position:Ensure the widget doesn’t cover other important elements.
Testing:Test the widget on different devices and screen sizes.

​
Integration into Various Platforms

WordPress

Add the script tag to your theme’s footer or use a plugin for custom scripts.

HTML/CSS Websites

Insert the script tag directly before the closing &lt;/body&gt; tag in your HTML files.

React/Vue/Angular

Integrate the script tag via your package manager or include it directly in your index.html.

CMS Systems

Use your CMS’s script injection features or add the code to template files.

​
Security and Performance

Production Ready

Secure:All data is transmitted encrypted.
Fast:Minimal load times due to optimized scripts.
Reliable:99.9% uptime.
GDPR-Compliant:Meets German data protection regulations.

​
Testing the Widget

Testing the Widget

Use live preview:Use the preview in the dashboard.
Staging environment:Test the widget first on a test website.
Various devices:Test on desktop, tablet, and mobile.
Browser tests:Check compatibility with different browsers.
Functional test:Start a real voice chat to verify functionality.

​
Common Issues and Solutions

Troubleshooting

Widget not showing:Check if the script tag is embedded correctly.
Colors wrong:Ensure the hex code (#) is correctly formatted.
Position incorrect:Use one of the available position values.
Text not displaying:Check for typos in the data attributes.

​
Need Help?

Our support team can assist you with the integration of the Web Widget.

Contact Support

Need assistance with widget integration? Contact our support team at support@famulor.io.
Related pages: What Is AI Assistant and Prompt And Tools, and Assistant Best Practices.