How To Add a Privacy Policy and Cookies Pop Up

Modified on Tue, Dec 6, 2022 at 7:15 AM

If you'd like to add an "Accept Cookies and Privacy Policy" pop-up to your page, follow the steps below:

Step 1: Click "Edit" on the Funnel/Website page you'd like to add the pop-up to

Step 2: Select "Add Element" > Scroll down to Custom and select "Custom JS/HTML" > Drag and drop the element to the TOP of the Funnel/Website page

Step 3: Navigate to the Settings menu on the left side > Select "Open Code Editor > Paste the following code:

<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>

Step 4: Edit the "Editable Options" section within the code as you wish. You can edit the popup title, message, "More Information" and "Accept" button titles, colors, and more. Only edit information within the ' ' as shown below for the title (yellow underlined example). The 2nd Editable Option is circled in red below – this line is where you can edit the message that is displayed. You can also add the URL where the # is in the 4th editable option.

Step 5: Click "Save"

NOTE: This article is intended as a "how-to" showing you the steps to create a popup. Check with your compliance team, HR, or other legal expert regarding specific verbiage required for compliance in your region.