Web Widget

​

Embed Methods

​

Hosted Link

https://www.useinvent.com/e/YOUR_ASSISTANT_ID

​

Embed Script

<invent-assistant assistant-id="YOUR_ASSISTANT_ID"></invent-assistant>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>

​

Omnibar

<invent-assistant assistant-id="YOUR_ASSISTANT_ID" mode="omnibar"></invent-assistant>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>

• 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.

​

IFrame

<iframe
  src="https://www.useinvent.com/e/YOUR_ASSISTANT_ID"
  width="100%"
  height="600"
  title="AI Assistant"
  allow="microphone"
></iframe>

​

Customization

​

Appearance

• 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

• 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

• 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

• 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.

​

Advanced

• Hide Powered By: remove the “Powered by Invent” branding from the widget.
  Removing “Powered by” branding requires a Business or Enterprise plan.
• Reset to Defaults: restore every widget setting, including colors, teaser, and channels, to its default. Nothing changes until you save.

​

User Authentication (Optional)

​

Authentication Attributes

​

Setting Up Authentication

1

Generate a Secret Key

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.

Copy the key and store it securely on your backend. Never expose it in client-side code.

2

Generate the User Hash on Your Backend

Use the secret key to create an HMAC-SHA256 hash of the user’s ID. Here is an example in Node.js:

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.

3

Add Attributes to the Widget

Pass the authentication attributes to the widget element:

<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
  user-id="user_123"
  user-hash="GENERATED_HASH"
  user-name="Sarah Miller"
  user-avatar="https://example.com/avatar.jpg"
></invent-assistant>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>

​

Install Guides

​

Frameworks

​

Content Management

​

Website Builders

​

E-commerce

​

Next Steps