​
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

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

2. Add the <mindset-agent> HTML tag

 <mindset-agent 
    initial-data=""
    style="width: 70%; height: 90%; margin: auto;">
 </mindset-agent>

**3. Get the authToken from your Back-end script and set the <agent-embed> paramaters

<script>
            let userEmail = 'useremail@mindset.ai'
            
            <!-- Replace 'YOUR-BACKEND-API-RETURNING-AUTHTOKEN' with the actual URL of your back-end script 
            Fore example: http://mycompany-backend/api/getusertoken/${userEmail} -->
            const userAuthokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`
            
            fetch(userAuthokenServerUrl)
            .then((response) => response.json())
            .then(data => {

                const initialData = {
                    appUid: "YOUR-APP-UID",
                    appName: "YOUR-APP-UID",
                    component: "agent",
                    authToken: authToken,
                    options: JSON.stringify({
                        agentUid: "YOUR-AGENT-UID",
                        variables: { tenantId: "mindset." }
                    })
                };        

                let mindsettag = document.getElementsByTagName('mindset-agent')[0];
                mindsettag.setAttribute('initial-data', JSON.stringify(initialData));    
            }
        )
        </script>

​
Front-end page full example

Below a sample HTML page including the Javascript script:

<html>
    <head>
        <!-- Replace 'YOUR-MINDSET-URL' with the actual URL where your Mindset SDK is hosted -->
        <script src="YOUR-MINDSET-URL/mindset-sdk2.js"></script>

        <script>
            let userEmail = 'useremail@mindset.ai'
            
            <!-- Replace 'YOUR-BACKEND-API-RETURNING-AUTHTOKEN' with the actual URL of your back-end script 
            Fore example: http://mycompany-backend/api/getusertoken/${userEmail} -->
            const userAuthokenServerUrl = `YOUR-BACKEND-API-RETURNING-AUTHTOKEN`
            
            fetch(userAuthokenServerUrl)
            .then((response) => response.json())
            .then(data => {

                const initialData = {
                    appUid: "YOUR-APP-UID",
                    appName: "YOUR-APP-UID",
                    component: "agent",
                    authToken: authToken,
                    options: JSON.stringify({
                        agentUid: "YOUR-AGENT-UID",
                        variables: { tenantId: "mindset." }
                    })
                };        

                let mindsettag = document.getElementsByTagName('mindset-agent')[0];
                mindsettag.setAttribute('initial-data', JSON.stringify(initialData));    
            }
        )
        </script>   
        
    </head>

    <body>
        <div class="main-container">
            <h1>Mindset Embedded Agent</h1>
        
            <mindset-agent 
                initial-data=""
                style="width: 70%; height: 90%; margin: auto;">
            </mindset-agent>
        
            
        </div> 
    </body>
</html>

​
Paramaters required for your configuration

  • YOUR-MINDSET-URL your Mindset app URL. This will be configured for you by the Mindset team.
    Sample URL: https://app.mycompany.com
  • 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.