Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetEngine: How to Use Borlabs Cookie Plugin with Map Listing

This tutorial describes how the Borlabs Cookie plugin and JetEngine’s Map Listings work together and how you can make the map load on a button click on the front end.

Tutorial requirements: 

Whenever it’s necessary to add a WordPress cookie consent plugin to the website, you should consider its ability to collect cookies and automatically block external media. Borlabs Cookie is, therefore, a viable option. Its Content Blocker feature allows detecting and blocking the Google Maps iFrames, making the map load on a button click. What does it mean for Crocoblock users? Map Listings content built with JetEngine can now be hidden in the front and will require additional action to load. Let’s see how to set it up.

1 Step — Install and activate the Borlabs Cookie plugin

Open the Plugins > Add New directory and upload the cookie notice plugin archive to WordPress by clicking the “Install Now” button. Once it is uploaded, activate the plugin. 

You will be redirected to the Installed Plugins page. Locate the Borlabs Cookie plugin and press the “License” link to continue the installation process.   

borlabs cookie license link in the plugins section

Once you are taken to the License tab in the Borlabs Cookie dashboard, enter your license key into the corresponding field, and press the “Save” button. The license is now active.

borlabs cookie license tab

2 Step — Activate the plugin features on the website

To enable the WordPress cookie plugin features, go to Borlabs Cookie > Settings and activate the Borlabs Cookie Status toggle in the General Conditions section. Press “Save all settings.” Now the plugin is ready for further work.

general settings in borlabs cookie dashboard
NOTE
We won’t be reviewing each and every Borlabs Cookie plugin’s tab in this tutorial. To learn more about all dashboard tabs, you can watch the following plugin overview.

3 Step — Create a Map Listing and configure its settings

Create a Map Listing according to the steps described in the following Map Listing overview

Once done, you are ready to set up and use the WordPress cookie plugin and JetEngine Map Listing integration. 

Content Blocker Tab Overview

Content Blocker is the cookie notice plugin’s functionality that permits Crocoblock license owners to set content restrictions to the Map Listing.

first part of the content blocker tab

4 Step — Enable the Google Maps external source toggle

Please note that it is vital to enable the Google Maps source in the Content Blocker section. If it is inactive, the Map Listing and Borlabs Cookie integration will not perform as needed.

In the Content Blocker section, we can spot the following settings:

  • Name – names of the external content sources are listed here;
  • ID – here are listed the external content sources’ IDs; 
  • Host(s) – you can see the content sources’ hosts here. As explained further, the host is a part of a URL, often the domain;
  • Status – to enable/disable the Content Blocker feature, toggle ON/OFF the toggle next to the desired content source;
  • Delete icon – allows users to delete custom added content blockers, not the default ones;
  • Edit icon – allows users to edit the content blocker’s settings. 

There is the “Add New” button in the upper right corner of the Content Blocker section. It allows users to add a new external content source to the default list.

Below the table is the Tips section, where you can find answers to the most popular questions about Borlabs’s cookie notice plugin.

second part of the content blocker tab

In the General Settings section, the settings are as follows:

  • Host(s) Allow List – you can list here the host(s) that will be recognized by the system and won’t be blocked;
  • Remove iFrames and more in Feeds – activate this toggle to remove iFrames, blocked content, and shortcodes from feeds;
  • Save all settings button. 
third part of the content blocker tab

In the Appearance Settings section, we can see the following settings:

  • Font Family – choose which font you want to use instead of the default one and tick the Enter custom font family checkbox; 
  • Font Size (Base) – set the font size in pixels. Depending on the base font size, all the remaining cookie plugin elements will be adjusted proportionally;
  • Overlay define the background and text color in the HEX format;
  • Opacity – set the percentage of the Overlay visibility;
  • Border Radius – set spacing around the edges of the button in pixels;
  • Button Color – adjust the button color using the HEX palette;
  • Button Text Color – adjust the button text color using the HEX palette;
  • Link Color – set the desired link color in the HEX format;
  • Save all settings button. 

In the Reset Default Content Blocker section, there is one functionality only. It allows you to roll custom Content Blocker settings back to default. Tick the Confirmed checkbox and press the “Reset” button if you wish to do so.

5 Step — Check the External Media settings in the Cookies section

Open the Cookies tab in the Borlabs Cookie dashboard, find the External Media section and Google Maps item on the list. Press the pencil-shaped Edit icon.

external media section in the cookies tab

You will see the Google Maps settings. Scroll down to the HTML & JavaScript section and see whether it contains any code. That’s what the Opt-in Code section should look like:

opt-in code for google maps

If it’s empty, copy the code below and paste it into the Opt-in Code section.

<script>if(typeof window.BorlabsCookie === "object") { window.BorlabsCookie.unblockContentId("googlemaps"); }</script>

Scroll down to the bottom of the page and press the “Save all settings” button.

Once you customize the necessary settings, open the Map Listing on the front end. 

Checking Map Listing Content Blocker

Once you configure the Borlabs Cookie plugin correctly, check how it works on the front end. Open the website home page. You will see a default cookie consent pop-up, indicating the sitewide privacy preference.

cookie consent pop-up on the front end

There are two checkboxes on the pop-up: Essential and External Media. Now, if you leave the settings “as is” – meaning that External Media is unchecked – and press the “Save” button, the Map Listing content will not be available immediately.

content blocker on the frontend map listing

Users should click the “Load map” button to remove the banner. If the Always unblock Google Maps checkbox is ticked, the Map Listing won’t be blocked anymore. As soon as the map loads, the page will look like so:

loaded map listing on the frontend

If you check the External Media option and press the “Accept all”/“Save” button, the Map Listing content will load automatically. 

That’s it. Now you know how to use the Borlabs Cookie consent plugin and JetEngine’s Map Listing module to block the Google Maps content on a WordPress website.