Embed your policies and legal agreements

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:
1
<div id="cookie-policy-container"></div>
Copied!
...and add the following JavaScript, replacing agreement-public-key with the public key of your own cookie policy:
1
<script>
2
    // NOTE: This must be placed AFTER the code snippet for your cookie widget.
3
    legal.document("#cookie-policy-container", "agreement-public-key");
4
</script>
Copied!
...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
To embed an agreement on a page without a cookie widget, you must currently also initialise legal.js by running the legal.load() JavaScript function, passing it the public key of a widget in the same project as the agreement you want to show. See the following guide.
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 agreement on your page.
For example, if you add the following HTML to your page where you want the agreement to be shown:
1
<div id="agreement-container"></div>
Copied!
...and add the following JavaScript, replacing widget-public-key with a public key of any widget in the same project, and replacing agreement-public-key with the public-key of your own agreement:
1
<script>
2
    // Replace widget-public-key with a public key of any widget in your project.
3
    legal.load("widget-public-key");
4
    // Replace agreement-public-key with your agreement's public key.
5
    legal.document("#agreement-container", "agreement-public-key");
6
</script>
Copied!
...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.
Advanced options
Insertion mode
You can use theinsertMode option to change how and where the agreement is placed in relation to the target element: 
1
<script>
2
    legal.load("<<WIDGET PUBLIC KEY>>");
3
​
4
    legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>",  {
5
         insertMode: "after",
6
    });
7
</script>
Copied!
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:
1
<section id="refund-policy">
2
    <heading>Our refund policy</heading>
3
    <p>...policy details...</p>
4
</section>
Copied!
...then you can make legal.document() ask the browser to scroll that part into view once the agreement has loaded, using this JavaScript:
1
<script>
2
    legal.load("<<WIDGET PUBLIC KEY>>");
3
​
4
    legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>",  {
5
         insertMode: "append",
6
         elementIdToFocus: "refund-policy",
7
    });
8
</script>
Copied!
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:
1
<script>
2
    legal.load("<<WIDGET PUBLIC KEY>>");
3
​
4
    // Remove the leading "#" from the returned value, to get only the ID.
5
    var targetId = window.location.hash.replace(/#/, "")
6
​
7
    legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>",  {
8
         insertMode: "append",
9
         elementIdToFocus: targetId,
10
    });
11
</script>
Copied!
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:

Policy and agreement management - Previous

Changing an old cookie policy to a new on autopilot

Embedding agreements without displaying a widget

Last modified 4mo ago

Copy link

Contents

How to embed a cookie policy

Find your cookie policy's public-key

Add the embed code to your website

How to embed other legal agreements

Find your agreement's public key

Add the embed code to your website

Advanced options

Insertion mode

Link to a specific part of an agreement