Se quiser adicionar um pop-up " Aceitar cookies e política de privacidade" à sua página, siga as etapas abaixo:
Etapa 1: Clique em " Editar" na página do funil/site à qual você deseja adicionar o pop-up
Etapa 2: Selecione " Adicionar elemento" > Role para baixo até Personalizar e selecione "JS/HTML personalizado" > Arraste e solte o elemento no TOPO da página do funil/site
Etapa 3: Navegue até o menu Configurações no lado esquerdo > Selecione " Abrir editor de código > 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 como desejar. Você pode editar o título do pop-up, a mensagem, os títulos dos botões " Mais informações" e "Aceitar", as cores e muito mais. Edite somente as informações dentro de ' ', conforme mostrado abaixo para o título (exemplo sublinhado em amarelo). A segunda opção editável está circulada em vermelho abaixo - essa linha é onde você pode editar a mensagem que é exibida. Você também pode adicionar o URL onde o # está na 4ª opção editável.
Etapa 5: Clique em " Salvar "
OBSERVAÇÃO: este artigo pretende ser um "como fazer", mostrando as etapas para criar um pop-up. Consulte a sua equipe de conformidade, o RH ou outro especialista jurídico a respeito do palavreado específico necessário para a conformidade em sua região.