# Create and manage sharing layouts

AIsuru offers powerful customization tools through layouts, which let you tailor the look and behavior of your AI Agent for different contexts and platforms. This feature is essential for **creating tailored user experiences** and improving the effectiveness of your virtual assistant.

### What is a layout?

Sharing layouts are preset templates that make it easy to embed your Agent on different platforms or websites. Think of them as **templates you can use to display your Agent in various ways**. Each layout has its own individual link.

### Creating a new layout

To start customizing your AI Agent's experience:

1. **Go to the "Share me" section** of your Agent;
2. Click **"Add layout"** in the top right corner.

### Basic layout configuration

#### Basic information

1. Give your layout a **name**;
2. Choose the **layout type**:
   * FULLPAGE: for immersive, full-page experiences;
   * CHAT: compact format for website integrations;
   * ZOOMED\_FULL\_BODY: ideal for displaying both the 3D avatar and the chat;
   * TOTEM: optimized for touchscreen devices.

{% hint style="info" %}
WEBSITE\_ASSISTANT and HIDDEN CHAT layouts are also available — these are purpose-built formats for [Agents embedded in other websites](/en/sharing/share-your-agents/website-embed.md). To select these layout types, see the [advanced guide](/en/sharing/advanced/advanced-ui-customization.md).
{% endhint %}

#### Layout preview

While configuring your layout, you can see a **real-time preview** of how it will look in the "Preview" section on the right side of the screen. This lets you:

* See the selected layout immediately
* Check how your Agent looks with the customizations applied
* Review your changes before saving

{% hint style="info" %}
💡 The preview updates automatically as you change layout settings, so you can refine your Agent's appearance in real time.
{% endhint %}

#### Visual customizations

Among the various settings for your new layout, you can:

1. Upload a **custom background** (PNG, JPG, JPEG, GIF, maximum 2MB);
2. Apply a **blur effect** to the background to improve readability;
3. Select the **inner theme** (light or dark) for the chat interface;
4. Configure your **Avatar**; you can choose between:
   1. A default avatar (*blob*);
   2. A custom avatar;
   3. A custom 3D model;
   4. An animated profile picture.
5. **Colors**: choose which colors define your Agent (text and buttons) using the color picker.

💡 A custom avatar can make your Agent more memorable. Make the most of it!

#### Customizing the interface

You can also customize the interface elements using the dedicated toggles:

1. **Audio**: enable or disable audio for your Agent;
2. **AI indicator**: when enabled, AI-generated responses will be marked with the icon ;
3. **"Why this response?"**: when enabled, each response will have a  button that, when pressed, shows the content that helped AIsuru formulate the answer;
4. **Show reasoning**: if you're using a model with reasoning capabilities, you can choose to show the reasoning process to the end user during the conversation. By default, reasoning is only visible in the "Conversations" tab for Agent managers, since it may contain sensitive information or internal logic;
5. **Share**: enables sharing options directly from the widget, letting users:
   * Share the Agent via direct link;
   * Share the current conversation with a specific link;
   * Use integrated social platforms (Facebook, Twitter, LinkedIn, WhatsApp, Telegram, Email);
   * Generate and download QR codes for sharing.
6. **File upload**: when enabled, users can upload content during the conversation by clicking the dedicated button. When activated, users can choose between:
   * **Upload document**: for text files (PDF, DOC, TXT) that the Agent will analyze
   * **Upload image**: for images (JPG, PNG, GIF) that the AI will analyze to provide descriptions or responses based on visual content

{% hint style="info" %}
**Image upload requires a model that supports computer vision.**
{% endhint %}

#### Multilingual

Within the layout, you can enable or disable the multilingual feature, which automatically translates questions and answers.

The multilingual option is particularly important for:

* **Agents that use content** -> automatic translation allows the Agent to:
  * Translate user questions into the language of the content, improving the search for relevant answers;
  * Translate responses into the user's language.
* **Administrators who need to** [**monitor conversations**](/en/analytics/agent-analysis/conversations.md) -> all conversations will be translated into the Agent's language, regardless of the language used by the user.

Multilingual supports: Italian, English, German, Spanish, French, Portuguese, Ukrainian, Russian, Polish, Finnish, Greek, Arabic, Chinese, and Japanese.

{% hint style="info" %}
**Generative AI can respond in any language** even without enabling multilingual.
{% endhint %}

### Advanced layout configuration

If you're a more experienced user, you can apply much more significant customizations to your layouts. Let's look at the last three sections 👇

### Embed code

After configuring the layout, AIsuru will automatically generate an [embed code](/en/sharing/embed-code.md). You'll find this code in the "Embed code" section. Use it to [share your Agent on other websites](/en/sharing/share-your-agents/website-embed.md)!

#### SEO optimization (for Google, Bing, and all search engines)

In this section you can customize:

* Page title (*title*);
* Page description (*meta description*);
* Canonical URL;
* Preview image for social media.

Once you've customized these elements, **add the code to your web page**.

#### Advanced parameters

In the advanced parameters you can customize:

* The **initial context** -> if configured, every time a user starts a chat, a specific [context](/en/agent-training/advanced/content-customization/context-topics-and-labels.md) will be set;
* The **opening question**: hidden from the user; if set, the user will see the AI's response as the first welcome message;
* The [**timeout**](/en/agent-training/advanced/content-customization/using-timeout.md) (in seconds);
* The [**Role**](/en/agent-training/advanced/content-customization/assigning-contents-to-roles.md): anyone accessing your link will automatically be identified with the selected role;
* **Default language** and **interface language**.

Remember that **all the settings applied so far will apply to this specific layout**, which has its own dedicated link.

### Managing multiple layouts

Managing different layouts for the same Agent lets you:

* Adapt the experience to different channels (web, mobile, kiosk);
* Customize the interaction for different user segments;
* Test different configurations to optimize engagement.

**Default layout**

You can set a layout as the default by checking the appropriate box in the layouts table.

**Important**:

* **There can only be one default layout per Agent**
* The default layout is used automatically in two cases:
  1. When someone accesses your Agent's main link without specifying a particular layout
  2. **When you use the "Try" button** in the Agent management sidebar

If you don't set any layout as default:

* The main link will show a basic version of the Agent
* The "Try" button will open a simple chat with the default blob avatar

{% hint style="info" %}
💡 **Tip**\
Always set a layout as default to ensure a consistent experience both for testing and for users accessing your Agent.
{% endhint %}

### Tips for effective use

* **Make the most of visual customization** to create engaging and memorable Agents;
* **Use different layouts** to test which configuration works best for your audience;
* **Regularly update your layouts** based on user feedback.

Carefully creating and managing layouts **is essential for delivering a personalized and engaging AI experience**. Experimenting with different configurations will help you find the perfect combination to maximize the effectiveness of your AI Agent — explore all the available options to create a truly unique user experience!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/en/sharing/create-and-manage-sharing-layouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.