🌐 Web Component
Panoramica
Il Web Component di Memori è un componente web standard che può essere integrato in qualsiasi pagina HTML senza dipendenze da framework specifici. È la soluzione ideale per integrazioni rapide e semplici.
Caratteristiche Principali
Utilizzo immediato in HTML puro;
Nessuna dipendenza da framework;
Configurazione tramite attributi HTML;
Supporto per tutti i browser moderni;
Gestione automatica del ciclo di vita del componente.
Installazione
Installazione CDN
<!-- Importa Web Component -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@memori.ai/memori-webcomponent/dist/memori-webcomponent.js">
</script>
<!-- Importa stili -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@memori.ai/memori-react/dist/styles.min.css"
/>
Installazione NPM
# npm
npm install @memori.ai/memori-webcomponent
# yarn
yarn add @memori.ai/memori-webcomponent
Utilizzo Base
Implementazione Semplice
<memori-client
memoriName="MioMemori"
ownerUserName="utente"
tenantID="tuo-tenant.com"
apiURL="https://backend.memori.ai"
baseURL="https://tuo-url-base.com"
height="500px"
multilingual="true"
></memori-client>
Utilizzo Avanzato
Con Variabili di Contesto
<memori-client
memoriName="MioMemori"
ownerUserName="utente"
tenantID="tuo-tenant.com"
context="LOCATION:Milano,USER_TYPE:premium,CUSTOM_VAR:valore"
height="100vh"
showShare="true"
showSettings="true"
multilingual="true"
></memori-client>
Ottieni URL risorsa
const resourceUrl = await memori.asset.getResourceUrl({
sessionId: sessionID,
resourceName: "immagine.jpg",
});
Gestione Eventi
<script>
// Ascolta i cambiamenti di stato
document.addEventListener("MemoriNewDialogState", (e) = >{
const state = e.detail;
console.log("Nuovo stato dialogo:", state); < span class = "hljs-comment" > // Gestisce risposte specifiche</span><span class="hljs-keyword">if</span> (state.emission?.includes(<span class="hljs-string">"prodotto"</span>)) { mostraDettagliProdotto();}
});
// Gestisce eventi di fine parlato
document.addEventListener("MemoriEndSpeak", () = >{
console.log("Memori ha finito di parlare");
});
// Invia messaggio
function inviaPulsantePersonalizzato() {
window.typeMessage("Ciao dal pulsante personalizzato!");
}
// Invia messaggio nascosto
function inviaComandoNascosto() {
window.typeMessageHidden("sistema:aggiorna", true);
}
</script>
<button onclick="inviaPulsantePersonalizzato()">
Invia Messaggio
</button>
Last updated