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