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