Embed your policies and legal agreements

Openli helps you to manage and update your cookie policy. This feature lets you embed your cookie policy on any page of your website.

How to embed a cookie policy

Find your cookie policy's public-key

In your Openli dashboard, click "Agreements", and copy the public-key of your cookie policy, as shown in the image below:

Add the embed code to your website

The feature requires both a containing element and a JavaScript snippet to work. You can use an existing HTML element on your page as the container, or add a new one where you want to show the cookie policy on your page.

For example, if you add the following HTML to your page where you want the cookie policy to be shown:

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

...and add the following JavaScript, replacing policy-public-key with the public key of your own cookie policy:

<script>
    // NOTE: This must be placed/run AFTER the code snippet for your cookie widget.
    legal.document("#cookie-policy-container", "policy-public-key");
</script>

...then the latest version of your cookie policy will be displayed inside the <div> element.

If you want to show the cookie policy in an element that already exists on your page, you can use a standard CSS selector that matches it, instead of #cookie-policy-container in the example above.

How to embed other legal agreements

Find your agreement's public key

In your Openli dashboard, click "Agreements", and copy the public-key of your agreement, as shown in the image below for the example of a cookie policy:

Add the embed code to your website

The feature requires both a containing element and a JavaScript snippet to work. You can use an existing HTML element on your page as the container, or add a new one where you want to show the policy on your page.

For example, if you add the following HTML to your page where you want the policy to be shown:

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

...and add the following JavaScript replacing policy-public-key with the public-key of your own policy:

<script>
    // Replace policy-public-key with your policy's public key.
    legal.document("#policy-container", "policy-public-key");
</script>

...then the latest version of your policy will be displayed inside the <div> element.

If you want to show the policy in an element that already exists on your page, you can use a standard CSS selector that matches it, instead of #policy-container in the example above.

Advanced options

Insertion mode

You can use theinsertMode option to change how and where the agreement is placed in relation to the target element:

<script>
    legal.load("<<WIDGET PUBLIC KEY>>"); // Only needed when the page loads no other widget.

    legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>",  {
         insertMode: "after",
    });
</script>

You can change the insertion method to one of the following options:

Insertion mode	Description
replace (Default)	Replaces the specified target element with the widget
after	Inserts the widget after the specified target element
before	Inserts the widget before the specified target element

Link to a specific part of an agreement

You link to a specific part of an agreement using any valid CSS selector, and legal.js will scroll it into view.

It is important that the CSS selector you use only return one element, so the widget can know which element to scroll into view.

Below we have provided an example of targeting a section element in an agreement, using an ID selector to find it.

Scrolling part of an agreement into view using an id attribute

To target part of an agreement using the id of an element, you can pass the id as the value of the elementIdToFocus option. For example, if your agreement contains a section like this:

<section id="refund-policy">
    <heading>Our refund policy</heading>
    <p>...policy details...</p>
</section>

...then you can make legal.document() ask the browser to scroll that part into view once the agreement has loaded, using this JavaScript:

<script>
    legal.load("<<WIDGET PUBLIC KEY>>");

    legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>",  {
         insertMode: "append",
         elementIdToFocus: "refund-policy",
    });
</script>

A simple way to allow dynamic direct linking from other locations is to use the browser's built-in support for fragment identifiers (everything after the # in the URL), and pass that to legal.document().

If you have a page at https://mysite.example/terms that uses legal.document(), and the agreement you display there has a section with an id of refund-policy like in the example above, you can link to that page, and that section, from anywhere by using a link like this:

https://mysite.example/terms#refund-policy (note the #refund-policy part)

and code similar to this:

<script>
    legal.load("<<WIDGET PUBLIC KEY>>");

    // Remove the leading "#" from the returned value, to get only the ID.
    var targetId = window.location.hash.replace(/#/, "")

    legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>",  {
         insertMode: "append",
         elementIdToFocus: targetId,
    });
</script>

This solution is generic, so you can also link to other sections in the same agreement, for example https://mysite.example/terms#cancellation if you have an element with an id of cancellation.

If your agreement does not have any elements with id attributes, you can also use the advanced HTML-editing mode in our WYSIWYG editor to add some. Look for this button in the editor toolbar to edit the HTML code directly: