post

Código Personalizado Para Página de Vendas com Typebot e Tagueamento UTM

Publicado em: 04/07/2024 / Atualizado em: 23/12/2024

Categorias: BlogJavaScript (JS)JSTypebot

Este código abaixo, basicamente permite armazenar os valores do UTM da URL, na sessão do usuário. Assim, ele pode navegar no site, caso tenha mais de uma página, e mesmo assim, os valores do UTM serão enviados para o Typebot.

Abaixo segue um código de exemplo, aplicado a uma página da web:

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="icone.png" />
    <title>Titulo da Página</title>
  </head>
  <body>
    
    <!-- CÓDIGO JS PARA ARMAZENAMENTO DAS TAGS UTM -->
    <script>
    	function getUTMParameters() {
    		const urlParams = new URLSearchParams(window.location.search);
    		const utmParams = {};
    
    		['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'].forEach(param => {
    			const value = urlParams.get(param);
    			if (value) {
    				utmParams[param] = value;
    			}
    		});
    
    		return utmParams;
    	}
    
    	function storeUTMInSession(utmParams) {
    		if (Object.keys(utmParams).length > 0) {
    			sessionStorage.setItem('utmParams', JSON.stringify(utmParams));
    		}
    	}
    
    	function loadUTMFromSession() {
    		const utmParams = sessionStorage.getItem('utmParams');
    		return utmParams ? JSON.parse(utmParams) : {};
    	}
    
    	const utmParams = getUTMParameters();
    	storeUTMInSession(utmParams);
    
    	const storedUTMParams = loadUTMFromSession();
    
    	const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
    	utmKeys.forEach(key => {
    		if (!storedUTMParams[key]) {
    			storedUTMParams[key] = '';
    		}
    	});
    </script>
    <!-- CÓDIGO JS PARA ARMAZENAMENTO DAS TAGS UTM -->
    
    
    <!-- USANDO O CHATBOT VIA MODAL NA PÁGINA -->
    <script type="module">
      import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';

      Typebot.initBubble({
        typebot: "ID_DO_BOT",
        apiHost: "https://URL_DO_BOT",
        prefilledVariables: {
          'utm_campaign': storedUTMParams['utm_campaign'],
          'utm_medium': storedUTMParams['utm_medium'],
          'utm_source': storedUTMParams['utm_source'],
          'utm_content': storedUTMParams['utm_content'],
          'utm_term': storedUTMParams['utm_term'],
        },
        // OPCIONAL
        previewMessage: {
			message: "Chamar no WhatsApp",
			autoShowDelay: 0,
		},
        theme: {
          button: {
            backgroundColor: "#00ff73",
            customIconSrc:
            "https://cdn.wleads.link/static/20240317034959/whatsapp.svg",
          },
          previewMessage: {
            backgroundColor: "#00ff73",
            textColor: "#000",
            closeButtonBackgroundColor: "#00ff73",
            closeButtonIconColor: "#000",
          },
          chatWindow: { backgroundColor: "#fff" },
        },
      });
    </script>
    <!-- USANDO O CHATBOT VIA MODAL NA PÁGINA -->    
    
    <!-- OU -->    

    <!-- USANDO O CHATBOT EMBUTIDO NA PÁGINA -->
    <script type="module">
      import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';
    
      Typebot.initStandard({
        id: "ID_DO_BOT",
        typebot: "ID_DO_BOT",
        apiHost: "https://URL_DO_BOT",
        prefilledVariables: {
          'utm_campaign': storedUTMParams['utm_campaign'],
          'utm_medium': storedUTMParams['utm_medium'],
          'utm_source': storedUTMParams['utm_source'],
          'utm_content': storedUTMParams['utm_content'],
          'utm_term': storedUTMParams['utm_term'],
        }
      });
    </script>
    <typebot-standard id="ID_DO_BOT" style="width: 100%; height: 100vh; "></typebot-standard>
    <!-- USANDO O CHATBOT EMBUTIDO NA PÁGINA -->

    <!-- CSS OPCIONAL -->
	<!-- POSICIONAMENTO -->
    <style>
    typebot-bubble::part(button) {
      bottom: 80px;
    }

    typebot-bubble::part(preview-message) {
      bottom: 140px;
    }
    </style>
    <!-- POSICIONAMENTO -->
    
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>

  </body>
</html>

OBS: Você vai precisar substituir os valores de ID_DO_BOT e URL_DO_BOT para que funcione corretamente. Alem disso, caso tenha mais conteúdos na página, opcionalmente você pode ajudar o height: 100vh para um valor em “pixel” para que não ocupe a altura da tela toda.

Caso você tenha apenas 1 única página, sendo que o usuário não pode navegar entre páginas, você não precisa necessariamente usar este código acima. Neste caso, pode adicionar diretamente o código do Typebot na página, como mostra abaixo:

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="icone.png" />
    <title>Titulo da Página</title>
  </head>
  <body>
    
    <script type="module">
      import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';
    
      Typebot.initStandard({
        typebot: "ID_DO_BOT",
        apiHost: "https://URL_DO_BOT",
      });
    </script>
    
    <typebot-standard style="height: 100vh; "></typebot-standard>
    
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>

  </body>
</html>

ADICIONAL:

Você também pode adicionar uma CLASS personalizada para abrir o chat via botão personalizado na página:

<script>
document.addEventListener('click', function(e) {
    if (e.target.closest('.typebot-open')) {
        e.preventDefault();
        Typebot.open();
    }
});
</script>

No exemplo acima, usei a CLASS .typebot-open para adicionar nos botões da página, para abrir o Typebot.

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/5539

ID de Referência: 5539

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato