Custom Template with FlowAppz Cookie Consent

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:

  
      <!-- Your popup content goes here -->
  

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:

  
      <!-- Your manage settings content goes here -->
  

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:

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

  
      <p>Strictly necessary cookies are essential for the website to function.</p>
  
  
      <p>Analytics cookies help us understand how visitors interact with the website.</p>
  

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:

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

  
      <h3>Analytics Cookies</h3>
  
  
      <p>Analytics cookies help us understand how visitors interact with the website.</p>
  

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:

  <label>
      <input type="checkbox" flowappz-cookie-choice="analytics">
  
      <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.