Analisi del codice di embed

Questa sezione è riservata agli utenti più esperti (come sviluppatori web e non solo).

In questa sezione, analizzeremo il codice di embed 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.

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 👇

<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 o l'indirizzo della tua PaaS);

• 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;

• integrationID: l'identificativo dell'integrazione;

• tag e pin: tag e pin della Persona 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.

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) -> 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)

.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

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

• Richieste dell'utente

.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:

.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.

È fondamentale ispezionare l'HTML generato dal tuo Agente per identificare correttamente le classi e gli elementi che desideri modificare.

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. 💡🚀