> For the complete documentation index, see [llms.txt](https://docs.flowappz.com/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flowappz.com/home/cookie-consent/getting-started/templates/custom-template-with-flowappz-cookie-consent.md).

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

  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.