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

// Primary text displayed on the widget button
Need help?
```text
// Secondary text displayed below the main button text
Start voice chat ✨

​
3. Menu Configuration

// Title in the widget header
Voice AI
```text
// Subtitle in the widget header
Ready to help ✨
```text
// Title shown when the modal opens
Ready to chat?
```text
// Text on the button that starts the conversation
Start Voice Chat
```text
// Description text inside the modal
Click below to start your voice conversation

​
Script Tag Integration

Simple Integration

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

​
Example Script Tag

<script 
  src="https://app.famulor.de/embed.js" 
  data-assistant-id="5c92d914-9099-4d5-8f09-096ada2ade0" 
  data-position="right-bottom" 
  data-color="#3B82F6" 
  data-header-title="Voice AI" 
  data-header-subtitle="Ready to help ✨" 
  data-button-main-text="Need help?" 
  data-button-sub-text="Start voice chat ✨" 
  data-start-button-text="Start Voice Chat" 
  data-modal-title="Ready to chat?" 
  data-modal-description="Click below to start your voice conversation">
</script>
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.