Universal Consent Management

How to use our Universal Consent Management widget and use webhooks and Zapier to notify other systems of consent.

This functionality requires an Openli Website Compliance subscription. It may also require subscriptions for third-party services such as Zapier, Mailchimp, etc.

Our Universal Consent widgets allow you to collect consent for many purposes, including email marketing, newsletters, and terms and conditions. It works by attaching to an existing form, and inserts a vetted consent text, and registers the consent when the form is submitted. In this guide we will set up email marketing consent collection, linking it to Mailchimp using a webhook to set a tag identifying users that have consented to email marketing. The concept should work on any system that can connect with Zapier, not just Mailchimp.

What do I need before I start?

For this guide you need the following:

  1. An Openli account running a Website Compliance-level subscription.

  2. A Mailchimp account with a tag named Consented (or something similar).

  3. A Zapier premium account to catch the webhook.

  4. A website with a form to collect emails for marketing - in this guide we will use a Shopify site.

Set up the widget

First you need to set up a widget. Go to Widgets in your Openli dashboard and click New widget:

Then select the relevant widget type for your purpose and context. In this example we will use the Sign up for a newsletter option.

Next we select the kind of users your form is for, either Business users or Consumers.

Then we select which privacy policy to link to this widget. If you do not have one already, you will be prompted to do so.

Next we need to select the types of emails we will be sending out.

And finally you get the code needed to use the widget:

This can always be found in the Widgets section. Simply click the widget name to get the code.

Install the widget in the form on the website

The code you'll get for the widget will look something like this:

<script>
    !function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.openli.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();

    legal.widget({
        type: "newsletter",
        widgetPublicKey: "YOUR_WIDGET_PUBLIC_KEY_HERE",
        targetElementSelector: "#legalmonster-newsletter-YOUR_WIDGET_PUBLIC_KEY_HERE",
    });
</script>

<div id="legalmonster-newsletter-YOUR_WIDGET_PUBLIC_KEY_HERE"></div>

Note two things:

  1. The widgetPublicKey will differ from our example.

  2. So will the targetElementSelector, as it is linked to the key.

You will need to insert the script part of the code just below your form and add input selectors for name and email like in my example below on lines 8 and 9:

<script>
    !function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.openli.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();

    legal.widget({
        type: "newsletter",
        widgetPublicKey: "YOUR_WIDGET_PUBLIC_KEY_HERE",
        targetElementSelector: "#legalmonster-newsletter-YOUR_WIDGET_PUBLIC_KEY_HERE",
        nameInputSelector: "#YOUR_NAME_INPUT_SELECTOR_ID",
        emailInputSelector: "#YOUR_EMAIL_INPUT_SELECTOR_ID",
    });
</script>

The div section of the generated code must be placed inside your form to allow our script to latch on to the form and place the necessary legal text as well as collect the consent when the form is submitted. The consent text will be placed in the same position as where you include the div in your form. I have made an example of the finished setup, based on a simple email form in a Shopify site:

Notice how the div section is placed inside the form. Be aware that you may need to place it slightly differently in your specific form, depending on where the legal text is placed when loading, and the styling applied by your page's theme.

Linking Openli and Mailchimp via Zapier using webhooks

Now that the widget is up and running we need to link the consents it collects to our Mailchimp account. Before you get started on this part, make sure that you have created a tag called e.g. Consented in Mailchimp, as we will be using this to mark any users that have given consent to email marketing.

Go to your Zapier account and create a new Zap. We suggest you use the app Webhooks by Zapier.

Set the Trigger Event to be Catch Hook:

Next you need to set up the trigger. For that we need to copy the custom webhook URL from Zapier (see screenshot below) to your Openli project's settings, so Openli can trigger your Zapier zap when an email marketing consent is received.

Once copied, go to your Openli dashboard's Settings page. There you will find the webhooks section. Click Add webhook.

IMPORTANT: Make sure you are working on the correct project! If you have created multiple projects, you can see the active project and change to another project in the bottom left corner of the Openli app.

In the webhook setup page, make sure you select the correct project, and then add the custom webhook URL you copied from Zapier. Make sure you select the correct consent event, in our example this is email_marketing_consent_created, and click Create webhook endpoint.

At this point Zapier gives you the option to test the trigger. This is a good idea to do.

Go to your website, and fill in the form and submit the name and email. Then go to your zap setup and test the trigger. You should receive data containing information on the submission.

For extra safety, you could insert a filter in the zap that ensures that it only continues if the event name exactly matches email_marketing_consent_created.

Linking the zap to Mailchimp to activate your Consented tag

Next, we will link the zap to Mailchimp to make it add a tag to the subscriber. For the next step in your zap, choose the Mailchimp app and select event Add Subscriber to Tag.

Then you choose your Mailchimp account, which you will need to log in to as part of this process. Once the account is chosen, you set up the action by selecting the audience you want to affect, the tag you want to add to users (in this case the Consented tag that you have made in your Mailchimp account before starting this guide), and the email address.

You should select the Consent User Email field as the value for the Email Address option.

Then all you need to do is turn on the zap and you should be good to go. We suggest that you test the action by filling in your form and submitting it, and then going back to your zap setup and running the test action. You can also go to your Mailchimp account and check that the newly submitted test has the Consented tag. You can now use the Consented tag in Mailchimp to filter your subscribers and send (or not!) the appropriate emails. The general principles of this guide will work on any system that integrates with Zapier, and even any system that supports receiving webhooks directly, without needing to use Zapier.

Last updated