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 chat e agente;integrationID: l'identificativo dell'integrazione;tagepin: 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.
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).
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)
Risposte dell'Agente generate da AI
Richieste dell'utente
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:
Per applicare queste personalizzazioni, aggiungi un tag <style> nella tua pagina HTML o includila nel tuo file CSS esistente.
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. 💡🚀
Last updated