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 might be useful for this.
Create the form
First create the form with the fields you wish to have, then preview the form and show the source code of the page. Look for a div that looks like this (the value of the id will be different):
To integrate with Pardot forms first go to the "Look and Feel" settings on the form where you wish to integrate Openli. Click "Above Form" and then the "Show Source" icon.
In this code view you need to add the following Openli script:
<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: "Your widget's public-key",
targetElementSelector: "#<<SAVED ID FROM DIV>>",
insertMode: "after"
});
</script>
Set the widgetPublicKey option to the public-key of the signup widget you want to use, and replace <<SAVED ID FROM DIV>> with the id you copied in the first step of this guide, ensuring that the # remains as the start of the value for targetElementSelector.
Now you should see your Openli signup widget displayed just above the submit button.
Save the user's name and email
To ensure that we save the user's name and email after they submit the form, navigate to the "Completion Actions" settings for the form. Click "Thank You Code".
Paste the following code in, replacing <<PROJECT PUBLIC KEY>> with your project's public-key.:
<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: "%%email%%"
});
legal.user({
name: "%%first_name%% %%last_name%%",
email: "%%email%%"
});
</script>
