> ## 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.

# Front end

> Embedding an agent, Front-end script

<Tip>
  This page provides a guide for embedding a Mindset agent in a **Multiple Page Application**.

  If you want to embed a Mindset agent in a **Single Page Application** (e.g., React, Vue, Angular), we recommend reading the current page in order to understand the main concepts and then checking the [Sample code for embedding an agent in a Single Page Application](/sdk-api/sdk/sdk2-best-practices#7-sample-code-for-embedding-an-agent-in-a-single-page-application)
</Tip>

## Front-end script

There are 3 steps to follow in your Front-end code in order to embed a Mindset agent:

**1. Add the `mindset-sdk2.js` script**

```javascript theme={null}
<script src="MINDSET-SDK-URL/mindset-sdk2.js"></script>
```

<Warning>
  Replace `MINDSET-SDK-URL` with the URL provided by Mindset AI.
</Warning>

**2. Add the `<mindset-agent>` HTML tag**

```javascript theme={null}
<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>
```

<Warning>
  Replace `YOUR-AGENT-UID` with the AgentUid you want to embed
</Warning>

**3. Call the `mindset.init()` method with your configuration**

```javascript theme={null}
<script>
   mindset.init({
    appUid: "YOUR-APP-UID",
    enableVoice: 'true'
    })
</script>
```

<Warning>
  Replace `YOUR-APP-UID` with yours
</Warning>

<Danger>
  * In the case that your agent uses the **anonymous access**, you have to whitelist URLs in your Agent Management Studio. (For example you can whitelist `http://localhost` while your are testing your code locally)
  * In case your agent uses the **authenticated access**, you have to set the `fetchAuthentication` param in the `Mindset.init()` method. (See above [The fetchAuthentication method](/sdk-api/sdk/front-end#the-fetchauthentication-method) for more details)
</Danger>

## Parameters required for your configuration

In order to get your configuration parameters, you either contact the Mindset AI team or you can directly go on your Agents Management Studio dashboard listing your live agents.
For each of those agents you will be able to display the full deployment instructions with your specific configuration parameters already displayed:

* Sample live agent deployment instructions:

<Frame caption="Sample live agent deployment instructions">
  <img src="https://mintcdn.com/mindsetai/k9DlWgzF2gAFeRpg/images/FrontEnd-agent-deployintstructions.png?fit=max&auto=format&n=k9DlWgzF2gAFeRpg&q=85&s=7c9d37f3deeb90a19368ea82ddc4af70" alt="" width="888" height="679" data-path="images/FrontEnd-agent-deployintstructions.png" />
</Frame>

* You can also ask directly Mindset for the required parameters:

| Parameter           | Description                                                                                                                               |
| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------- |
| **MINDSET-SDK-URL** | This will be provided by the Mindset AI team.                                                                                             |
| **YOUR-APP-UID**    | Your appUid is provided by mindset.                                                                                                       |
| **YOUR-AGENT-UID**  | The agent Uid you want the user chat with. You can find that Agent Uid in the setting of the agent in the <b>Agent Management Portal</b>. |

## The fetchAuthentication method

In case your agent uses the **authenticated access**, you have to set the `fetchAuthentication` param in the `Mindset.init()` method and provide a method which will be in charge of fetching the `authToken` from your [**Back-end authentication script**](/sdk-api/sdk/back-end)

Let's say your front-end method is named `getAuthToken`, you then have to set the `fetchAuthentication` param as follows:

```javascript theme={null}
<script>
   mindset.init({
    fetchAuthentication: getAuthToken,
    appUid: "YOUR-APP-UID",
    enableVoice: 'true'
    })
</script>
```

Below an example of a such method (which basically just fetch the response from your back-end script) to include in your front-end code:

<Accordion title="Sample fetchAuthentication method">
  ```javascript theme={null}
  <script>

      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;
          }
      }

  </script>
  ```
</Accordion>

## Front-end page full example

### With anonymous access

<Accordion title="Sample HTML page embedding an agent:">
  ```javascript theme={null}
  <html>
      <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="MINDSET-SERVER-URL/mindset-sdk2.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>
  ```
</Accordion>

### With authenticated access

<Accordion title="Sample HTML page embedding an agent including the fetchAuthentication method">
  ```javascript theme={null}
  <html>
      <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="MINDSET-SERVER-URL/mindset-sdk2.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>
  ```
</Accordion>

## Customizing the agent UI colors

There is a default **Theme color palette** for the agent UI, but you can customize it by passing a `theme` parameter to the `mindset.init()` method.

Please read the [Agent UI color theme documentation](/sdk-api/sdk/agent-color-theme) for more details about the available options.

## Customizing the agent Font

There is a default **Font** for the agent UI, but you can customize it by passing a `customFontTheme` parameter to the `mindset.init()` method.

Please read the [Agent Fonts customization documentation](/sdk-api/sdk/fonts-customization) for more details about the available options.

## Flexible agent UI

The `<mindset-agent>` tag can be wrapped in any `<Div>` element of your page.

But if you prefer to have a more flexible UI for your agent and you need to let the agent Ui always visible anywhere but without being intrusive, there is the option to enable the **Flexible agent UI** mode.

Please read the [Flexible Agent UI documentation](/sdk-api/sdk/flexible-agent-ui) for more details.