Last updated: 23/05/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.

​
Limitations

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