Advanced UI customization
This section is for more experienced users of the platform.
Your AIsuru Agent's user interface is highly customizable, letting you create a tailored experience for your users.
Accessing customization options
To start customizing your Agent's interface, follow these simple steps:
Log in to the platform;
Select the desired Agent;
Click "Share me" in the side menu;
Find the icon on one of your created layouts and click it to open the widget configuration menu.
Layout configuration
In this section, you can define the overall appearance of your Agent:
Layout: choose from the available options:
TOTEM: A specialized layout that requires specific configuration for message positioning and other elements; ideal for interactive physical installations;
FULLPAGE: Occupies the entire web page for an immersive user experience;
CHAT: A classic chat-style interface for text-based interactions;
WEBSITE_ASSISTANT: Appears as a clickable icon in the bottom right of the site; ideal for discreet web assistance;
HIDDEN_CHAT: A side chat that stays hidden until activated; designed to avoid overlapping with the site's main content;
ZOOMED_FULL_BODY: This layout shows the avatar full-screen and is particularly effective on mobile devices, offering an experience similar to TOTEM but without the complex positioning configurations.
Note: WEBSITE_ASSISTANT and HIDDEN_CHAT are layouts available only through the icon.
Multilingual: enable this option to let users interact with the Agent in different languages 🌍;
Initial context: set the starting context for the conversation;
Opening question: define the first question the Agent will send to the user;
Role: select the role the user will be assigned at the start of the interaction.
Toolbar customization
You can choose which elements to show in the widget toolbar:
Show Login;
Show Share: enables the share button, letting users:
Share the Agent link on various social platforms (Facebook, Twitter, LinkedIn, WhatsApp, Telegram);
Share the current chat with a link specific to the ongoing conversation;
Send the link via email or copy it to the clipboard;
Download a QR code for quick sharing.
Enable audio;
Show Settings.
Chat action configuration
Customize the actions available during a conversation:
Show clear chat button;
Show only latest messages;
Show loading text;
Show copy message;
Show original translation text.
Language settings
Define language preferences for your Agent:
Default language: Set the language the Agent will communicate in (default: Italian);
Interface language: Choose the language for the user interface (default: IT).
Embed code and preview
After configuring all the options, you'll be able to view and copy the generated embed code. This code lets you easily integrate the Agent into your website or application.
If your Agent is set to private, users will always be asked for the access password. You can find the password in the Share me section (below the private link) and in the Agent Settings.
Technical tip
To prevent automatic zoom on touch inputs, add this meta tag to the <head> of your page:
Advanced UI customization lets you create a unique experience tailored to your users. Use these options to adapt your AIsuru Agent to the specific needs of your project, improving engagement and the effectiveness of your AI solution. 🚀
Last updated