With the latest release, 6.4.4 we have introduced the first iteration of a new Gutenberg Block. A consent area block, where you can add iFrames, inline scripts etc. This is the second Complianz’ Gutenberg block, after the existing legal document block.
How to find the new Consent Area Block
The consent area block is of course available in the editor it self, a quick tip for the block editor is searching in the editor itself; by using ‘/’ and proceed to search for the preferred block; for example:
How to use the Consent Area Block
The consent area block consists of 2 important sections and a couple of settings.
Let’s start with the 2 sections;
- The custom HTML
- The custom Placeholder
You can switch between these two views under block settings, where the default view is custom HTML reserved for your scripts that need consent. On the Consent Area Block itself, you can preview both content options.
Settings
In the above screenshot you will also find ‘Category’ and ‘Service’. We recommend editing these to your wishes, regardless if you use Consent per Service or Consent per Category – you can find this option in the wizard, under Consent – Services.
The categories are now pre-filled with the categories on your banner. For services, you will need to change ‘general’ to the specific service you’re using in the Consent Area Block. In the below example we will use ‘youtube’, for Google Maps use ‘google-maps’ and so forth.
The service should be available on your cookie policy, you can add your own service if needed.
An example with YouTube and a Custom Placeholder
YouTube is automatically blocked by Complianz and a placeholder is set based on the thumbnail of the YouTube video. But you could change this placeholder, by adding a YouTube iFrame with the Consent Area Block and changing the placeholder to HTML/CSS only. This is a basic example, but with HTML and CSS. You could make anything you’d like.
- Add the YouTube iFrame to the default Custom HTML view
- Create a custom HTML placeholder and add it to the ‘Placeholder’ view
You can use the below Codepen for example to create a simple but effective placeholder (please make sure to add your CSS elsewhere, for example your themes custom CSS option, or Appearance – Customize – Additional CSS etc):
New Consent Area features in the future
We will be adding functionality to the Block Editor and this specific block in the future, for example:
See the Pen
Untitled by Aert (@Aert)
on CodePen.
- Services in dropdown by sync and communication with the script center
- Upload images to use as background
- Moving custom CSS to more configuration options in the UI, e.g. colours, font-sizes etc
Ideas?
If you have any ideas, please leave a feature request. Thank you!
