# Analisi del codice di embed

{% hint style="danger" %}
Questa sezione è riservata agli utenti più esperti (come sviluppatori web e non solo).
{% endhint %}

In questa sezione, analizzeremo il [codice di embed](/condivisione/codice-di-embed.md) degli Agenti di AIsuru. Innanzitutto, il codice di embed non è un \<iframe>: l'Agente potrà interagire con altri elementi ed [eseguire azioni all'interno della pagina](/avanzate/interfacce-web-come-creare-esperienze-interattive.md).

### Vantaggi dello script di AIsuru rispetto un iframe

AIsuru si integra nei siti web usando i Web Components invece che un iframe, offrendo così:

* **Flessibilità**: lo script può interagire direttamente con gli elementi della pagina ospitante;
* **Interattività**: può accedere e manipolare il DOM della pagina;
* **Iniezione di codice dinamico**: permette di aggiungere funzionalità in tempo reale;
* **Accesso ai contenuti della pagina**: può fornire risposte contestualizzate basate sul contenuto del sito;
* **Personalizzazione avanzata**: offre maggiori possibilità di adattare l'esperienza utente.

### Struttura del codice

Qui sotto trovi un esempio di un codice di embed di un Agente di AIsuru 👇

```html
<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="Nome_Agente"
  ownerUserName="TuoUsername"
  memoriID="ID-dell-Agente"
  ownerUserID="ID-Utente-Proprietario"
  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="ID-Integrazione"
  context="OGGETTO:TELEFONO"
  initialQuestion="Ciao, come posso aiutarti?"
/>
```

### Definizione dei campi del codice di embed

Il codice di incorporazione contiene diversi attributi che puoi modificare per personalizzare il comportamento del tuo Agente:

* `memoriName`: il nome del tuo Agente;
* `ownerUserName`: il nome utente del creatore su AIsuru;
* `memoriID`: l'identificativo unico del tuo Agente;
* `ownerUserID`: l'identificativo unico del tuo account AIsuru;
* `tenantID`: l'URL del tenant AIsuru ([www.aisuru.com](http://www.aisuru.com) o l'indirizzo della tua [PaaS](/paas.md));
* `apiURL`: l'URL dell'API di AIsuru;
* `engineURL`: l'URL del motore di AIsuru;
* `baseURL`: l'URL base di AIsuru;
* `uiLang`: la lingua dell'interfaccia utente (es. "EN" per l'inglese);
* `spokenLang`: la lingua parlata dall'Agente (es. "IT" per italiano);
* `layout`: il tipo di layout dell'interfaccia (es. "FULLPAGE" per pagina intera);
* `multilingual`: abilita o disabilita il supporto multilingua;
* `showShare`: mostra o nasconde l'opzione di condivisione chat e agente;
* `integrationID`: l'identificativo dell'integrazione;
* `tag` e `pin`: tag e pin della [Persona](/avanzate/gestione-utenti-persone/creazione-e-gestione-dei-ruoli.md) a cui il layout viene assegnato; chiunque interroghi l'Agente da questo widget avrà accesso ai contenuti e alle personalizzazioni della "persona" indicata;
* `context`: il contesto iniziale;
* `initialQuestion`: la domanda iniziale che l'Agente porrà all'utente.

**Importante: Parametri disponibili**

I parametri elencati sopra sono **gli unici parametri ufficialmente supportati** dal codice di embed di AIsuru. Non esistono altri parametri configurabili direttamente tramite gli attributi del tag `<memori-client>`.

Qualsiasi **personalizzazione estetica avanzata** (colori, dimensioni, posizionamento, nascondere elementi specifici) o **funzionalità aggiuntive** deve essere implementata attraverso:

* **CSS personalizzato** applicato alla tua pagina web;
* **Script JavaScript** per interazioni avanzate;
* **Snippet di codice** configurati nell'Agente ([vedi sezione dedicata](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/gestione-dei-testi-preformattati-snippet-di-codice.md)).

### Personalizzazione avanzata

Per adattare ulteriormente l'Agente alle esigenze del tuo sito con snippet di codice o con del codice CSS personalizzato nella tua pagina web

* [**Snippet di codice (CSS e Javascript)**](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/gestione-dei-testi-preformattati-snippet-di-codice.md) -> attivando lo stile (e scatenando eventi) al ricevimento di un messaggio specifico dell'utente, potrai sfruttare gli snippet di codice per creare interazioni avanzate con l'intera pagina web.
* **Della tua pagina web** -> il tuo stile sarà applicato alla pagina fin da subito, senza dover aspettare che l'utente inizi una conversazione o faccia domande specifiche.

La personalizzazione può interessare diversi elementi dell'interfaccia. Ad esempio, potresti modificare lo stile delle chat:

* **Risposte dell'Agente** (in generale)

```css
.memori-chat--bubble.memori-chat--with-addon {
  color: #000; /* per modificare il colore del testo */
  background-color: #f0f0f0; /* per modificare il colore dello sfondo */
}
```

* **Risposte dell'Agente generate da AI**

```css
.memori-chat--ai-generated {
  color: #000; /* per modificare il colore del testo */
  background-color: #f0f0f0; /* per modificare il colore dello sfondo */
}
```

* **Richieste dell'utente**

```css
.memori-chat--bubble.memori-chat--user-bubble {
  color: #000; /* per modificare il colore del testo */
  background-color: #f0f0f0; /* per modificare il colore dello sfondo */
}
```

Aggiungendo del codice CSS alla tua pagina web sarai anche in grado di **nascondere specifici elementi**: ti basterà identificare la classe o il tag HTML e applicare il codice CSS. Ad esempio, per nascondere l'immagine all'interno del blob puoi utilizzare:

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

Per applicare queste personalizzazioni, aggiungi un tag `<style>` nella tua pagina HTML o includila nel tuo file CSS esistente.

{% hint style="info" %}
È fondamentale **ispezionare l'HTML generato** dal tuo Agente per identificare correttamente **le classi e gli elementi** che desideri modificare.
{% endhint %}

Attraverso queste personalizzazioni mirate e il codice di embed di AIsuru, puoi adattare l'aspetto dell'Agente AI e portare la sua intelligenza ovunque i tuoi utenti si trovino online, integrandolo perfettamente con il design del tuo sito web e creando esperienze interattive uniche che migliorano l'engagement dei visitatori, garantendo un'esperienza utente coerente e professionale. 💡🚀


---

# 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/condivisione/condivisione-sezione-avanzata/analisi-del-codice-di-embed.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.