# 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](https://github.com/memori-ai/memori-webcomponent)

#### 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 <a href="#installazione_233" id="installazione_233"></a>

#### **Installazione CDN**

```html
<!-- 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**

```batch
# npm
npm install @memori.ai/memori-webcomponent
# yarn
yarn add @memori.ai/memori-webcomponent
```

### Utilizzo Base <a href="#utilizzo_base_261" id="utilizzo_base_261"></a>

#### **Implementazione Semplice**

```html
<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 <a href="#utilizzo_avanzato_277" id="utilizzo_avanzato_277"></a>

#### **Con Variabili di Contesto**

```html
<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**

```javascript
const resourceUrl = await memori.asset.getResourceUrl({
  sessionId: sessionID,
  resourceName: "immagine.jpg",
});
```

#### Gestione Eventi <a href="#gestione_eventi_303" id="gestione_eventi_303"></a>

```javascript
<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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/frontend/web-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.