Configure Widget
Customize your AI widget to match your brand
After creating a Web Chat integration, you can customize how your widget looks and behaves on your website. The widget automatically adapts to different screen sizes and provides a seamless experience for your users.
1. Navigate to Integration Settings
Go to your Integrations page and click on the Web Chat integration you want to configure. Then open the "Settings" tab.
2. Customize Widget Appearance
In the Widget Settings section, you can customize:
- Primary Color: The main color used for buttons and highlights (hex color code)
- Position: Where the widget appears on your page (bottom-right, bottom-left, top-right, or top-left)
- Size: Widget button size (small, medium, large)
- Shape: Widget button shape (round or square)
- Initial Message: The greeting message users see when they open the widget
- Message Placeholder: The placeholder text in the message input field
- Widget Icon: Upload a custom icon for the widget button
3. Configure Behavior Settings
Control how your widget behaves:
- Auto-open: Automatically open after X seconds
- Greeting Delay: Time before showing welcome message
- Sound Notifications: Enable/disable notification sounds
- Typing Indicators: Show when AI is responding
4. Configure AI Settings
In the AI Model Settings section, you can adjust:
- Model: Choose which AI model to use (GPT-3.5 Turbo, GPT-4, or Claude)
- Temperature: Control how creative or focused the responses are (0.1 = focused, 0.9 = creative)
- System Prompt: Customize the AI's behavior, personality, and response guidelines
- Response Length: Set maximum response length (50-2000 characters)
- Context Window: Number of previous messages to consider (1-10)
5. Get Your Embed Code
Once you're happy with your settings, go to the "Embed" tab to get your widget code. Copy the JavaScript snippet and paste it into your website's HTML, just before the closing </body> tag. The widget will automatically appear on your site.
Tips for Widget Configuration
- Choose colors that match your website's design for a seamless experience
- Keep your initial message friendly and inviting
- Test your widget on different devices to ensure it looks good everywhere
- Position the widget where users naturally look for help
- Use strategic placement and clear messaging to improve engagement