# Integrate consent with checkout

{% hint style="warning" %}
This courtesy guide is **no longer actively tested** by Openli, although it might still work.

Our cookie-consent widget intentionally uses a highly-compatible, highly-generic approach to integration. In most cases, it will be possible for your developers to adapt this guide's steps to any changes that might have been made to the target platform, in combination with their own general documentation. **Our** [**consent-state events**](https://docs.openli.com/docs/documentation/legaljs-widget/collecting-cookie-consent/consent-state-api#listening-for-consent-change-events) **might be useful for this.**
{% endhint %}

## Before you start:

Before following these steps, please be sure that you have:

* [ ] Created a privacy policy and terms of service agreement
* [ ] Created a signup for a service widget

## Step 1: Code snippet

To install your widget, you'll need your widget code snippet.

![The code snippet is in the text area in the lower right corner](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LRMQvUsiQMLNstTU-cS%2F-MIri7DUHlNCF_Vis-Fr%2F-MIs5nJYQ0RE-lA1_8gu%2FScreenshot%202020-10-05%20at%2011.32.05.png?alt=media\&token=a536741c-0578-4454-9f34-9e733f0121d4)

To find your code snippet, go to the Openli dashboard and select "**Widgets**" in the side menu. Click on the Signup-widget you previously created and copy the code.&#x20;

It will look like this:

```javascript
<script>
    !function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],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.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();

    legal.widget({
        type: "signup",
        widgetPublicKey: "xxxxxxxxxxxxxx",
        targetElementSelector: "#legalmonster-signup-xxxxxxxxxxxx",
    });
</script>

<div id="legalmonster-signup-xxxxxxxxxxxxxxxx"></div>

```

{% hint style="info" %}
Notice that the value for `widgetPublicKey` will be different in your code snippet
{% endhint %}

The code snippet consists of two elements: the \<script> code and a \<div> element. The \<div> element is replaced by our consent element, and thus must be placed where you wish to collect consent.&#x20;

{% hint style="warning" %}
Your code snippet might need customisation to fit your page. Make sure you've about read all the [options available in the consent widget](https://docs.openli.com/docs/documentation/legaljs-widget/consent).&#x20;
{% endhint %}

## Step 1: Integrate with your cart

There are a few places you need to hook into to enable Openli to work with Shopify. The first place is your cart, which you must edit in the theme code. Go to "Online Store", then "Themes", and then click "Actions" and select "Edit code".

![Select Edit Code from the dropdown menu. ](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LRMQvUsiQMLNstTU-cS%2F-MIri7DUHlNCF_Vis-Fr%2F-MIroTuTxr9YuaVvgj2J%2FScreenshot%202020-10-05%20at%2010.11.06.png?alt=media\&token=e310482b-efe8-457b-aa53-3c862f9e2d72)

Where your cart's template code is stored depends on the theme. In the default theme "Debut" it is located in a file called `cart-template.liquid`.

When you have located the template code for your cart, you should add the code snippet:

![The highlighted code is the Openli code snippet.](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LRMQvUsiQMLNstTU-cS%2F-MIri7DUHlNCF_Vis-Fr%2F-MIs7Oq1DDKpBALz3Tzl%2FScreenshot%202020-10-05%20at%2011.39.36.png?alt=media\&token=9dcf05f7-1728-4894-8d81-4d2a2cbfe6d6)

{% hint style="warning" %}
The target element for consent collection (the `<div>` in the example above) must be within the cart's `form` element.
{% endhint %}

Remember to save your changes.&#x20;

## Extra: Saving additional details after checkout

To reliably identify the user and ensure that their consent is properly associated with them, we need to add some code to your checkout completion page. This is done under "Settings", then "Checkout", where you should find the section called "**Order processing**".

![](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LRMQvUsiQMLNstTU-cS%2F-MIri7DUHlNCF_Vis-Fr%2F-MIs8kgo8VE2TyZhp0oF%2FScreenshot%202020-10-05%20at%2011.44.31.png?alt=media\&token=649fb5ed-12f2-49c4-8dcc-0e2e18eaabf5)

You should see an input field for "Additional scripts", and that is where you should customise and insert the following code:

```markup
<script>
    !function(){var i,e,t,s=window.legal=window.legal||[];if(s.SNIPPET_VERSION="3.0.0",i="https://widgets.legalmonster.com/v1/legal.js",!s.__VERSION__)if(s.invoked)window.console&&console.info&&console.info("legal.js: The initialisation snippet is included more than once on this page, and does not need to be.");else{for(s.invoked=!0,s.methods=["cookieConsent","document","ensureConsent","handleWidget","signup","user"],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.setAttribute("data-legalmonster","sven"),o.type="text/javascript",o.async=!0,o.src=i,(n=document.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),s.__project=e,s.__loadOptions=t||{}},s.widget=function(e){s.__project||s.load(e.widgetPublicKey),s.handleWidget(e)}}}();

    legal.load("Your widget's public key", {
        identifier: "{{ customer.id }}",
        locale: "en-us",
    });
    legal.user({
        name: "{{ customer.name }}",
        email: "{{ customer.email }}",
    });
</script>
```

## Done!&#x20;

Congratulations on completing your first step towards collecting compliant consent. Pad your self on the back and know that our mascot Li is proud of you.&#x20;

![](https://1919043541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LRMQvUsiQMLNstTU-cS%2Fuploads%2FP5L9Hk7egE96nLzqpVuv%2Fcookie-openli.png?alt=media\&token=cc21774f-ca82-4bf0-9308-2a0b2cf7f9d1)
