# Embed your policies and legal agreements

{% embed url="<https://www.loom.com/share/410325c059894e8eba9060edc958cca0>" %}

## How to embed a cookie policy

### Find your cookie policy's public-key

In your [Openli dashboard](https://app.openli.com), click "Agreements", and copy the public-key of your cookie policy, as shown in the image below:

![](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRMQvUsiQMLNstTU-cS%2Fuploads%2FBHXtTEwvMg7iFnOQJdsm%2FScreenshot%202021-11-22%20at%2010.28.05.png?alt=media\&token=0226ea70-a2cc-479d-8766-76c0e5a8e864)

### Add the embed code to your website

The feature requires both a containing element and a JavaScript snippet to work. You can use an existing HTML element on your page as the container, or add a new one where you want to show the cookie policy on your page.

For example, if you add the following HTML to your page where you want the cookie policy to be shown:

```javascript
<div id="cookie-policy-container"></div>
```

...and add the following JavaScript, replacing `policy-public-key` with the public key of your own cookie policy:

```javascript
<script>
    // NOTE: This must be placed/run AFTER the code snippet for your cookie widget.
    legal.document("#cookie-policy-container", "policy-public-key");
</script>
```

...then the latest version of your cookie policy will be displayed inside the `<div>` element.

{% hint style="info" %}
If you want to show the cookie policy in an element that already exists on your page, you can use a standard CSS selector that matches it, instead of `#cookie-policy-container` in the example above.
{% endhint %}

## How to embed other legal agreements&#x20;

### Find your agreement's public key

In your [Openli dashboard](https://app.openli.com), click "Agreements", and copy the public-key of your agreement, as shown in the image below for the example of a cookie policy:

![](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRMQvUsiQMLNstTU-cS%2Fuploads%2FBHXtTEwvMg7iFnOQJdsm%2FScreenshot%202021-11-22%20at%2010.28.05.png?alt=media\&token=0226ea70-a2cc-479d-8766-76c0e5a8e864)

### Add the embed code to your website

The feature requires both a containing element and a JavaScript snippet to work. You can use an existing HTML element on your page as the container, or add a new one where you want to show the policy on your page.

For example, if you add the following HTML to your page where you want the policy to be shown:

```javascript
<div id="policy-container"></div>
```

...and add the following JavaScript replacing `policy-public-key` with the public-key of your own policy:

```javascript
<script>
    // Replace policy-public-key with your policy's public key.
    legal.document("#policy-container", "policy-public-key");
</script>
```

...then the latest version of your policy will be displayed inside the `<div>` element.

{% hint style="info" %}
If you want to show the policy in an element that already exists on your page, you can use a standard CSS selector that matches it, instead of `#policy-container` in the example above.
{% endhint %}

## Advanced options

### Insertion mode

You can use the`insertMode` option to change how and where the agreement is placed in relation to the target element:&#x20;

```javascript
<script>
    legal.load("<<WIDGET PUBLIC KEY>>"); // Only needed when the page loads no other widget.

    legal.document("#agreement-target", "<<AGREEMENT PUBLIC KEY>>",  {
         insertMode: "after",
    });
</script>
```

You can change the insertion method to one of the following options:&#x20;

| 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 part of an agreement

You link to a specific part of an agreement using any [valid CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), 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&#x20;

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:

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

```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](https://en.wikipedia.org/wiki/Fragment_identifier) (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:

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

![](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LRMQvUsiQMLNstTU-cS%2F-LsS64shSSYVb5eneExu%2F-LsSDYDFiWCZCpwIXi0L%2Ffroala-code-view-button.png?alt=media\&token=4d1774a1-2422-4404-bd55-1871f36f9053)