# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flowappz.com/home/cookie-consent/getting-started/templates/custom-template-with-flowappz-cookie-consent.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.