Embed an agent in your application

This page provides a guide for embedding a Mindset AI agent in a Multiple Page Application.If you want to embed a Mindset AI agent in a Single Page Application (e.g., React, Vue, Angular), we recommend reading this page to understand the main concepts, then check out the Sample code for Single Page Applications.

Quick Start

There are 3 steps to embed a Mindset AI agent in your application:

Add the SDK Script

Include the SDK script in your HTML:

<script src="MINDSET-SERVER-URL/mindset-sdk3.umd.js"></script>

Replace MINDSET-SERVER-URL with the URL provided by Mindset AI.

Add the Agent HTML Tag

Place the <mindset-agent> tag where you want the chat interface to appear:

<mindset-agent 
    agentUid='YOUR-AGENT-UID'
    style='width: 100%; height: 600px; display: block; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 12px;'>
</mindset-agent>

Replace YOUR-AGENT-UID with the Agent UID you want to embed.

Initialize the SDK

Call the mindset.init() method with your configuration:

<script>
   mindset.init({
    appUid: "YOUR-APP-UID",
    enableVoice: true
    })
</script>

Replace YOUR-APP-UID with your application UID.

Getting Your Configuration Parameters

You can get your configuration parameters in two ways:

Option 1: Agent Management Studio Dashboard

Go to your Agent Management Studio dashboard and view your live agents. For each agent, you can display full deployment instructions with your specific configuration parameters already populated.

Option 2: Contact Mindset AI

Ask the Mindset AI team directly for these parameters:

MINDSET-SERVER-URL

string

required

The SDK server URL configured for you by the Mindset AI team

YOUR-APP-UID

string

required

Your application UID provided by Mindset AI (often your company name)

YOUR-AGENT-UID

string

required

The UID of the agent you want users to chat with. Find this in the agent settings in the Agent Management Portal.

Authentication Methods

SDK 3.0 supports two authentication methods:

Anonymous Access
Authenticated Access

For agents using anonymous access, you’ll need to whitelist the URLs where your agent will be embedded. Please contact your CS manager to help you do so.

Complete Example

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="MINDSET-SERVER-URL/mindset-sdk3.umd.js"></script>

        <script>
            mindset.init({
                appUid: "YOUR-APP-UID",
                enableVoice: true
            })
        </script>   
    </head>

    <body>
        <div class="main-container">
            <h1>Mindset Embedded Agent</h1>
        
            <mindset-agent 
                agentUid='YOUR-AGENT-UID'
                style='width: 100%; height: 600px; display: block; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 12px;'>
            </mindset-agent>
        </div> 
    </body>
</html>

For agents using authenticated access, provide a fetchAuthentication method that retrieves the auth token from your backend.

The fetchAuthentication Method

Set the fetchAuthentication parameter in mindset.init():

mindset.init({
    fetchAuthentication: getAuthToken,
    appUid: "YOUR-APP-UID",
    enableVoice: true
})

Sample Implementation

Here’s an example getAuthToken method that fetches the token from your backend:

async function getAuthToken() {
    const userAuthTokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`;
    // e.g. https://mycompany-backend/api/getusertoken

    try {
        const headers = {
            "accept": "application/json",
            "Content-Type": "application/json"
        };
        const response = await fetch(userAuthTokenServerUrl, {
            method: 'POST',
            headers: headers
        });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const responseData = await response.json();
        return responseData.authToken;
    } catch (error) {
        console.log('Error fetching auth token:', error);
        throw error;
    }
}

Complete Example

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="MINDSET-SERVER-URL/mindset-sdk3.umd.js"></script>

        <script>
            async function getAuthToken() {
                const userAuthTokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`; 
                // e.g. https://mycompany-backend/api/getusertoken/${currentUserId}

                try {
                    const headers = {
                        "accept": "application/json",
                        "Content-Type": "application/json"
                    };
                    const response = await fetch(userAuthTokenServerUrl, {
                        method: 'POST',
                        headers: headers
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const responseData = await response.json();
                    return responseData.authToken;
                } catch (error) {
                    console.log('Error fetching auth token:', error);
                    throw error;
                }
            }

            mindset.init({
                fetchAuthentication: getAuthToken, 
                appUid: "YOUR-APP-UID",
                enableVoice: true
            })
        </script>   
    </head>

    <body>
        <div class="main-container">
            <h1>Mindset Embedded Agent</h1>
        
            <mindset-agent 
                agentUid='YOUR-AGENT-UID'
                style='width: 100%; height: 600px; display: block; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 12px;'>
            </mindset-agent>
        </div> 
    </body>
</html>

Shadow DOM Support

If you’re rendering the agent inside a Shadow DOM (commonly used in web components for style encapsulation), you need to explicitly pass the agent element to the mindset.init() method.

For Standard Agent Embedding

When using <mindset-agent> inside Shadow DOM:

const agentElement = shadowRoot.querySelector('mindset-agent');

await window.mindset.init({
  appUid: "YOUR-APP-UID",
  element: agentElement  // Pass your Shadow DOM element
});

For Dynamic Views (Container Mode)

When using <mindset-container> for dynamic agent switching inside Shadow DOM:

const containerElement = shadowRoot.querySelector('mindset-container');

await window.mindset.init({
  appUid: "YOUR-APP-UID",
  fetchAuthentication: yourAuthFunction,
  container: containerElement  // Use container parameter for dynamic views
});

Note: Shadow DOM is typically used in web components to isolate styles and markup. If you’re not using web components or Shadow DOM, you don’t need these parameters.

Customization Options

Customize UI Colors

The agent UI includes a default theme color palette, but you can customize it by passing a theme parameter to mindset.init().

Agent UI Color Theme

Learn how to customize colors, gradients, and visual styling

Customize Fonts

The agent UI includes a default font, but you can customize it by passing a customFontTheme parameter to mindset.init().

Agent Fonts Customization

Learn how to apply custom fonts to your agent interface

Flexible Agent UI

The <mindset-agent> tag can be wrapped in any <div> element on your page. For a more flexible UI that remains visible without being intrusive, enable Flexible Agent UI mode.

Flexible Agent UI

Learn how to create floating, expandable agent interfaces

Overview

Integrate Agent Chat SDK 3

Agent Chat SDK 3: Client-side Integration APIs

Data channels

Integrate Agent Chat SDK 2

MCP Server Integration

Agent Builder SDK Integration

API Overview

API playground

Webhooks

Quick Start

Getting Your Configuration Parameters

Option 1: Agent Management Studio Dashboard

Option 2: Contact Mindset AI

Authentication Methods

Complete Example

The fetchAuthentication Method

Sample Implementation

Complete Example

Shadow DOM Support

For Standard Agent Embedding

For Dynamic Views (Container Mode)

Customization Options

Customize UI Colors

Agent UI Color Theme

Customize Fonts

Agent Fonts Customization

Flexible Agent UI

Flexible Agent UI

​Quick Start

​Getting Your Configuration Parameters

​Option 1: Agent Management Studio Dashboard

​Option 2: Contact Mindset AI

​Authentication Methods

​Complete Example

​The fetchAuthentication Method

​Sample Implementation

​Complete Example

​Shadow DOM Support

​For Standard Agent Embedding

​For Dynamic Views (Container Mode)

​Customization Options

​Customize UI Colors

Agent UI Color Theme

​Customize Fonts

Agent Fonts Customization

​Flexible Agent UI

Flexible Agent UI

Quick Start

Getting Your Configuration Parameters

Option 1: Agent Management Studio Dashboard

Option 2: Contact Mindset AI

Authentication Methods

Complete Example

The fetchAuthentication Method

Sample Implementation

Complete Example

Shadow DOM Support

For Standard Agent Embedding

For Dynamic Views (Container Mode)

Customization Options

Customize UI Colors

Customize Fonts

Flexible Agent UI