Para exibir mais de um ferramenta na mesma página do seu site, o primeiro passo é copiar o código de compartilhamento das ferramentas que serão embedadas.

Para encontrar o código de compartilhamento de uma ferramenta, basta clicar em:

→ Compartilhar → Adicione em uma parte do seu site

Captura de tela 2025-01-20 122937.png

Agora, para que as 2 ferramentas funcionem na mesma página, é necessário fazer um pequeno ajuste no ID da segunda ferramenta para evitar conflitos entre elas.

ID diferente para cada ferramenta: Use o código abaixo como exemplo, neste código, são adicionados duas ferramentas à página:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
    </style>
  </head>
  <body>
    <script src='<https://scripts.gomerlin.com.br/merlin.js>'></script>
    
    <!– Ferramenta 1 –>
    <div style='width: 100%; height: 200px;'></div>
    <div id="merlin-container" style='margin-left: 800px; width: 500px; height: 500px'></div>
    <script>
      Merlin.Container.initFromSource("<https://tools.gomerlin.com.br/chat/89f66140-e819-48aa-bb2e-f729d267f204>", '#merlin-container');
    </script>
    
     <!– Ferramenta 2 –>
    <div style='width: 100%; height: 200px;'></div>
    <div id="merlin-container-2" style='margin-left: 800px; width: 500px; height: 500px'></div>
    <script>
      Merlin.Container.initFromSource("<https://tools.gomerlin.com.br/chat/81783608-27fe-403e-b5e3-6d847f72a4c4>", '#merlin-container-2');
    </script>
  </body>
</html>

Perceba que na Ferramenta 1, o id da ferramenta está como merlin-container, e na Ferramenta 2, o id da ferramenta foi ajustado para merlin-container-2. Essa diferenciação faz com que a identificação das ferramentas sejam diferentes e consequentemente não gerem conflitos entre elas.

No exemplo acima, as ferramentas são do tipo chatbot, mas o processo é o mesmo para ferramentas do tipo quiz e videoflow.

Feito o ajuste de ID, o resultado deve ser:

Captura de tela 2025-01-20 114042.png

Dica Importante:

Se você for adicionar mais bots, lembre-se de mudar o ID das divs para que nenhum ID seja igual. Se mais de uma ferramenta tiver o mesmo ID, isso gerará conflitos de identificação e a ferramenta pode não funcionar adequadamente.

Exemplo: se você precisar adicionar 3 ferramentas na mesma página, os IDs devem ser da seguinte forma:

Ferramenta 1: