iframe
, then legal.js must be included in the HTML of the iframe
, otherwise legal.js will not be available there.targetElementSelector
option.<form>
element that requires consent. This is currently a technical requirement for legal.js to function, and an error like "Unable to find signup form. Aborting setup." will be logged to the browser console if this is not the case.Document.querySelector()
method in your browser console, passing it the same selector that you intend to pass to targetElementSelector
and verifying that the matched element is the one you expect. Note that, if your form is in an iframe
, you will need to run this test in the console of the iframe
, not the console of the surrounding page.<div>
as the target element, whose id
attribute is set to target-element-id
, then you can use a snippet of JavaScript like this to enable the widget:<div>
element as shown here.legal.widget()
offers an option to add the widget before or after an existing target element that you choose.target-element-id
and replaces that element with the widget:insertMode
option to change how and where the widget is placed in relation to the target element, like so:replace
(Default)after
before
identifier
option with your unique identifier as its value. Here is an example of identifying your user when calling legal.widget()
:identifier
.outerBorderWidth
and outerPaddingSize
options:0
like so:nameInputSelector
and emailInputSelector
options, respectively. This naturally assumes that your form contains input fields for name and email address.emailInputSelector
option.legal.user()
method lets you attach a full name and an email address to the current user independently of collecting consent. When using this method, the user will be updated in our system with the name and email you define.legal.load()
as shown below.legal.user()
is useful if the user changes their email address or their name.controlledConsentFields
option of legal.widget()
:for
attribute with a value corresponding to the label's id
attribute.span
) acting as labels that have an id
attribute corresponding to an aria-labelledby
attribute on the checkbox.-penli-consent
has a value of on
, the default value of a checkbox. validationFieldName
option.openli-consent
, but consent-validation
.<form>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<button>Submit</button>
<button type="submit">Submit</button>
<button type="">Submit</button>
<button type="button">Non-submitting</button>
<button type="reset">Non-submitting</button>
submitButtonSelectors
option you can provide a standard CSS selector that matches only the button, or buttons, that legal.js should watch.Document.querySelectorAll()
method internally, and it supports any element, so you can target clickable non-button elements if you use those instead of standard buttons to submit your form.submitButtonSelectors
option, legal.js will watch only the elements that are matched by the selectors you provide, and will not include your form's default submit buttons if they do not match.submitButtonSelectors
option to an appropriate CSS selector, you can target only the button (or buttons) that legal.js should watch:submitButtonSelectors
an appropriate selector like so:submitButtonSelectors
option match only the buttons you want legal.js to watch, and that they match all of them.Document.querySelectorAll()
method in your browser console, passing it the same selectors that you intend to pass to submitButtonSelectors
and verifying that the list of matched elements is what you expect.