> For the complete documentation index, see [llms.txt](https://zaiadocs.gitbook.io/recursos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zaiadocs.gitbook.io/recursos/agentes/integracoes-e-canais/site-widget/utilizando-dados-personalizados-no-widget-e-iframe.md).

# Utilizando dados personalizados no widget e iFrame

### Descrição

A feature em questão tem como objetivo permitir uma forma alternativa de comunicação entre aplicações web e o widget da Zaia.

#### Onde encontro o tutorial na plataforma?

Basta seguir os passos indicados abaixo:

1. No menu lateral, clique no Agente IA que deseja adicionar ao seu site.
2. Clique em configurações no canto superior direito.
3. Acesse a aba *Onde Usar*.
4. Selecione a opção *Site*.
5. Siga o passo a passo de uma das opções de carregamento (script ou iframe).
6. Navegue até a sessão de definição de dados customizados.
7. Utilize os scripts informados como base para implementação no seu site.

```javascript
//Exemplo de função para enviar dados personalizados para o iframe da Zaia.
const setCustomData = (customData) => {
  const iframe = document.getElementById("zaia-iframe");
  iframe.contentWindow.postMessage({
    type: "set-custom-data",
    payload: customData,
  }, "*");
}
```

```javascript
//Exemplo de Uso
setCustomData({
  userId: '<user_id>',
  email: '<user@example.com',
  sessionToken: '<session_token>',
});
```

### Parametrização por query string

Caso desenvolvimento do script de comunicação não seja possível, implementamos como alternativa a passagem de parâmetros direto na URL do widget.

{% hint style="info" %}
A utilização dessa abordagem torna a atualização dos dados customizados limitada, sendo necessário o recarregamento do script com uma nova URL.
{% endhint %}

1.Selecione uma das formas (iframe ou script) de carregamento do widget na plataforma.&#x20;

<mark style="color:purple;">`Menu lateral > Agente > Configurações > Onde Usar > Site`</mark>&#x20;

2\. Antes de adicionar as tags no site, monte a URL com os dados customizados como indicado.

{% hint style="warning" %}
&#x20;IMPORTANTE: o atributo custom deve ser passado como JSON em string e passar pelo processo de encoding. Exemplo:
{% endhint %}

```javascript
const baseUrl = 'https://platform.zaia.app/embed/chat/<agent_id>';
const custom = encodeURIComponent(JSON.stringify({ example: 123 }));
const finalUrl = `${baseUrl}?custom=${custom}`;

// Prossiga com o carregamento do script passando "finalUrl" em src.
```

3.Volte para a plataforma e utilize os dados customizados nos estágios utilizando o prefixo <mark style="color:red;">`@custom.example.`</mark>