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.
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.
WordPress Cookie Consent Plugin Setup
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.
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.
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.
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.
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.
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.
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.
Check the External Media settings in the Cookies section
Open the Cookies tab in the Borlabs Cookie dashboard, and find the External Media section and Google Maps item on the list. Press the pencil-shaped Edit icon.
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:
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.
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.
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:
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.