Customizing your AI Widget UI

You can highly customize the appearance of your website chat widget so that it perfectly matches your brand. Many aspects of the widget, such as the colors, icons, and other design elements can be fine-tuned to create an AI Agent that fits seamlessly into your website’s UI.

How to customize the widget

1. Go to your workspace dashboard.
2. Click the Deploy button in the sidebar menu.
3. Under the Website Widget option, click the Brush icon to open the widget designer.

Customization options

Here are some of the available customization options:

• Colors: Change the primary, secondary, and chat icon colors.
• Chat Width: Set the maximum width of the chat window.
• Position: Choose the position where the widget should appear on your website, such as bottom right or bottom left.
• Bot Icon: Upload a custom image for the avatar icon that appears next to the bot’s messages.
• Chat Icon: Upload a custom image for the chat launcher icon that users click to open the AI Agent.
• Header Title: The title that prominently appears at the top of the chat window, such as “Support Chat” or “Virtual Assistant”.
• Interface Language: The localized language of the widget’s UI elements (e.g., placeholder text). (Note: This doesn’t affect the language used by the actual AI model).
• Ask user to rate AI response: Enabling this will display a thumbs up/down icon after every AI response, allowing users to rate it. This feedback can be used to monitor and improve the AI’s performance over time.
• Hide “Powered by PicoBot” text: At the bottom of the widget, there’s a subtle “Powered by PicoBot” watermark. You can easily hide it by enabling this option on certain billing plans.
• Hovering Message: You can proactively display attention-grabbing text messages directly above the chat icon to encourage users to start a conversation.
• Show Sources for AI Response: Enable this option to append the exact sources of the AI responses when it answers from the Knowledge Base. This helps users understand where the information is coming from.
• Auto-Open Chat: Automatically pop open the chat window after a delay when the page initially loads.

Once you’ve made all your desired changes, click the Save button at the top right to instantly apply them to your live AI Agent!