Skip to main content

🍪 ai12z Cookie Integration Guide – Example: Favorite Color

This guide walks you through how to persist user-specific information like their favorite color using cookies and make that information available to the ai12z-bot or ai12z-cta.

✅ Overview​

You will:

  • Set a cookie in the user's browser (e.g., favoriteColor)
  • Automatically load the cookie value on page load
  • Pass it to the ai12z-bot as a dataAttributes parameter
  • Use the {attributes} placeholder in system prompts to make the bot aware of the data

🧪 Sample HTML Code​

<!doctype html>
<html>
  <head>
    <script
      type="module"
      src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />
    <title>Favorite Color</title>
  </head>
  <body>
    <h1>Set Your Favorite Color</h1>

    <label for="colorInput">Favorite Color V2:</label>
    <input type="text" id="colorInput" placeholder="e.g., blue" />
    <button onclick="setFavoriteColor()">Save</button>

    <p id="displayColor"></p>

    <ai12z-bot data-key="Add Your API Key from Project Settings"></ai12z-bot>

    <script>
      // Save cookie
      function setFavoriteColor() {
        const color = document.getElementById("colorInput").value
        if (color) {
          const ele = document.querySelector("ai12z-bot")
          if (ele) {
            ele.dataAttributes = { botUserFavoriteColor: color }
          }
          document.cookie = `favoriteColor=${color}; path=/; max-age=31536000` // 1 year
          displayFavoriteColor()
        }
      }

      // Retrieve cookie
      function getCookie(name) {
        const match = document.cookie.match(
          new RegExp("(^| )" + name + "=([^;]+)")
        )
        return match ? match[2] : null
      }

      // Display and pass cookie value to bot
      function displayFavoriteColor() {
        const color = getCookie("favoriteColor")
        const display = document.getElementById("displayColor")
        if (color) {
          display.textContent = `Your favorite color is: ${color}`
          return color
        } else {
          display.textContent = "No favorite color set yet."
          return null
        }
      }

      // Initialize on page load
      document.addEventListener("DOMContentLoaded", function () {
        const color = displayFavoriteColor()
        const ele = document.querySelector("ai12z-bot")
        if (ele) {
          ele.dataAttributes = { botUserFavoriteColor: color }
        }
      })
    </script>
  </body>
</html>

🧠 ai12z System Prompt Configuration​

To make the bot aware of the cookie-based attribute, modify both:

  • React System Prompt
  • Answer AI System Prompt

Include:

Bot user favorite color
{attributes}

🚀 How It Works​

  1. User sets their favorite color.
  2. The value is saved in a cookie and assigned to ai12z-bot.dataAttributes.
  3. Upon revisiting or refreshing the page, the bot automatically receives the attribute.
  4. You can now ask: “What is my favorite color?” and the bot will respond using the stored data.

⚠️ Hosting Notes​

Cookies only work properly when:

  • The page is served from a real web server/domain (e.g., localhost or https://yoursite.com)
  • Opening the HTML file directly via file:/// will not persist cookies.