Código Personalizado Para Página de Vendas com Typebot e Tagueamento UTM - Bruno Devx - BR Criativus

post #5539

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

Publicado em: 04/07/2024 / Atualizado em: 17/05/2025

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:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=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