Embed Iframe

Overview

Embed your assistant directly into your website using an iframe. This creates a seamless chat experience within your existing pages. The iframe will automatically adapt to different screen sizes and provides a native chat interface for your users.

Basic Implementation

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

Recommended Iframe Attributes

src (Required)

The URL of your assistant. This is automatically generated and includes your assistant ID.

<iframe src="https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID" />

width

Width of the iframe. Use 100% for responsive design or specific pixel values like 400px for fixed width.

<iframe
  src="https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID"
  width="100%"
/>

height

Height of the iframe. Recommended minimum is 600px for optimal chat experience.

<iframe
  src="https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID"
  width="100%"
  height="600"
/>

style

CSS styles for the iframe. Includes border removal, rounded corners, and shadow for a polished look.

<iframe
  src="https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID"
  width="100%"
  height="600"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
/>

User Authentication

The user_hash parameter must be generated on your backend using your assistant’s secret key. Never expose the secret key to the client or generate the hash in frontend code.

Understanding User Authentication vs Contact Updates

There are two distinct features for managing user information:

Manual User Authentication (described in this section)
- Requires both user_id and user_hash to be provided together as URL parameters
- Used for authenticated sessions with your application users
- Enables personalized experiences and session management
- The hash validates the user’s identity securely
Automatic Contact Updates (AI feature)
- The assistant can automatically update contact information (name, email, phone) when detected in conversations
- Works independently of authentication
- No hash required for this feature
- Available for all sessions, authenticated or anonymous

If you want to pre-authenticate users from your application, follow the instructions below. Otherwise, the assistant will create an anonymous session and can still collect contact information through conversation.

Secret Key

Generate a secret key to enable user authentication for your assistant. This key is required to create secure user hashes for authenticated sessions.

Navigate to your assistant settings in the Invent dashboard
Click Generate Secret Key
Store this key securely on your backend server

URL Parameters

To authenticate users from your application, add these parameters to the iframe URL. This enables personalized experiences, session management, and user-specific analytics. If no authentication is provided, an anonymous session will be created automatically.

user_hash

Required for authentication. HMAC-SHA256 hash of the user_id using your assistant’s secret_key. This ensures secure authentication and 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 Invent Contacts. URL-encode special characters.

user_avatar

URL to the user’s avatar image. Will be displayed in chat messages and Invent Contacts. Must be a publicly accessible HTTPS URL.

Authenticated Implementation

Frontend Code

<iframe
  src="https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID?user_hash=<?php echo urlencode($user_hash); ?>&user_id=<?php echo urlencode($user_id); ?>&user_name=<?php echo urlencode($user_name); ?>&user_avatar=<?php echo urlencode($user_avatar); ?>"
  width="100%"
  height="600"
  title="AI Assistant"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
/>

Backend Hash Generation

<?php
$secret_key = 'your_secret_key_here'; // Store securely in env variables
$user_id = '12345'; // Your user's unique ID
$user_name = 'John Doe';
$user_avatar = 'https://example.com/avatars/john.jpg';

// Generate HMAC-SHA256 hash
$user_hash = hash_hmac('sha256', $user_id, $secret_key);

// Build iframe URL
$iframe_url = sprintf(
    'https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID?user_hash=%s&user_id=%s&user_name=%s&user_avatar=%s',
    urlencode($user_hash),
    urlencode($user_id),
    urlencode($user_name),
    urlencode($user_avatar)
);
?>

Complete Example

Full HTML Page with Authentication

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat with Our Assistant</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    .chat-container {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Chat with Our AI Assistant</h1>
    <p>Get instant answers to your questions</p>

    <div class="chat-container">
      <iframe
        src="https://www.useinvent.com/e/YOUR_ASSISTANT_ID?user_hash=<?php echo urlencode($user_hash); ?>&user_id=<?php echo urlencode($user_id); ?>&user_name=<?php echo urlencode($user_name); ?>&user_avatar=<?php echo urlencode($user_avatar); ?>"
        width="100%"
        height="600"
        title="AI Assistant"
        style="border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
      />
    </div>
  </div>
</body>
</html>

Responsive Design

Mobile-Friendly Layout

<style>
  .chat-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  .chat-iframe {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    .chat-iframe {
      height: calc(100vh - 100px);
      border-radius: 0;
    }
  }
</style>

<div class="chat-wrapper">
  <iframe
    class="chat-iframe"
    src="https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID"
    title="AI Assistant"
  />
</div>

Full-Height Chat Experience

<style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  .fullscreen-chat {
    width: 100%;
    height: 100vh;
    border: none;
  }
</style>

<iframe
  class="fullscreen-chat"
  src="https://www.useinvent.com/e/ast_YOUR_ASSISTANT_ID"
  title="AI Assistant"
/>

Content Security Policy (CSP)

If your website uses Content Security Policy headers, add these directives:

Content-Security-Policy: frame-src https://www.useinvent.com;

For stricter policies:

Content-Security-Policy:
  frame-src https://www.useinvent.com;
  script-src 'self' https://www.useinvent.com;
  connect-src 'self' https://www.useinvent.com https://api.useinvent.com;

Best Practices

Security

Always generate user hashes on your backend. Never expose your secret key in client-side code.

Responsive Design

Use percentage-based widths and appropriate heights for mobile devices.

Loading State

Consider adding a loading indicator while the iframe loads.

Accessibility

Always include a descriptive title attribute for screen readers.

Troubleshooting

Iframe not loading

Possible causes:

Invalid assistant ID
CSP blocking the iframe
Network connectivity issues

Solutions:

Verify assistant ID is correct
Check Content Security Policy settings
Inspect browser console for errors

Authentication not working

Possible causes:

Invalid user hash
Incorrect URL parameter encoding
Secret key mismatch

Solutions:

Verify hash generation code
Ensure proper URL encoding of parameters
Check secret key matches your assistant

Display issues

Possible causes:

Incorrect dimensions
CSS conflicts
Responsive design problems

Solutions:

Set minimum height of 600px
Use CSS isolation techniques
Test on multiple screen sizes

Cross-origin issues

Possible causes:

Restrictive CSP headers
Browser security settings

Solutions:

Update CSP to allow useinvent.com
Verify X-Frame-Options headers

Getting Started

Embed Methods

Frameworks

Content Management

Website Builders

E-commerce

API Reference

Overview

Basic Implementation

Recommended Iframe Attributes

src (Required)

width

height

style

User Authentication

Understanding User Authentication vs Contact Updates

Secret Key

URL Parameters

user_hash

user_id

user_name

user_avatar

Authenticated Implementation

Frontend Code

Backend Hash Generation

Complete Example

Full HTML Page with Authentication

Responsive Design

Mobile-Friendly Layout

Full-Height Chat Experience

Content Security Policy (CSP)

Best Practices

Security

Responsive Design

Loading State

Accessibility

Troubleshooting

Getting Started

Embed Methods

Frameworks

Content Management

Website Builders

E-commerce

API Reference

​Overview

​Basic Implementation

​Recommended Iframe Attributes

​src (Required)

​width

​height

​style

​User Authentication

​Understanding User Authentication vs Contact Updates

​Secret Key

​URL Parameters

​user_hash

​user_id

​user_name

​user_avatar

​Authenticated Implementation

​Frontend Code

​Backend Hash Generation

​Complete Example

​Full HTML Page with Authentication

​Responsive Design

​Mobile-Friendly Layout

​Full-Height Chat Experience

​Content Security Policy (CSP)

​Best Practices

Security

Responsive Design

Loading State

Accessibility

​Troubleshooting

Overview

Basic Implementation

Recommended Iframe Attributes

src (Required)

width

height

style

User Authentication

Understanding User Authentication vs Contact Updates

Secret Key

URL Parameters

user_hash

user_id

user_name

user_avatar

Authenticated Implementation

Frontend Code

Backend Hash Generation

Complete Example

Full HTML Page with Authentication

Responsive Design

Mobile-Friendly Layout

Full-Height Chat Experience

Content Security Policy (CSP)

Best Practices

Troubleshooting