Legal.js

Legal.js is currently in beta.

Install legal.js

It is easy to get started using the legal.js library. Just copy and paste the JavaScript shown below into the header of your web page:

<script>
!function(){var r,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="1.2.4",r="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.error&&console.error("Legal.js snippet included twice on page.");else{for(s.invoked=!0,s.methods=["document","signup","user","ensureContent","enableImpliedConsent"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=r,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}}}}();
legal.load("<<PROJECT PUBLIC KEY>>");
// At this point, you can make further calls on the legal object
</script>

Note: Please make sure to substitute the placeholder <<PROJECT PUBLIC KEY>> with the actual key of your Legal Monster project that you are currently working with. Also, you only need to include this installation snippet once on your page.

The above JavaScript will load the legal.js library asynchronously (meaning that it will not slow down rendering of your web page as it loads) and initialize it with data specific to the project you specified.

After including the snippet, you are now ready to use the widgets as well as other functionality (such as adding name and email information about the visiting user). In the following sections we will explore these subjects in depth. You can choose to call further legal.js functions either by adding lines to the above snippet directly after legal.load("<<PROJECT PUBLIC KEY>>"); or you can simply add the code to other <script> tags on your page; just make sure that any further calls to the library appear further down on the page than the above installation snippet.

Load options

Identify user

Although optional, you should provide the legal.load() method with the identifier parameter in an options object as soon as you know who she is and on all pages where you are sure of their identity. Identifying a user allows us to be sure about who the user is and not just rely on cookies that the user might delete.

Here is an example of identifying your user when initializing with legal.load():

<script>
!function(){var r,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="1.2.4",r="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.error&&console.error("Legal.js snippet included twice on page.");else{for(s.invoked=!0,s.methods=["document","signup","user","ensureContent","enableImpliedConsent"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=r,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}}}}();
legal.load("<<PROJECT PUBLIC KEY>>", {
identifier: "<<USER ID>>",
});
</script>

In the above snippet, <<USER ID>> refers to a value that you substitute with a unique identifier for the user. We recommend using database ID's instead of simple email addresses or usernames, because database IDs tends to be consistent over time. That guarantees that if the user changes their email address, you can still recognise them as the same person in all of your analytics tools. And even better, you’ll be able to correlate analytics data with your own internal database.

Set language

You can also change the display language of legal.js when you load it. Currently supported languages are Danish (da-dk) and English (en-us). English is the default. Language is set with the locale parameter in an options object as the second argument to legal.load():

<script>
!function(){var r,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="1.2.4",r="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.error&&console.error("Legal.js snippet included twice on page.");else{for(s.invoked=!0,s.methods=["document","signup","user","ensureContent","enableImpliedConsent"],s.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(t),s.push(e),s}},e=0;e<s.methods.length;e++)t=s.methods[e],s[t]=s.factory(t);s.load=function(e,t){var n,o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=r,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}}}}();
legal.load("<<PROJECT PUBLIC KEY>>", {
locale: "da-dk",
});
</script>

Signup consent widget

Legal.js lets you collect compliant consent when a user passes personal information to your service for the first time. To do this, our library includes a signup consent widget that prompts a visitor to accept your terms and conditions before signing up for your service.

First, make sure that you have followed the setup instructions in the section Install legal.js above.

Then you insert the widget by calling the legal.signup() method in a <script> section somewhere on your page, like this:

<script>
legal.signup("signup-consent");
</script>

The above example is the simplest way to insert the widget on your page. It assumes that somewhere on your page there is an element with the unique HTML element ID "signup-consent", like so:

<div id="signup-consent"></div>

That element is the target element and will be replaced with the widget, so it is perfectly fine to just use an empty <div> element as shown here.

Of course, you may be restricted to not being able to add such an element to your page markup. The legal.signup() method therefore offers some options to add the widget before or after a target element that you choose:

<script>
legal.signup("some-form-element", {
insertMode: "append",
});
</script>

The above code looks for a target element with the ID "some-form-element" and then appends the widget after that element without disturbing it. The following values can be used for insertMode: "append" (inserts widget after the target element, as we just saw), "prepend" (inserts widget before target element) and "replace" (completely replaces the target element with the widget, which is the default when insertMode is not specified).

Note: It is important that the target element is located inside the <form> element of the form that requires consent. The signup widget will ensure that the user signing up has consented to your terms and conditions, before they can submit the form to your backend server.

The signup widget also has an option that enables you to collect name and email to identify the user when they sign up. This naturally assumes that your signup form contains input fields for user name and email address:

<script>
legal.signup("signup-consent", {
nameInputField: "fullname_field",
emailInputField: "email_field",
});
</script>

In the above example, the widget will look for two <input type="text"> fields, named "fullname_field" and "email_field", respectively. When the form is submitted, user consent along with name and email will be recorded into our systems.

Note: Collecting name and email does not need to be done when your user signs up. Please see the section Attach user information for more information on doing this separately.

Validation

If the user is required to give active consent (based on her location) we will do front-end validation that will require our consent checkbox to be checked before your form can be submitted.

Front-end validation is okay for the user experience, but not secure. A user could tamper with the rendered HTML and in this way gain access to your product without giving consent.

To validate on the backend that the user has given consent in the form, you should validate that the input named legalmonster-consent equals on, the default value of a checkbox. This will be the case if the user has checked the active-consent checkbox or if the user is located a place where inactive consent is all that is required.

Defining the name of the validation field

If required, you can define the name of the validation field by specifying the validationFieldName option. In this case the validation input name would not be the default legalmonster-consent, but consent-validation.

<script>
legal.signup("signup-consent", {
validationFieldName: "consent-validation",
});
</script>

In the case of multiple submit buttons for your form

If you are using the signup widget on a form that has multiple buttons that can trigger the form's onsubmit event, you probably only want one of those buttons to validate that active consent has been given (if active consent is necessary for the particular visitor) and communicate the consent back to our servers.

As a concrete example, if you have implemented the signup widget on a shopping cart checkout page, you might have two buttons that trigger a form submit: An "update items" button and the actual "checkout" button. In this case, you do not want the update button to run the signup widget validation and consent logic.

To help in this situation, you can specify the submitTargetName option with the element name (Note: not the element id) of the actual "checkout" button. Here is an example which also shows a fictional form:

<form>
<input type="submit" name="updateItemsBtn" value="Update items" />
<input type="submit" name="checkoutBtn" value="Checkout" />
<div id="signup-consent"></div>
</form>
<script>
legal.signup("signup-consent", {
submitTargetName: "checkoutBtn",
});
</script>

The above setup will only activate signup widget validation and logic when clicking on the "Checkout" button, not when clicking on the "Update items" button.

As a final remark about the signup widget, you can of course combine the various options discussed here when calling legal.signup().

Attach user information

The legal.user() method lets you attach a full name and an email address to the current user.

When using this method, the previously anonymous user will be updated in our systems with the name and email you define:

<script>
legal.user({
name: "John Doe",
email: "johndoe@example.com",
});
</script>

Of course, if your signup form already provided this information when using the Signup consent widget, there is no need to provide it again. However, legal.user() is useful if the user changes their email address or corrects their name.

Show document widget

This widget renders a document directly into your page. You should only call legal.document() when the document will actually be shown to the end user, as the call will add a view track to the audit trail immediately.

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

In the above example, the target element (with id "document-target") is replaced with HTML that displays the document. legal.document() takes an options object as an optional third argument. Currently, the only supported option is insertMode, which works just like for the Signup consent widget.

Styling

We don't pass any styling on the document, only the raw HTML of the document as you have formatted it with our online document editor.

This button gives you access to edit the HTML behind a document in Legal Monster.

Any exciting CSS of the page where you embed the document will also apply to the document HTML.

Ensure consent widget

When activated, this widget presents the user with a popup for each document that they need to consent to at the present time. The popup shows the document title and text, and asks the user to accept the document. When the user clicks the "Accept & continue" button, the popup goes on to show the next document that needs consenting, or closes if there are no further such documents for this user.

You should use this widget on all your pages where you want to ensure that the user has viewed and consented to any updates to your terms and conditions documents that you have made since the user signed up (and thus gave consent for your initial document versions).

The widget is very easy to activate:

<script>
legal.ensureConsent();
</script>

If there are no pending documents for the user to consent to, this widget will simply have no effect.