How to customize an AI chatbot widget and embed it

Open your assistant and choose Widget Integration → Appearance. Start with Widget Width and optional Height, then choose the Theme, Font Family and Chat Title. Tutorial Lab uses the Modern theme and the title “Tutorial Lab”; leaving height optional lets the widget use its responsive default.

Assign colors by role: header background and text, bot bubble and text, visitor bubble and text, launcher background and icon. The example uses a dark navy header with white text and a strong blue visitor bubble. Check every foreground/background pair in the rendered preview, not only in the color input. Normal text should reach at least 4.5:1 contrast.

Open Images. Avatar Image appears beside assistant messages, Chat Button Image replaces the launcher artwork, and Welcome Image supports the empty first screen. Do not upload one wide logo everywhere; crop an intentional asset for each role.

Use optimized PNG or WebP files with a clear silhouette. Keep the avatar and launcher square, test transparency on both light and dark host pages and keep text out of tiny icons. The captured state intentionally leaves optional artwork empty, which is valid when the built-in WebChatAgent icon is clearer than a weak custom asset.

Open Content & Behavior. Decide whether the widget is disabled on the website, initially open, hidden on mobile or allowed to show sources. Then review microphone, automatic translation, speech bubble and path exclusions. Change one behavior at a time and verify the visible result.

Write a short welcome that names the job. Prompt buttons are not in this tab: they live under Buttons & forms, in the Quick actions section. Add two or three there with real intent. “Which plan is right for me?” gives more useful context than “Learn more.” Avoid automatically opening a large panel on every page; use Triggers only when timing, page scope, dismissal and frequency have been tested in a clean session.

Open Positioning. Desktop Offsets and Mobile Offsets are independent distances from the selected corner. Tutorial Lab uses 20 pixels from the right and bottom on both layouts as a neutral baseline.

Test more than the launcher. Open the complete widget at your smallest supported width with the cookie banner visible, mobile browser chrome expanded and any sticky navigation, cart or checkout control present. Increase the appropriate offset until launcher and panel remain reachable without hiding primary actions.

Select Test Your Chatbot to open the authenticated visitor preview. Confirm the title, blue visitor bubble, readable assistant bubble, prompt behavior, message input, close button and branding. Operate it once with mouse and once with keyboard; focus must remain visible and return sensibly after the dialog closes.

The verified example asks “What are the support hours?” The real widget replies that Northstar Services’ support hours are Monday to Friday, 8:00 AM to 6:00 PM Central European Time. This proves the saved presentation and a source-backed answer together. Repeat with one deliberately unknown question to confirm the design also keeps longer fallback text readable.

Scroll to the code block in Widget Integration and copy the complete HTML, not only the chatbot ID. The block loads the WebChatAgent script asynchronously and creates the `web-chat-agent` custom element with this assistant’s ID. Paste it once before the closing `body` tag or in the site-wide custom-code area of your CMS.

Add the exact staging and production hostnames under Allowed Websites before testing. If your consent policy blocks non-essential third-party widgets, load the script only after the correct consent category; if the widget is treated as necessary support, document that decision and the data flow. Verify no duplicate scripts, console errors or Content Security Policy blocks.

Saved widget changes are fetched by the existing element. You do not need to replace the embed after changing colors, prompts or offsets. Replace it only when you intentionally switch to another chatbot ID or integration type.