# Install the widget

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

## Install the cookie widget in your source code

In this final step, you'll install the widget on your website. You'll need your widget's JavaScript code snippet to do so.&#x20;

To find your code snippet, go to the Openli dashboard and select "**Widgets**" in the side menu. Click on the cookie 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: "cookie",
        widgetPublicKey: "xxxxxxxxxxxxxxxxx",
    });
</script>

```

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

The code snippet you can see in the text box needs to be copied and added to your website. If you have experience with coding, you can do this yourself. If not, the final part of the step will need to be completed by your developer or someone who manages your website. You can read more in [this section of our developer documentation](https://docs.legalmonster.com/legaljs/collecting-cookie-consent#adding-the-cookie-consent-widget-to-your-site).

The snippet must be included **immediately before the closing-tag of the `body` element in your site's main template**, 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: "cookie",
                widgetPublicKey: "xxxxxxxxxxxxxxxxx",
            });
        </script>
    </body>
</html>
```

If you are unable to do this, you must ensure that the call to `legal.widget(...)` occurs after the DOM is ready, using a combination of the `DOMContentLoaded` event and the `document.readyState` property. [This reference article](https://javascript.info/onload-ondomcontentloaded) provides a good overview of the events involved. Contact us if you are in doubt.