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).
  • 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.