Custom Template with FlowAppz Cookie Consent

This documentation will guide you on how to integrate the FlowAppz Cookie Consent JavaScript code with your custom HTML popup.

1. Required HTML Structure

The JavaScript code relies on specific data-* attributes to identify elements and bind functionality. Below is the list of required attributes and their purpose:

1.1 Cookie Popup Container

• Attribute: flowappz-cookie-popup="true"

• Purpose: This is the main container for the cookie consent popup. The script will show/hide this element based on user interaction.

• Example:

  htmlCopy

  <div flowappz-cookie-popup="true">
      <!-- Your popup content goes here -->
  </div>

1.2 Cookie Settings Wrapper

• Attribute: flowappz-cookie-settings-wrapper="true"

• Purpose: This is the container for the "Manage Settings" section of the cookie popup. It will be shown/hidden when the user clicks on "Manage Settings."

• Example:

  htmlCopy

  <div flowappz-cookie-settings-wrapper="true">
      <!-- Your manage settings content goes here -->
  </div>

1.3 Cookie Toggles (Checkboxes)

• Attribute: flowappz-cookie-choice="<type>"

• Purpose: These are the toggles (checkboxes) for each cookie category. The flowappz-cookie-choice attribute should have a value corresponding to the cookie type (e.g., strictlyNecessary, analytics, personalization, marketing).

• Example:

  htmlCopy

  <input type="checkbox" flowappz-cookie-choice="strictlyNecessary" checked disabled>
  <input type="checkbox" flowappz-cookie-choice="analytics">
  <input type="checkbox" flowappz-cookie-choice="personalization">
  <input type="checkbox" flowappz-cookie-choice="marketing">

1.4 Cookie Content Sections

• Attribute: flowappz-cookie-content="<type>"

• Purpose: These are the content sections that correspond to each cookie category. They will be shown/hidden based on the toggle state.

• Example:

  htmlCopy

  <div flowappz-cookie-content="strictlyNecessary">
      <p>Strictly necessary cookies are essential for the website to function.</p>
  </div>
  <div flowappz-cookie-content="analytics">
      <p>Analytics cookies help us understand how visitors interact with the website.</p>
  </div>

1.5 Buttons

• Attribute: flowappz-cookie-command="<action>"

• Purpose: These are the buttons for user actions like accepting all cookies, rejecting all cookies, or managing settings. The flowappz-cookie-command attribute should have a value corresponding to the action (e.g., accept-all, reject-all, manage-settings, close-cookie-popup, close-settings).

• Example:

  htmlCopy

  <button flowappz-cookie-command="accept-all">Accept All</button>
  <button flowappz-cookie-command="reject-all">Reject All</button>
  <button flowappz-cookie-command="manage-settings">Manage Settings</button>
  <button flowappz-cookie-command="close-cookie-popup">Close</button>
  <button flowappz-cookie-command="close-settings">Close Settings</button>

---

2. Optional HTML Elements

These elements are optional but can enhance the user experience:

2.1 Accordion Headers

• Attribute: data-accordion-header

• Purpose: Used to create accordion sections for cookie settings. Clicking on these headers will expand/collapse the corresponding content.

• Example:

  htmlCopy

  <div data-accordion-header>
      <h3>Analytics Cookies</h3>
  </div>
  <div flowappz-cookie-content="analytics">
      <p>Analytics cookies help us understand how visitors interact with the website.</p>
  </div>

2.2 Custom Checkbox Styling

• Class: w-checkbox-input--inputType-custom

• Purpose: If you want to use custom-styled checkboxes, ensure they have this class for proper styling and functionality.

• Example:

  htmlCopy

  <label>
      <input type="checkbox" flowappz-cookie-choice="analytics">
      <div class="w-checkbox-input--inputType-custom"></div>
      <span>Analytics Cookies</span>
  </label>

---

3. JavaScript Initialization

The JavaScript code will automatically initialize when the DOM is fully loaded. Ensure that your custom HTML structure includes the required attributes mentioned above. The script will handle:

• Showing/hiding the popup based on user preferences.

• Toggling cookie settings.

• Storing user preferences in cookies.

• Updating Google Tag Manager and other tracking scripts based on user consent.