> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mindset.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Embed an agent in your application
> Step-by-step guide for embedding a Mindset AI agent in your web application (frontend)
***
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](/deploy/sdk3/sdk3-best-practices#5-sample-code-for-single-page-applications).
## Quick Start
There are 3 steps to embed a Mindset AI agent in your application:
Include the SDK script in your HTML:
```html theme={null}
```
Replace `MINDSET-SERVER-URL` with the URL provided by Mindset AI.
Place the `` tag where you want the chat interface to appear:
```html theme={null}
```
Replace `YOUR-AGENT-UID` with the Agent UID you want to embed.
Call the `mindset.init()` method with your configuration:
```html theme={null}
```
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:
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:
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 theme={null}
Mindset Embedded Agent
```
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()`:
```javascript theme={null}
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:
```javascript theme={null}
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 theme={null}
Mindset Embedded Agent
```
## 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 `` inside Shadow DOM:
```javascript theme={null}
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 `` for dynamic agent switching inside Shadow DOM:
```javascript theme={null}
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()`.
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()`.
Learn how to apply custom fonts to your agent interface
### Flexible Agent UI
The `` tag can be wrapped in any `
` element on your page. For a more flexible UI that remains visible without being intrusive, enable Flexible Agent UI mode.
Learn how to create floating, expandable agent interfaces