> For the complete documentation index, see [llms.txt](https://docs.aisuru.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aisuru.com/frontend/web-component.md).

# Componente Web

### Panoramica

Il Web Component di Memori è un componente web standard che può essere integrato in qualsiasi pagina HTML senza dipendenze da framework. È la soluzione ideale per integrazioni rapide e semplici.

[🔗 Repository GitHub](https://github.com/memori-ai/memori-webcomponent)

#### Caratteristiche principali

* Pronto all'uso in HTML puro;
* Nessuna dipendenza da framework;
* Configurazione tramite attributi HTML;
* Supportato da tutti i browser moderni;
* Gestione automatica del ciclo di vita del componente.

### Installazione <a href="#installazione_233" id="installazione_233"></a>

#### **Installazione CDN**

```html
<!-- Import Web Component -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@memori.ai/memori-webcomponent/dist/memori-webcomponent.js">
</script>
<!-- Import styles -->
<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 di base <a href="#utilizzo_base_261" id="utilizzo_base_261"></a>

#### **Implementazione semplice**

```html
<memori-client
  memoriName="MyMemori"
  ownerUserName="user"
  tenantID="your-tenant.com"
  apiURL="https://backend.memori.ai"
  baseURL="https://your-base-url.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="MyMemori"
  ownerUserName="user"
  tenantID="your-tenant.com"
  context="LOCATION:Milan,USER_TYPE:premium,CUSTOM_VAR:value"
  height="100vh"
  showShare="true"
  showSettings="true"
  multilingual="true"
></memori-client>
```

#### **Ottieni l'URL della risorsa**

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

#### Gestione degli eventi <a href="#gestione_eventi_303" id="gestione_eventi_303"></a>

```javascript
<script>
  // Listen for state changes
  document.addEventListener("MemoriNewDialogState", (e) = >{
    const state = e.detail;
    console.log("New dialog state:", state); < span class = "hljs-comment" > // Handle specific responses</span><span class="hljs-keyword">if</span> (state.emission?.includes(<span class="hljs-string">"product"</span>)) {  showProductDetails();}
  });
  // Handle end-of-speech events
  document.addEventListener("MemoriEndSpeak", () = >{
    console.log("Memori has finished speaking");
  });
  // Send a message
  function sendCustomButton() {
    window.typeMessage("Hello from the custom button!");
  }
  // Send a hidden message
  function sendHiddenCommand() {
    window.typeMessageHidden("system:update", true);
  }
</script>
<button onclick="sendCustomButton()">
  Send Message
</button>
```