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 <<WIDGET PUBLIC KEY>>
with the public key for any one of your active widgets, and <<AGREEMENT PUBLIC KEY>>
with the public-key of the agreement you wish to show:
<script>legal.load("<<WIDGET 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.
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>>");​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 |
| Replaces the specified target element with the widget |
| Inserts the widget after the specified target element |
| 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:
​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:
You can also use this mode to insert HTML if you write your agreements outside our WYSIWYG editor.