Este tutorial se aplica para o Elementor Wordpress, mas a lógica é a mesma para qualquer editor de sites.

O processo é bem simples. Vamos lá:

1. Instalar o código na página

Primeiro, vamos instalar o código abaixo numa coluna de HTML:

Código:

<script src='<https://scripts.gomerlin.com.br/merlin.js>'></script>
<script>
Merlin.Popup.initFromSource("<https://app.gomerlin.com.br/popup/25e1dc73-4e22-419a-aea8-1e69da216b16>");

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

waitForElm('.merlin-button ').then((elm) => {
  document.querySelectorAll("#cta-merlin").forEach(function(element) {
    element.addEventListener('click', function(){
      document.querySelector(".merlin-button").click()
    })
  })
});
</script>

Lembrando que a primeira parte do código deve incluir o link do seu bot:

2. Configurar o botão que você quer que seja o gatilho para abrir o botão flutuante

Em seguida, vamos configurar o botão que queremos (no nosso caso o botão ‘Começar grátis’) com os seguintes elementos:

• Link: #
• ID do botão: cta-merlin

Depois é só atualizar a página, publicar o bot dentro do Merlin e pronto!