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

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.

     
   const setCustomData = (customData) => {
     const iframe = document.getElementById("zaia-iframe");
     iframe.contentWindow.postMessage({
       type: "set-custom-data",
       payload: customData,
     }, "*");
   }
   
   

   setCustomData({
     userId: '<user_id>',
     email: '<[email protected]',
     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.

<aside> ℹ️

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

</aside>

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.

   <aside> ⚠️

   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.
   

   </aside>

3. Volte para a plataforma e utilize os dados customizados nos estágios utilizando o prefixo @custom.example.