Developers: Headless Implementation

Complianz is built primarily to work on default WordPress installations. We specifically built for WordPress default integrations to use the unique advantages of a native plugin over a cloud service. However, with headless implementations becoming more popular we’re looking into a hybrid solution, whereby the unique advantages can still be leveraged on a headless environment. Below you will find the first step for developers to integrate Complianz on your headless WordPress website. In future iterations we will look into a seamless, automatic adaption.

Headless Implementation

Below manual configurations are needed to use the plugin on headless. We have prepared these steps in the plugin itself so developers can swiftly add Complianz to your build. Start with adding

define('CMPLZ_HEADLESS', true);

so you can start below steps.

1. Load consent settings
2. Load consent banner
3. Mapping the Rest-API

1. Loading consent settings

Complianz generates a JavaScript file called ‘complianz-headless.js’. This file includes the dynamic variables (settings) that can be configured in the plugin.

The scripts are blocked in the post content using the ‘the_content’ filter. Other scripts  have to be blocked by developers by setting the script type to text/plain, and in the case of the service Google Analytics, giving it a data-service=’google-analytics’ and data-category=’statistics’.

For example:

See the Pen
Untitled by Aert (@Aert)
on CodePen.

When you include ‘complianz-headless.js’  and load it on the front-end, you have enabled consent management on the front-end. Next steps is adding the consent banner and talking with a custom API.

2. Loading the consent banner

The Complianz consent banner consists of a single HTML file and CSS. The latter is loaded by ‘complianz-headless.js’. To complete the consent banner on the front-end you will need to include the HTML file yourself. To generate the HTML file based on the cookie banner settings you can use a query parameter in the back-end:

?generate_headless

This parameter will not only generate the HTML file, but ‘complianz-headless.js’ as well. To change the directory where the generated files are saved, you can use a filter. The default directory is the uploads folder. Now you can include the ‘complianz-headless.js’ and the consent banner HTML. Next is communicating with the server.

• html file: uploads/complianz/html/banner.html
• js file: uploads/complianz/js/complianz-headless.js

3. Mapping Rest Routes to GraphQL

As most headless websites are configured to use GraphQL, the REST API routes from Complianz have to be mapped to GraphQL. Some of these routes are:

• https://domain.com/wp-json/complianz/v1/banner
• https://domain.com/wp-json/complianz/v1/manage_consent_html
• https://domain.com/wp-json/complianz/v1/cookie_data
• https://domain.com/wp-json/complianz/v1/* etc