Para adicionar um pop-up de "Aceitar cookies e política de privacidade" à sua página, siga as etapas abaixo:
Etapa 1: Clique em "Editar" na página do funil/website onde deseja adicionar o pop-up.
Etapa 2: Selecione "Adicionar elemento" > Role para baixo até localizar "Código". Arraste e solte o elemento no TOPO da página do funil/website.
Etapa 3: Navegue até o menu "Configurações" no lado esquerdo > Selecione "Abrir editor de código aberto" > Cole o seguinte código:
<script> window.hlptcb = {}; /* * Editable Options */ window.hlptcb.popup_title = 'Accept Cookies & Privacy Policy?'; //Title/Heading Optional window.hlptcb.popup_message = 'This website uses cookies to improve your user experience. By accepting and closing the cookie information banner when first visiting the page you consent to our use of cookies when scrolling the front page, clicking on a link or continuing to navigate in other ways.... '; window.hlptcb.popup_more_title = 'More information'; window.hlptcb.popup_more_link_url = '#'; window.hlptcb.popup_accept_button_title = 'Accept Cookies'; window.hlptcb.popup_style_width = '50%'; window.hlptcb.popup_style_mobile_width = '100%'; window.hlptcb.popup_style_z_index = '100'; window.hlptcb.popup_style_bgcolor = '#333333'; window.hlptcb.popup_style_title_color = '#1571a8'; window.hlptcb.popup_style_more_link_color = '#1571a8'; window.hlptcb.popup_style_button_color = '#FFFFFF'; window.hlptcb.popup_style_button_bgcolor = '#1571a8'; /////Editable options end here. Please don't change the code below. function hlpt_cb_docReady(fn) { if (document.readyState === "complete" || document.readyState === "interactive") { setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } } hlpt_cb_docReady(function() { console.log('Screen Width: ' + screen.availWidth); hlpt_display_cookie_banner(); }); window.hlptcb.popup_title = window.hlptcb.popup_title || ''; window.hlptcb.popup_message = window.hlptcb.popup_message || ''; window.hlptcb.popup_more_title = window.hlptcb.popup_more_title || ''; window.hlptcb.popup_more_link_url = window.hlptcb.popup_more_link_url || ''; window.hlptcb.popup_accept_button_title = window.hlptcb.popup_accept_button_title || 'Accept Cookies'; window.hlptcb.popup_style_width = window.hlptcb.popup_style_width || '50%'; window.hlptcb.popup_style_mobile_width = window.hlptcb.popup_style_mobile_width || '100%'; window.hlptcb.popup_style_z_index = window.hlptcb.popup_style_z_index || '100'; window.hlptcb.popup_style_bgcolor = window.hlptcb.popup_style_bgcolor || '#3D384A'; window.hlptcb.popup_style_title_color = window.hlptcb.popup_style_title_color || '#F04C5B'; window.hlptcb.popup_style_more_link_color = window.hlptcb.popup_style_more_link_color || '#F04C5B'; window.hlptcb.popup_style_button_color = window.hlptcb.popup_style_button_color || '#FFFFFF'; window.hlptcb.popup_style_button_bgcolor = window.hlptcb.popup_style_button_bgcolor || '#F14D5C'; window.hlptcb.popup_html = ''; if(window.hlptcb.popup_message) { window.hlptcb.popup_html += '<div class="hlpt_cb_wrapper">'; if(window.hlptcb.popup_title) window.hlptcb.popup_html += '<p class="hlpt_cb_title"><strong>' + window.hlptcb.popup_title + '</strong></p>'; window.hlptcb.popup_html += '<p>' + window.hlptcb.popup_message; if( window.hlptcb.popup_more_title && window.hlptcb.popup_more_link_url ) window.hlptcb.popup_html += ' <a href="'+window.hlptcb.popup_more_link_url+'">'+window.hlptcb.popup_more_title+'</a>'; window.hlptcb.popup_html += '<div class="hlpt_cb_btn_wrapper"><button id="hlpt_cb_bclose" class="close" type="button" style="border:0px; padding:5px 15px;border-radius: 5px;">'+window.hlptcb.popup_accept_button_title+'</button></div>'; window.hlptcb.popup_html += '</p>'; window.hlptcb.popup_html += '</div>'; } function hlpt_display_cookie_banner() { const hlpt_cb_div = document.createElement("div"); hlpt_cb_div.innerHTML = window.hlptcb.popup_html; hlpt_cb_div.setAttribute("id", "hlpt_cb"); hlpt_cb_div.setAttribute("class", "cookie-banner"); hlpt_cb_div.style.setProperty("display", "none"); if(screen.availWidth < 500) hlpt_cb_div.classList.add("cookie-banner-mobile"); document.body.append(hlpt_cb_div); hlpt_cb_update_styles(); console.log('Is cookie shown? - ' + localStorage.getItem("hlpt_cb_closed")); if (localStorage.getItem("hlpt_cb_closed") != "accepted") { document.getElementById('hlpt_cb').classList.add("cookie-banner-opened"); hlpt_cb_div.style.setProperty("display", "block"); }; var close_buttons = document.getElementsByClassName("close"); for (var i = 0; i < close_buttons.length; i++) { close_buttons[i].addEventListener('click', hlpt_cb_close_banner, false); } } function hlpt_cb_close_banner() { document.getElementById('hlpt_cb').classList.add("cookie-banner-closed"); document.getElementById('hlpt_cb').style.setProperty("display", "none"); localStorage.setItem("hlpt_cb_closed","accepted"); }; function hlpt_cb_update_styles() { document.querySelector(".cookie-banner").style.setProperty( "width", window.hlptcb.popup_style_width ); if(document.querySelector(".cookie-banner-mobile") !== null) document.querySelector(".cookie-banner-mobile").style.setProperty( "width", window.hlptcb.popup_style_mobile_width ); document.querySelector(".cookie-banner").style.setProperty( "position", "fixed" ); document.querySelector(".cookie-banner").style.setProperty( "z-index", window.hlptcb.popup_style_z_index ); document.querySelector(".cookie-banner").style.setProperty( "bottom", "30px" ); document.querySelector(".cookie-banner").style.setProperty( "max-width", "315px" ); document.querySelector(".cookie-banner").style.setProperty( "margin-left", "30px" ); document.querySelector(".cookie-banner").style.setProperty( "right", "30px" ); document.querySelector(".cookie-banner").style.setProperty( "padding", "20px" ); document.querySelector(".cookie-banner").style.setProperty( "display", "none" ); document.querySelector(".cookie-banner").style.setProperty( "align-items", "center" ); document.querySelector(".cookie-banner").style.setProperty( "justify-content", "space-between" ); document.querySelector(".cookie-banner").style.setProperty( "background-color", window.hlptcb.popup_style_bgcolor ); document.querySelector(".cookie-banner").style.setProperty( "color", "#FFFFFF" ); document.querySelector(".cookie-banner").style.setProperty( "border-radius", "5px" ); document.querySelector(".cookie-banner").style.setProperty( "box-shadow", "0 6px 6px rgba(0,0,0,0.25)" ); document.querySelector(".cookie-banner").style.setProperty( "font-family", "system-ui" ); document.querySelector(".hlpt_cb_btn_wrapper").style.setProperty( "margin-top", "20px" ); document.querySelector(".hlpt_cb_wrapper").style.setProperty( "position", "relative" ); if(document.querySelector(".hlpt_cb_wrapper .hlpt_cb_title") !== null) document.querySelector(".hlpt_cb_wrapper .hlpt_cb_title").style.setProperty( "color", window.hlptcb.popup_style_title_color ); if(document.querySelector(".hlpt_cb_wrapper .hlpt_cb_title") !== null) document.querySelector(".hlpt_cb_wrapper .hlpt_cb_title").style.setProperty( "margin-bottom", "15px" ); if(document.querySelector(".hlpt_cb_wrapper a") !== null) document.querySelector(".hlpt_cb_wrapper a").style.setProperty( "color", window.hlptcb.popup_style_more_link_color ); document.querySelector("#hlpt_cb_bclose").style.setProperty( "background-color", window.hlptcb.popup_style_button_bgcolor ); document.querySelector("#hlpt_cb_bclose").style.setProperty( "color", window.hlptcb.popup_style_button_color ); document.querySelector("#hlpt_cb_bclose").style.setProperty( "cursor", "pointer" ); } </script>
Etapa 4: Edite a seção "Opções Editáveis" no código conforme desejar. Por exemplo, você pode personalizar o título, a mensagem, os textos dos botões e as cores. Faça as alterações apenas dentro de ' '
.
Etapa 5: Clique em "Salvar".
Observação: Este guia é apenas um "passo a passo." Para garantir a conformidade na sua região, consulte sua equipe de conformidade, RH ou especialista jurídico sobre a redação necessária.