Consents

This section provides guidance on embedding an existing clickwrap in your website using Namirial Clickwrap. The clickwrap is a collection of agreements configured in the Agreements section, that users must accept to use your website or application.

Required data

After these parameters we need to insert a unique id field within our configuration, id that will allow us to know where to redirect the called agreement.

Write your HTML for embedding the clickwrap

The code you need to embed your clickwrap on your web page includes two HTML tags:

• A <div> indicating where the agreement should be displayed.
• A <script> tag which contains the import of the namirial_wrap.js library and the use of the render method with pre-configured parameters listed in the previous section and which are used to identify your agreement

There are two mandatory fields for displaying the agreement:

• enviroment
• cwGuid

It is not necessary to assign a value to the other parameters to retrieve the agreement, if you do not want to take advantage of the custom validation or do not want to assign a custom css class to the agreement's container, just leave the value blank

<!-- HTML wrapper for rendering -->
<div id="namirial__click-wrap"></div>

<!-- Initialization of the agreement snippet -->

<script type="module">
  /*  Javascript library for business logic  */

  import { clickWrap } from "{url of the desired environment (see get started page)}";

  clickWrap.render(
    {
      enviroment: "staging",
      cwGuid: "0e4995f4-388f-4b2a-9e0e-6a71671e1238",
      version: "",
      customValidation: "browser",
      messageValidation: "Your Custom message",
      CSSclassesList: ["css_class_1", "css_class_2", "css_class_N"],
    },
    "#namirial__click-wrap"
  );
</script>

Use of the Field Collection

In order to collect the user's consent, it is necessary to enter the ID parameters that correspond to the Field Collections entered during the agreement configuration phase and that correspond to the required parameters, secondly it is necessary to intercept the submit event through a Javascript function

This configuration allows the retrieval of the form data through the namirial_wrap.js library and to block the sending of the consent in the event that some of this data has not been entered

The parameters entered will be collected when sending the consent expressed by the user, the data collected will then be available in the consent detail sidebar in the clickwrap dashboard

Use of External ID

The External ID is the key that identifies the user who is present on the system that integrates the clickwrap snipett, it is a mandatory field for the purpose of registering the consent

The data used to generate the external ID value may or may not be a field of the may or may not belong to the fields of the form in which the clickwrap is inserted, there is no uniqueness constraint associated with this field by the namirial_wrap library, it is highly recommended to integrate dynamic values such as email or guid in order to improve and facilitate any research in our systems through the integrator Api

Submit event with browser validation

The customValidation parameter of the rendering method just illustrated allows you to take advantage of the custom validation of the agreement, if you do not want to take advantage of this option it will be sufficient to write the word "browser" as a parameter or simply leave the field blank

You will first need to select the submit button of the form, where the clickwrap has been placed, through a specific class or an id using the querySelector method and assign a submit event to this button via the Javascript addEventListener method

Once this operation has been carried out, it is necessary to place the sendingConsents() method of the namirial_wrap library inside the callback function of the addEventListener method

This method takes as input a parameter of type string called externalID and represents the id of the user who is expressing consent

Having left to the browser the burden of validating the fields of the form in the event that a user has not validated a required field, the submission of the form will be automatically blocked

const submitBtn = document.querySelector("<the submit button of your form>");

const form = document.querySelector("#<id of my form>");
const MyFormSubmitHandler = () => {
  let externalId = "<external id value chosen>";
  clickWrap.sendingConsents(externalId);
};

submitBtn.addEventListener("click", MyFormSubmitHandler);

Submit event with custom validation

The namirial_wrap library provides two types of validation:

• namirial
• bootstrap

You can choose the type of validation using "bootstrap" or "namirial" as input parameter for the customValidation field

The namirial_wrap.js library will automatically insert two parameters in the form where the arrangement will be rendered:

• The novalidate attribute which disables data checks carried out automatically by the browser

• A different class depending on the validation you have chosen to use: If you have chosen bootstrap validation, the .needs-validation class will be added If you have chosen namirial validation instead, the .namirial-form-validation class will be added

HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid

<!-- HTML wrapper for rendering -->
<div id="namirial__click-wrap"></div>

<!-- Initialization of the agreement snippet -->

<script type="module">
  /*  Javascript library for business logic  */

  import { clickWrap } from "{url of the desired environment (see get started page)}";

  clickWrap.render(
    {
      enviroment: "staging",
      cwGuid: "0e4995f4-388f-4b2a-9e0e-6a71671e1238",
      version: "",
      customValidation: "namirial || bootstrap",
      messageValidation: "Your Custom message",
      CSSclassesList: ["css_class_1", "css_class_2", "css_class_N"],
    },
    "#namirial__click-wrap"
  );
</script>

Demo css integration for custom validation

To use the css classes for custom validation you will need to add the following css's to your style sheet, including the css belonging to the validation you have decided to implement

::: details Namirial css

form.namirial-validation
  #namirial__click-wrap
  .namirial-cw__field-group
  input:invalid
  ~ label {
  color: #d46f62;
}

form.namirial-validation
  #namirial__click-wrap
  .namirial-cw__field-group
  input:invalid
  ~ label
  span {
  border: 3px solid #d46f62;
}

form.namirial-validation
  #namirial__click-wrap
  .namirial-cw__field-group
  input:invalid:focus
  ~ label
  span {
  border: 3px solid #d46f62;
  box-shadow: 0 0 0 0.25rem rgb(212 111 98 / 25%);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #d46f62;
}

form.namirial-validation
  #namirial__click-wrap
  .namirial-cw__field-group
  :invalid
  ~ .invalid-feedback {
  display: block;
}

form.namirial-validation
  #namirial__click-wrap
  .namirial-cw__field-group
  input:valid
  ~ label
  span {
  border: 3px solid #5fb99f;
}

form.namirial-validation
  #namirial__click-wrap
  .namirial-cw__field-group
  input:valid:focus
  ~ label
  span {
  border: 3px solid #5fb99f;
  box-shadow: 0 0 0 0.25rem rgb(95 185 159 / 25%);
}

form.namirial-validation
  #namirial__click-wrap
  .namirial-cw__field-group
  input:valid
  ~ label
  span::after {
  background-color: #5fb99f;
}

:::

::: details Bootstrap css

form.was-validated
  #namirial__click-wrap
  .namirial-cw__field-group
  input:invalid
  ~ label {
  color: #dc3545;
}

form.was-validated
  #namirial__click-wrap
  .namirial-cw__field-group
  input:invalid
  ~ label
  span {
  border: 3px solid #dc3545;
}

form.was-validated
  #namirial__click-wrap
  .namirial-cw__field-group
  input:invalid
  ~ label {
  color: #dc3545;
}

form.was-validated
  #namirial__click-wrap
  .namirial-cw__field-group
  input:invalid:focus
  ~ label
  span {
  border: 3px solid #dc3545;
  box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

form.was-validated
  #namirial__click-wrap
  .namirial-cw__field-group
  input:valid
  ~ label
  span {
  border: 3px solid #198754;
}

form.was-validate
  #namirial__click-wrap
  .namirial-cw
  .namirial-cw__field-group
  input:required:valid
  ~ label
  span {
  border: 3px solid #198754 !important;
}

form.was-validated
  #namirial__click-wrap
  .namirial-cw__field-group
  input:valid:focus
  ~ label
  span {
  border: 3px solid #198754;
  box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}

form.was-validated
  #namirial__click-wrap
  .namirial-cw__field-group
  input:valid
  ~ label
  span::after {
  background-color: #198754;
}

:::

Submit event interception with browser validation

By eliminating the browser default validation, it is necessary to integrate a condition within the callback function of the addEventListener method in which to insert the isValidCheck() method of the library and pass to the method the id entered as a parameter

This function will take care of verifying that the agreements set as mandatory have been correctly validated

In order for the consent to be collected correctly, it will be necessary insert the sendigConsents method inside the condition previously set

const submitBtn = document.querySelector("<the submit button of your form>");

const form = document.querySelector("#<id of my form>");
const MyFormSubmitHandler = () => {
  if (clickWrap.isValidCheck("#test") === false) return;
  let externalId = "<external id value chosen>";
  clickWrap.sendingConsents(externalId);
};

submitBtn.addEventListener("click", MyFormSubmitHandler);

Custom events

The namirial_wrap.js library provides two custom events:

• namirial-renderAgreement: used for managing the rendering of the recovery of the agreement to be integrated
• namirial-onError: for handling http and library configuration errors.
• namirial-onApproved: used to collect the user's newly registered consent.

The information handled by each of the three events can be retrieved through the event parameter of the addEventListner method, in the object of the method there is the detail key that can be used to retrieve the error or confirmation message or, in the case of the "namirial-renderAgreement" event, the boolean value that indicates the end of the process of retrieving and rendering the arrangement

It is advisable to send the data of your application within the namirial-onApproved event, in order to retrieve the consentGroupGuid parameter and to be able to search for the consents expressed by users through the APIs made available by clickwrap

const form = document.querySelector("#id of my form");

window.addEventListener(
  "namirial-onApproved",
  function (e) {
    // ajax call made to the server
    fetch("your endpoint", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      //The contract in your form
      body: JSON.stringify(e.detail),
    }).then((res) => res);

    //Sending the form to the server
    form.submit();
  },
  false
);

window.addEventListener(
  "namirial-onError",
  function (e) {
    console.log(e.detail);
  },
  false
);

window.addEventListener(
  "namirial-onApproved",
  function (e) {
    console.log(e.detail);
  },
  false
);