# Universal Consent Management

{% hint style="warning" %}
This functionality requires an Openli Website Compliance subscription. \
\
It may also require subscriptions for third-party services such as Zapier, Mailchimp, etc.
{% endhint %}

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-*&#x6C;evel 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](https://app.openli.com/) and click *New widget*:

![](/files/Mv4o459FBvBN10aR5MzV)

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

![](/files/MJHcZjdWdyGyZgpEC54A)

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

![](/files/tFb7BFwHWTMzZdUf35V9)

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.

![](/files/mH1TFxl6C4lTKICFLJBR)

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

![](/files/Jb4G4lvtQYuOfn4BQBWM)

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

![](/files/qx2uVb8RJCIgblhopH1f)

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:

```html
<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:

```html
<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:

![](/files/7NEMPYT7W3yrq6wlL7Ps)

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.&#x20;*****Consented*****&#x20;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:*

![](/files/0xI5oRkJDOJf5TZQB4y3)

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.

![](/files/w2FcG4rLe744rK0M3VC7)

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

{% hint style="warning" %}
**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.
{% endhint %}

![](/files/r3o1KjsiOut492FtSbAd)

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.*

![](/files/sBNOXdSu7xGYlRuBj26R)

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.

{% hint style="info" %}
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.*
{% endhint %}

### 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* S*ubscriber to Tag.*

![](/files/DOogXaFwKktS09xCuRqz)

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.

![](/files/YdHUkSkdOawtBOPRJcAJ)

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openli.com/docs/website-compliance/universal-consent-management.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
