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 <<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>.

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 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:

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:

<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.