Comment on page
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.
In your Openli dashboard, click "Agreements", and copy the public-key of your cookie policy, as shown in the image below:
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
agreement-public-key with the public key of your own cookie policy:<script>
// NOTE: This must be placed AFTER the code snippet for your cookie widget.
legal.document("#cookie-policy-container", "agreement-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.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:
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:
<div id="agreement-container"></div>
...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:<script>
// Replace widget-public-key with a public key of any widget in your project.
legal.load("widget-public-key");
// Replace agreement-public-key with your agreement's public key.
legal.document("#agreement-container", "agreement-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.You can use the
insertMode option to change how and where the agreement is placed in relation to the target element: <script>
legal.load("<<WIDGET PUBLIC KEY>>");
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 |
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.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: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: