​
Front-end script

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

1. Add the mindset-sdk2.js script

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

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

2. Add the <mindset-agent> HTML tag

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

Replace YOUR-AGENT-UID with the AgentUid you want to embed

3. Provide a method which will be in charge of fetching the authToken from your Back-end

<script>

    async function getAuthToken() {
        const userEmail = 'useremail@domain.com'
        const userAuthokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`

        try {
            const response = await fetch(userAuthokenServerUrl);
            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>

You can learn more about the user email address : User Handling

4. Pass your function to the mindset.init() method

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

Replace YOUR-APP-UID with yours

​
Front-end page full example

Below a sample HTML page including the Javascript script:

<html>
    <head>
        <script src="MINDSET-SERVER-URL/mindset-sdk2.js"></script>

        <script>
            async function getAuthToken() {
                const userEmail = 'useremail@domain.com'
                const userAuthokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`

                try {
                    const response = await fetch(userAuthokenServerUrl);
                    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"
                })

        </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);">
            </mindset-agent>
        </div> 
    </body>
</html>

​
Parameters required for your configuration

  • MINDSET-SERVER-URL your Mindset server URL. This will be provided by the Mindset AI team.
  • YOUR-BACKEND-API-RETURNING-AUTHTOKEN your BE script URL which need in the request to get the user Email and which will ask the Auth Token to your Mindset app instance (see the Backend-end script below).
    Sample URL: https://mycompany-backend/api/getusertoken/${userEmail}
  • YOUR-APP-UID Your appUid is provided by mindset. (it is often just the name of your company).
  • 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 Agent Management Portal.

​
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 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 for more details.