Skip to main content
The Widget tab is where you get the code to put your assistant on your website. Share a link, embed a chat bubble, or add an inline frame. Each option includes a live preview so you can see exactly how it will look.
Widget Tab Overview

​
Embed Methods

The Widget tab has four options for deploying your assistant: 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.

​
Bubble Button

An HTML snippet you paste into your website. This adds a floating chat bubble in the corner of your page that customers can click to open a conversation.
Bubble Button Code
<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
/>
<script type="text/javascript" src="https://www.useinvent.com/button.js" async></script>
Copy the snippet and paste it before the closing </body> 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 Integrations docs.

​
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
<iframe
  src="https://www.useinvent.com/e/YOUR_ASSISTANT_ID"
  width="100%"
  height="600"
  title="AI Assistant"
  allow="microphone"
></iframe>
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 customization options. Changes are reflected in the live preview on the right.

​
Button Theme

Toggle between the default theme and a custom theme. When using a custom theme, two additional options appear:
  • Button Background Color: The background color of the chat bubble button
  • Button Foreground Color: The foreground (icon) color of the chat bubble button
Click the color circles to open a color picker, or enter hex values directly.

​
Theme Appearance

Controls the color scheme of the chat widget:
  • Auto: Matches the user’s system preference (light or dark)
  • Dark: Always uses the dark theme
  • Light: Always uses the light theme

​
Hide Powered By

Toggle this on to remove the “Powered by Invent” branding from the widget.
Removing “Powered by” branding requires a Business or Enterprise plan.

​
Reset to Defaults

Click Reset to Defaults to restore all customization options to their original settings.

​
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

AttributeDescription
user-hashRequired for authentication. HMAC-SHA256 hash of the user-id using your assistant’s secret key. Must be generated on your backend
user-idThe unique user identifier from your application. Used for session management, analytics, and maintaining conversation history across sessions
user-nameDisplay name for the user (full name, first name, username, etc.). Used for personalization in chat messages and contacts. URL-encode special characters
user-avatarURL to the user’s avatar image. Displayed in chat messages and contacts. Must be a publicly accessible HTTPS URL
user-hash and user-id are required together. user-name and user-avatar are optional.

​
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.
Secret Key
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"
/>
<script type="text/javascript" src="https://www.useinvent.com/button.js" async></script>
For more authentication examples in other languages (PHP, Python, Ruby, Go) and framework-specific guides, see the Integrations docs.

​
Next Steps

Integrations

Platform-specific setup guides for WordPress, Shopify, Next.js, Webflow, and more

Channels

Connect your assistant to WhatsApp, Instagram, Messenger, and other messaging platforms