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.

//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,
  }, "*");
}

//Exemplo de Uso
setCustomData({
  userId: '<user_id>',
  email: '<[e-mail]',
  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.

A utilização dessa abordagem torna a atualização dos dados customizados limitada, sendo necessário o recarregamento do script com uma nova URL.

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

Menu lateral > Agente > Configurações > Onde Usar > Site

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

IMPORTANTE: o atributo custom deve ser passado como JSON em string e passar pelo processo de encoding. Exemplo:

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 @custom.example.