Embed your legal agreements

Legal Monster helps you to manage and update your legal agreements. This feature lets you display your important agreements when users will understand them best, at the time they give consent.

Legal.js is currently in beta.

Show an agreement

The display feature requires both a containing element and a JavaScript snippet to work. You can use an existing element, or add a new one where you intend to show the agreement on your site.

For example, if you add the following HTML to your site:

<div id="agreement-target"></div>

...and add the following JavaScript (ensuring that you have included legal.js), replacing <<PROJECT PUBLIC KEY>> with your project's public-key, and <<AGREEMENT PUBLIC KEY>> with the public-key of the agreement you wish to show:

<script>
legal.load("Your widget's public key");
legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>");
</script>

...then the latest version of the agreement with that public-key will be displayed in the <div>.

Note: To use the current version of this method, you must also call legal.load() as shown.

You can also use any CSS selector that matches a single element on your page, for example if you want to use a containing element that you already have.

Immediately after you make a call to legal.document(), legal.js will update the audit trail to record that the user has seen the agreement.

Insertion mode

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

<script>
legal.load("Your widget's 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

Link to a specific section in an agreement

If your agreement's HTML contains elements with id attributes, you can make legal.document() use the browser's built-in ability to scroll them into view. This can be especially useful if you want to link to a particular part of your agreement from another location.

To do this, pass the id of the element you want to be scrolled into view 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, using its public key in place of <<AGREEMENT PUBLIC KEY>>, you can make legal.document() ask the browser to scroll that section into view once the agreement has loaded, using this JavaScript:

<script>
legal.load("Your widget's 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 code similar to this:

<script>
legal.load("Your widget's public key");
// Remove the leading "#" from the returned value, to get the ID.
var targetId = window.location.hash.replace(/#/, "")
legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>", {
insertMode: "append",
elementIdToFocus: targetId,
});
</script>

You can then link to that page with a URL like https://mysite.example/terms#refund-policy and legal.document() will try to scroll the requested section into view.

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.

The reason this does not work automatically is because legal.js has to load your agreement into your page after the browser has already tried to find the element with the id specified in the fragment identifier.

If your page 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:

You can also use this mode to insert HTML if you author your agreements outside our WYSIWYG editor.