> ## Documentation Index > Fetch the complete documentation index at: https://docs.useinvent.com/llms.txt > Use this file to discover all available pages before exploring further. # Web Widget > Customize and embed the chat widget on your website The Widget tab is where you customize your assistant's on-site experience and get the code to add it to your website. Share a link, embed a chat bubble, or add an inline frame. A live preview on the right shows every change as you make it, and you can switch it between the **Chat**, **Omnibar**, **Teaser**, and **Channels** views. Widget settings with a live preview of the chat ## Embed Methods The Widget tab has three ways to deploy your assistant: ### Hosted Link A shareable URL that opens your assistant in a standalone page. No code or integration required. ``` https://www.useinvent.com/e/YOUR_ASSISTANT_ID ``` Copy the link and share it anywhere: send it to customers, embed it in emails, use it for testing, or share it with team members. Anyone with the link can start chatting with your assistant. Add a `q` parameter to prefill the message box, for example `.../e/YOUR_ASSISTANT_ID?q=I%20need%20help%20with%20billing`. The text is filled in for the visitor, not sent, so they can edit it before starting the chat. This works on the iframe `src` too. ### Embed Script An HTML snippet you paste into your website. By default it adds a floating chat bubble in the corner of your page that customers can click to open a conversation — the shape, colors and behavior all come from your saved widget settings, so you never touch the snippet again. Embed Script Code ```html theme={"system"} ``` Copy the snippet and paste it before the closing `` tag on your website. The bubble appears immediately. Click **Copy prompt for AI agent** to copy an integration prompt you can paste into AI coding tools like Cursor, Claude Code, etc. It includes the full snippet and instructions for adding the widget to your project. For platform-specific setup guides (WordPress, Shopify, Next.js, Webflow, and more), see the [install guides](#install-guides) below. ### Omnibar The same embed script can wear a different shape: a centered "Ask anything" bar at the bottom of your page. Visitors type right into it, and the chat expands around their question. Pick **Omnibar** as the **Default Mode** under **Appearance** to switch existing embeds without touching any code, or force it per page with a `mode="omnibar"` attribute on the element. ```html theme={"system"} ``` Omnibar focused with suggested messages and channels Focusing the bar raises your **Suggested Messages** and channel shortcuts above it. Sending a message expands the bar into the full chat panel; the minimize button folds it back down. Omnibar expanded into the chat panel * The bar is transparent around its edges and never blocks the page: clicks pass through everywhere the widget is not visible. * The resting bar types out your suggested messages as its placeholder, so the invitation does the selling. * Scrolling down folds the bar into a compact centered button (the same bar, morphed smaller); scrolling back up brings it back. Tapping the button reopens the bar, focused and ready to type, and if a reply arrives while folded, the button shows an unread dot. On mobile this is always on; the **Minimize on Scroll** setting extends it to desktop. * While the suggestions are raised, a grabber handle above them expands the full panel; pressing Escape folds everything back down. * The `?q=` parameter prefills the bar the same way it prefills the hosted link. * On desktop, the chat header includes a shape toggle, so visitors can switch between the omnibar and the bubble button themselves; the widget remembers their pick. Mobile keeps the UI lean: no toggle, the configured mode always applies. Set `mode="auto"` (or the **Auto** Default Mode) to let the widget decide: new visitors get the omnibar, and once they have a conversation, later visits show the familiar bubble button instead. ### IFrame An inline embed that displays your assistant directly within a page, rather than as a floating bubble. Use this when you want the assistant to appear as part of your page layout. IFrame Code ```html theme={"system"} ``` This is useful for dedicated support pages, help centers, or any layout where you want the assistant embedded inline. ## Customization All embed methods share the same settings, grouped into **Appearance**, **Conversation**, **Teaser**, **Channels**, and **Advanced**. Every change shows up in the live preview and is not applied until you click **Save**. ### Appearance Controls how the widget looks on your site. * **Default Mode**: the shape the widget starts in, the **Bubble Button** in the corner or the centered **Omnibar**. **Auto** shows the Omnibar until a visitor has a conversation. The resolution order is: the visitor's own header-toggle pick wins (desktop only — mobile has no toggle), then a `mode` attribute on the embed element, then this setting. * **Bubble Button Position**: the corner for the bubble launcher, **Bottom right** or **Bottom left**. The Omnibar is always centered. A `position` attribute on the embed element overrides it per page. * **Minimize on Scroll**: folds the Omnibar into its compact button while visitors scroll down on desktop (off by default). On mobile the bar always folds. Scrolling back up brings the bar back; a visitor who dismissed it stays folded until they tap. * **Theme Appearance**: the color scheme of the chat. **Auto** matches the visitor's system preference, or force **Light** or **Dark**. * **Accent Color**: used across the widget for the chat button, buttons, links, and your visitors' messages. Click the circle to pick a color or enter a hex value. * **Bubble Button**: the floating button follows your accent color by default. Set a custom color if you want the button to stand out. The icon color adapts automatically for contrast, so you never set it yourself. ### Conversation Shapes the first thing visitors see when they open the chat. * **Greeting**: the welcome message shown at the top of a new conversation. * **Suggested Messages**: quick replies visitors can tap to start. These also appear alongside the teaser. * **Dictation**: let visitors dictate messages with their microphone. * **File Uploads**: let visitors attach files and images to their messages. ### Teaser A short, proactive invitation that appears next to the closed button to nudge visitors into a conversation. It is on by default and only appears when there is something to show: a greeting or suggested messages. Teaser Preview * **Show Teaser**: turn the teaser on. By default it shows your **Greeting**; use **Greeting Override** to show different text just in the teaser. * **Show on**: which widget modes show the teaser, the Bubble Button, the Omnibar, or both. In omnibar mode the teaser appears as a message right above the bar. * **Show Suggested Messages**: the suggested messages from the **Conversation** section appear as tappable chips beside the teaser. Tapping one opens the chat and sends it. Choose which modes show them, or turn them off. Defaults to **Bubble Button**: the Omnibar already shows them when focused, independent of this setting. * **Devices**: where it shows, **Desktop only**, **Mobile only**, or **Desktop and mobile**. * **Delay**: how long to wait after the page loads before the teaser appears. * **Frequency**: how often it can show again. **Once per visitor**, **Once per session**, or **Every visit**. Visitors who dismiss it will not see it again (except with **Every visit**). * **Reset Dismissals**: **Show again to all visitors** brings the teaser back for everyone who dismissed it, starting on their next visit. ### Channels Offer visitors other ways to reach you from a menu on the widget button. When any channels are configured, tapping the button opens this menu first, with a button to start the chat. Channels Preview * **Connected channels**: any messaging channels you have connected (WhatsApp, Messenger, Instagram, Telegram) are included automatically and keep their links up to date. Remove one to hide it from the menu. * **Custom channels**: add a **Link**, **Email**, or **Phone** entry to point visitors anywhere else. * **Menu Heading**: the text shown above the channels in the menu. * **Chat Button**: the label for the button that opens the chat. Connect messaging channels first under the [Channels](/assistants/channels) tab, then reorder or hide them here. ### Advanced * **Hide Powered By**: remove the "Powered by Invent" branding from the widget. Removing "Powered by" branding requires a [Business or Enterprise plan](/guides/pricing-and-plans). * **Reset to Defaults**: restore every widget setting, including colors, teaser, and channels, to its default. Nothing changes until you save. ## User Authentication (Optional) By default, every visitor gets an anonymous session. To identify users and enable personalized experiences, conversation history across sessions, and contact management, add authentication attributes to the widget. ### Authentication Attributes | Attribute | Description | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `user-hash` | **Required for authentication.** HMAC-SHA256 hash of the `user-id` using your assistant's secret key. Must be generated on your backend | | `user-id` | The unique user identifier from your application. Used for session management, analytics, and maintaining conversation history across sessions | | `user-name` | Display name for the user (full name, first name, username, etc.). Used for personalization in chat messages and [contacts](/guides/audience). URL-encode special characters | `user-hash` and `user-id` are required together. `user-name` is optional. ### Setting Up Authentication Scroll to the **Secret Key** section at the bottom of the Widget tab and click **Generate Secret Key**. This creates a unique key for your assistant. Secret Key Copy the key and store it securely on your backend. Never expose it in client-side code. Use the secret key to create an HMAC-SHA256 hash of the user's ID. Here is an example in Node.js: ```javascript theme={"system"} import crypto from 'crypto'; const secretKey = 'YOUR_SECRET_KEY'; const userId = 'user_123'; function generateUserHash(userId, secretKey) { return crypto .createHmac('sha256', secretKey) .update(userId) .digest('hex'); } const userHash = generateUserHash(userId, secretKey); ``` Always generate the hash on your server. Never include the secret key in client-side JavaScript. Pass the authentication attributes to the widget element: ```html theme={"system"} ``` For more authentication examples in other languages (PHP, Python, Ruby, Go) and framework-specific guides, see the [install guides](#install-guides) below. ## Element Attributes The `` element reads a fixed set of attributes. Anything else is ignored. | Attribute | Values | Description | | ----------------------------------- | --------------------------- | --------------------------------------------------------------------------------------- | | `assistant-id` | your assistant ID | **Required.** Identifies which assistant to load | | `mode` | `button`, `omnibar`, `auto` | Overrides the **Default Mode** for this page | | `position` | `right`, `left` | Overrides the **Bubble Button Position** for this page | | `theme-appearance` | `auto`, `light`, `dark` | Overrides the **Theme Appearance** for this page | | `theme-button-background-color` | hex color | Overrides the bubble button color. The icon color is derived automatically for contrast | | `hide-powered-by` | `true` | Hides the "Powered by Invent" branding (Business or Enterprise plan) | | `user-id`, `user-hash`, `user-name` | strings | Authentication attributes (see above) | The button icon color is always computed for contrast, so there is no `theme-button-color` attribute. The widget also has no inbound page-context API, so `window.inventContext` and similar globals have no effect. ## Install Guides Step-by-step setup guides for popular platforms and frameworks. ### Frameworks ### Content Management ### Website Builders ### E-commerce ## Next Steps Connect your assistant to WhatsApp, Instagram, Messenger, and other messaging platforms Hand off conversations to human teammates when needed