Last updated: 16/06/2025

Best practices

1. Ensure responsiveness for mobile devices

To guarantee optimal responsiveness and prevent the agent UI text from appearing too small on mobile devices, include the following HTML tag within the <head> section of your webpage:

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

This meta tag ensures proper scaling and a good user experience across various devices.

2. Control embedded agent UI dimensions

You can manage the size and position of the agent UI by passing parameters to its style attribute. If necessary, you can also wrap the <mindset-agent> tag within a parent <div> container.

For example:

<mindset-agent
       agentUid="1rLosTJfVV0Ew9FPDfB7"
       style="width: 80%; height: 100%; display: block;">
   </mindset-agent>

3. Customize embedded agent UI appearance

The <mindset-agent> tag allows for customization of the following:

  • Agent UI Width
  • Agent UI Height
  • Agent UI Background Color: This is only visible for a few milliseconds while the UI loads completely.

Example with background color:

<mindset-agent
                   agentUid="1rLosTJfVV0Ew9FPDfB7"
                   style="width: 100%; height: 100%; display: block; background-color: tomato;">
               </mindset-agent>

You can also apply additional standard CSS parameters as needed:

<mindset-agent
                   agentUid="v8srU0hv88BeWBDcirSm"
                   style="transition: 0.3s; position: fixed; bottom: 0px; right: 0px; width: 100%; height: calc(100%); margin: 0px; border-radius: 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; background-color: rgb(255, 255, 255); overflow: hidden; transform-origin: right bottom; transform: scale(1); z-index: 9999; opacity: 1; pointer-events: auto; display: block;">
               </mindset-agent>

4. Agent UI responsiveness for Videos and Segments

The agent UI is designed to be responsive and will adjust content based on the viewer’s screen size. When video content is played, a “Segment” area allows users to navigate between video segments.

The display of the segment area depends on the screen width:

  • Right of the video: If the screen width is greater than 1056px.
  • Below the video: If the screen width is less than 1056px.

5. Agent access granted by Agent Sessions

If you embed your agents and provision the knowledge context through the agent Sessions mechanism and APIs, you have the full control over agents’ access.

For example, as seen in the tutorial, when you create an AgentSession:

const requestBody = {
  {
    agentUid: "v8srU0hv88BeWBDcirSm",
    externalUserId: "user-x123456",
    contextUids: ["qZJGsjytbM5fL15sfBui", "3am8rolEPXx3j0n132Bf"]
 }
};

You then give access to the agentUid v8srU0hv88BeWBDcirSm for the user user-x123456 (remember that the externalUserId is also passed to the embed agent SDK via the SDK Users auth API, so the Mindset system recognizes the user accordingly)

In the Agent settings (Mindset app admin), there is an Access tab where two types of access can be set:

  • Open access - all app users
  • Restricted Access - only users with specified account membership

We recommend selecting the restricted access (without assigning any accounts) type because if the agent is restricted, then only users who have been granted access through an agent session will be able to communicate with it.

6. Agent access granted by Account membership

Without the agent sessions mechanism, agents access is managed via the SDK users API.

When creating the user session (see authentication), you can specify the accountUids to which the user should be added. This is done by passing the accountUids array in the request body:

{
    "externalId":"user-x123456",
    "accountUids":["accountUid1", "accountUid2"]}
}

if accountUids are provided, the user will be granted to use the agent only if the agent settings are :

  • Open access - all app users

OR

  • Restricted Access with one of the account selected (accountUid1, accountUid2).

In most cases we recommend using agent sessions so you control the users permissions without managing accounts in your Mindset app admin area.

Limitations

Our current implementation still limits the number of agents per page to one. We are working to remove this limitation and will let you know as soon as it is lifted.