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 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.
Websites provide you with the power to craft customer-facing online spaces. Design an impeccable homepage tailored to your business. Craft compelling landing pages to attract a stream of potential leads. The opportunities are limitless. We have two types of Site Builders; while they are similar they do have different functionality. Letโs review each type of […]
If you are utilizing the updated version (Version 2) of the Website builder, please click the provided link here. How Authorization Works: Additional Steps and Important Information By default, authorization for card payments is not enabled in the system. To activate this feature, a few additional steps are required, outlined below. The system temporarily deducts […]
How Authorization Works: Additional Steps and Important Information By default, authorization for card payments is not enabled in the system. To activate this feature, a few additional steps are required, outlined below. The system temporarily deducts the specified authorized amount from the client’s bank account during the authorization process. If the account does not have […]
Understanding URL Paths will help you be informed on how to best manage and use domains within the system. You will need to have your domain(s) set up, and we have other tutorials that cover in-depth domain knowledge, DNS records, etc. to help you get started. Follow along below to learn specifically about URL paths […]
This article is going to walk through how to transfer your domain Nameservers to Cloudflare Step 1: Add Site In your Cloudflare account, select add site > Input the domain you’d like to add > Select preferred payment plan for domain (Free is a great option) > Wait for CloudFlare to scan for DNS records. […]
This tutorial will show you how to use the XML sitemap feature for your domains. It is a great feature which functions essentially as the blueprint of your website to help with SEO as it indexes the web pages. To utilize the XML sitemap, follow these steps:
This tutorial will walk you through how to set up a domain redirect in your Cloudflare account. (This is assuming youโve already added your domains into Cloudflare. If not, check out our Cloudflare setup tutorial and then come back to this article.) Setting up a redirect means that youโre ensuring the www. and non-www. versions […]
This article will walk through how to redirect domains from the www. version to non-www. version. In this example, we’ll be using Google Domains, but you can follow a similar process with other DNS hosts. NOTE: You will still need to configure BOTH the www and non www versions in your account. Part 1: Setting […]
Global sections are a great way to set up your website efficiently, with sections that will appear on every page. This saves you time, as sections won’t need to be copied over from page to page. A header or footer, for example, are common global sections that appears on the top of most websites. Part […]
