Embedding agreements without displaying a widget

If you are not running our cookie widget, you can still embed any policy on your website. Here's how you do it.

To embed your policy on a website, you need to load one of our widgets to load the policy. However, if you aren't using our cookie widget, you would want to avoid unnecessary widgets to pop up. Luckily you can use any of our widgets in stead to activate the policy load.

In this example we'll use our newsletter widget as a non-showing dummy widget to load the policy.

1. Create a container for the policy

First we need to create a container for the policy. It is important that you give this container a unique CSS selector id so we later can target this container.

The container should be placed where you want to load the policy, as it will be loaded inside this container.

Here's how the container should look:

<div id="policy-container"></div>

The ID can be anything unique. We suggest using something recognisable, matching the policy in question like for example:

"DPA-container" or "privacy-policy-container"

2. Create a dummy widget to load the policy

Secondly we need a dummy widget to load the policy.

1. Go to app.openli.com and click widgets in the side menu.

2. In the top right corner click "New widget"

3. Select the cookie widget

4. click save and exit

Setup the script that loads the policy

Finally you are ready to insert the script that loads the policy into the container.

Make sure you have legal.js loading on the page:

<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)}}}();
        </script>

And below that insert this script:

        <script>
            legal.load("DUMMY-WIDGET-PUBLIC-KEY")
            legal.document("#policy-container", "POLICY-PUBLIC-KEY")
        </script>

Note that it is important here that the CSS selector matches the unique ID you gave the policy container in the first step.

You will find the policy's private key in app.openli.com under agreements:

And you'll find the dummy widget's public key under widgets in the app

Once these two script are in, the page should load the policy automatically when opened and no widget is shown.