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.
Ask the Mindset AI team directly for these parameters:
The SDK server URL configured for you by the Mindset AI team
Your application UID provided by Mindset AI (often your company name)
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, whitelist your URLs in the Agent Management Studio. Remember to whitelist http://localhost while testing your code locally.
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
