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

🔗 Repository GitHub

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>