Embed code analysis

This section is for more experienced users (such as web developers and beyond).

In this section, we'll take a closer look at the embed code for AIsuru Agents. First of all, the embed code is not an <iframe>: the Agent can interact with other elements and perform actions within the page.

Advantages of AIsuru's script over an iframe

AIsuru integrates into websites using Web Components instead of an iframe, which provides:

• Flexibility: the script can interact directly with elements on the host page;

• Interactivity: it can access and manipulate the page's DOM;

• Dynamic code injection: lets you add functionality in real time;

• Access to page content: can provide contextual responses based on the site's content;

• Advanced customization: offers more possibilities for tailoring the user experience.

Code structure

Below is an example of an AIsuru Agent embed code 👇

<script type="module" src="https://esm.run/@memori.ai/memori-webcomponent/dist/memori-webcomponent.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@memori.ai/memori-react/dist/styles.min.css" />

<memori-client
  memoriName="Agent_Name"
  ownerUserName="YourUsername"
  memoriID="Agent-ID"
  ownerUserID="Owner-User-ID"
  tenantID="www.aisuru.com"
  apiURL="https://backend.memori.ai/api/v2"
  engineURL="https://engine.memori.ai/memori/v2"
  baseURL="https://www.aisuru.com"
  uiLang="IT"
  spokenLang="IT"
  layout="FULLPAGE"
  multilingual="true"
  showShare="true"
  tag="👉"
  pin="123456"
  integrationID="Integration-ID"
  context="OBJECT:PHONE"
  initialQuestion="Hi, how can I help you?"
/>

Embed code field definitions

The embed code contains several attributes you can modify to customize your Agent's behavior:

• memoriName: the name of your Agent;

• ownerUserName: the creator's username on AIsuru;

• memoriID: the unique identifier of your Agent;

• ownerUserID: the unique identifier of your AIsuru account;

• tenantID: the AIsuru tenant URL (www.aisuru.com or your PaaS address);

• apiURL: the AIsuru API URL;

• engineURL: the AIsuru engine URL;

• baseURL: the AIsuru base URL;

• uiLang: the user interface language (e.g. "EN" for English);

• spokenLang: the language spoken by the Agent (e.g. "IT" for Italian);

• layout: the interface layout type (e.g. "FULLPAGE" for full page);

• multilingual: enables or disables multilingual support;

• showShare: shows or hides the chat and Agent sharing option;

• integrationID: the integration identifier;

• tag and pin: tag and pin of the Role assigned to this layout; anyone interacting with the Agent through this widget will have access to the content and customizations of the specified role;

• context: the initial context;

• initialQuestion: the opening question the Agent will send to the user.

Important: Available parameters

The parameters listed above are the only officially supported parameters in the AIsuru embed code. There are no other parameters configurable directly through the <memori-client> tag attributes.

Any advanced visual customization (colors, dimensions, positioning, hiding specific elements) or additional functionality must be implemented through:

• Custom CSS applied to your web page;

• JavaScript scripts for advanced interactions;

• Code snippets configured in the Agent (see dedicated section).

Advanced customization

To further adapt the Agent to your site's needs using code snippets or custom CSS on your web page:

• Code snippets (CSS and Javascript) -> by triggering styles (and firing events) when a specific user message is received, you can use code snippets to create advanced interactions with the entire web page.

• On your web page -> your style will be applied to the page immediately, without waiting for the user to start a conversation or ask specific questions.

Customization can affect various interface elements. For example, you could change the chat style:

• Agent responses (in general)

.memori-chat--bubble.memori-chat--with-addon {
  color: #000; /* to change the text color */
  background-color: #f0f0f0; /* to change the background color */
}

• AI-generated Agent responses

.memori-chat--ai-generated {
  color: #000; /* to change the text color */
  background-color: #f0f0f0; /* to change the background color */
}

• User requests

.memori-chat--bubble.memori-chat--user-bubble {
  color: #000; /* to change the text color */
  background-color: #f0f0f0; /* to change the background color */
}

By adding CSS to your web page, you can also hide specific elements: just identify the class or HTML tag and apply the CSS. For example, to hide the image inside the blob:

.memori-button .memori-blob figure {
    opacity: 0;
}

To apply these customizations, add a <style> tag to your HTML page or include it in your existing CSS file.

It's essential to inspect the HTML generated by your Agent to correctly identify the classes and elements you want to modify.

Through these targeted customizations and AIsuru's embed code, you can adapt the appearance of your AI Agent and bring its intelligence wherever your users are online — integrating it seamlessly with your website's design and creating unique interactive experiences that boost visitor engagement, while ensuring a consistent and professional user experience. 💡🚀