Como adicionar uma política de privacidade e cookies Pop-up
Websites
Se você quiser adicionar um pop-up "Aceitar Cookies e Política de Privacidade" à sua página, siga as etapas abaixo:
Passo 1: Clique em "Editar" na página Funil/Website à qual você deseja adicionar o pop-up
Passo 2: Selecione "Adicionar elemento" > role para baixo até Personalizado e selecione "JS/HTML personalizado" > Arraste e solte o elemento para o TOPO da página Funil/Websit
Passo 3: Navegue até o menu Configurações no lado esquerdo > Selecione "Abrir Editor de Códigos> Cole o seguinte código:
<script>
window.hlptcb = {};/*
* Opções editáveis
*/
window.hlptcb.popup_title = 'Aceitar Cookies e Política de Privacidade?'; Título/Título Opcional
window.hlptcb.popup_message = "Este site usa cookies para melhorar sua experiência de usuário. Ao aceitar e fechar o banner de informações sobre cookies ao visitar a página pela primeira vez, você concorda com o uso de cookies ao rolar a página inicial, clicar em um link ou continuar a navegar de outras maneiras.... ';
window.hlptcb.popup_more_title = 'Mais informações';
window.hlptcb.popup_more_link_url = '#';
window.hlptcb.popup_accept_button_title = 'Aceitar 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';
As opções editáveis terminam aqui. Por favor, não altere o código abaixo.
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('Largura da tela: ' + 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 || 'Aceitar 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; preenchimento: 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("classe", "cookie-banner"); hlpt_cb_div.style.setProperty("display", "nenhum");
if(screen.availWidth < 500) hlpt_cb_div.classList.add("cookie-banner-mobile");
document.body.append(hlpt_cb_div); hlpt_cb_update_styles();
console.log('O cookie é mostrado? - ' + 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","aceito");
};
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( "direita", "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( "posição", "relativo"); 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", "ponteiro");
}
</script>
Passo 4: Edite a seção "Opções editáveis" dentro do código como desejar. Você pode editar o título pop-up, a mensagem, os títulos dos botões "Mais informações" e "Aceitar", as cores e muito mais. Edite apenas as informações dentro do ' ', conforme mostrado abaixo para o título (exemplo sublinhado em amarelo). A 2ª Opção Editável é circulada em vermelho abaixo – esta linha é onde você pode editar a mensagem que é exibida. Você também pode adicionar a URL onde o # está na 4ª opção editável.
Passo 5: Clique em "Salvar"
Observação : este artigo destina-se como um "how-to" mostrando-lhe as etapas para criar um pop-up. Verifique com sua equipe de conformidade, RH ou outro especialista jurídico sobre a verborragia específica necessária para a conformidade em sua região.
Last updated
