Install the widget

This guide will show you how to install your cookie widget.

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.

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.

It will look like this:

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

Notice that the value for widgetPublicKey will be different in your code snippet

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.

The snippet must be included immediately before the closing-tag of the body element in your site's main template, like this:

...
    ...
        <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 provides a good overview of the events involved. Contact us if you are in doubt.