Embed your legal documents

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

Legal.js is currently in beta.

Show a document

The document-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 document on your site.

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

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

...and add the following JavaScript (ensuring that you have loaded and initialized legal.js), replacing <<DOCUMENT PUBLIC KEY>> with the actual key of the document you wish to show:

<script>
legal.document("#document-target", "<<DOCUMENT PUBLIC KEY>>");
</script>

...then the latest version of the document with that public key will be inserted into the <div>. 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 start to track the audit trail to make sure that the user has seen the document.

Insertion mode

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

<script>
legal.document("#document-target", "<<DOCUMENT PUBLIC KEY>>", {
insertMode: "append",
});
</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

append

Inserts the widget after the specified target element

prepend

Inserts the widget before the specified target element

Link to a specific section in a document

If your document'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 document 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 document contains a section like this:

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

...then, using its public key in place of "<<DOCUMENT PUBLIC KEY>>", you can make legal.document() ask the browser to scroll that section into view once the document has loaded, using this JavaScript:

<script>
legal.document("#document-target", "<<DOCUMENT 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 document 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>
// Remove the leading "#" from the returned value, to get the ID.
var targetId = window.location.hash.replace(/#/, "")
‚Äč
legal.document("#document-target", "<<DOCUMENT 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 document, 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 document into your page after the browser has already tried to find the element with the id specified in the fragment identifier.

If your document 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 documents outside our WYSIWYG editor.