Skip to main content

📄 ai12z Cookie-Based User Form Skipping Guide

This guide explains how to persist user contact information using cookies and configure the ai12z-bot to automatically skip the initial form if the user has previously submitted their name and email. For this example we would choose in the project settings "Include a Form for First Response" ("(Select)"). Select the form.

🎯 Purpose​

  • Save user's Name and Email as browser cookies.
  • Set the ai12z attributes email and name so ai12z-bot will know who this user is with any future visits.
  • Set the attribute skipInitialForm: true when cookies are present to prevent the bot from asking for info it already has.

✅ Requirements​

  • Host your HTML page on a real domain (not accessed via file://) to allow cookies to persist.
  • Ensure your chatbot is configured with a system prompt that references {attributes} to make use of passed data.

🧪 HTML Page with Cookie Logic​

Paste this into a live .html file on your server:

<!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>First Form and Cookie - V1</title>
  </head>
  <body>
    <h1>Cookie Information</h1>
    <p id="displayName"></p>
    <p id="displayEmail"></p>
    <button onclick="clearCookies()">Clear Cookies</button>

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

    <script>
      function setCookie(email, Name) {
        if (email) {
          const ele = document.querySelector("ai12z-bot")
          if (ele) {
            ele.dataAttributes = {
              email: email,
              Name: Name,
              skipInitialForm: true,
            }
          }
          document.cookie = `email=${email}; path=/; max-age=31536000`
          document.cookie = `Name=${Name}; path=/; max-age=31536000`
          displayCookieNameEmail()
        }
      }

      function clearCookies() {
        document.cookie = "email=; path=/; max-age=0"
        document.cookie = "Name=; path=/; max-age=0"

        const ele = document.querySelector("ai12z-bot")
        if (ele) {
          ele.dataAttributes = {
            skipInitialForm: false,
          }
        }

        displayCookieNameEmail()
      }

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

      function displayCookieNameEmail() {
        const email = getCookie("email")
        const Name = getCookie("Name")
        document.getElementById("displayEmail").textContent = email
          ? `Your email is: ${email}`
          : "No email yet"
        document.getElementById("displayName").textContent = Name
          ? `Your Name is: ${Name}`
          : "No Name yet"
        return { email, Name }
      }

      document.addEventListener("DOMContentLoaded", function () {
        const ele = document.querySelector("ai12z-bot")
        const data = displayCookieNameEmail()
        if (ele) {
          if (data.email) {
            ele.dataAttributes = {
              email: data.email,
              Name: data.Name,
              skipInitialForm: true,
            }
          } else {
            ele.dataAttributes = {
              skipInitialForm: false,
            }
          }
          ele.addEventListener("formSubmitted", (event) => {
            const detail = event.detail
            if (detail.formId === "emailNameForm") {
              setCookie(detail.email, detail.Name)
            }
          })
        }
      })
    </script>
  </body>
</html>

📋 Matching Form Definition​

This form should be triggered by the bot if skipInitialForm is false. It includes a hidden field formId to identify its purpose when formSubmitted fires.

{
  "description": "Form data from contact form to collect, Name, and email",
  "completedHtml": "<strong>Thanks for Connecting!</strong>\n<p>We’ve received your info. If there’s anything else you’d like to ask or explore, we’re here to help.</p>\n\n",
  "pages": [
    {
      "name": "page1",
      "description": "\n",
      "elements": [
        {
          "type": "html",
          "name": "description",
          "html": "<strong>Let’s Stay in Touch</strong><p>\nThanks for your question! If you'd like to get updates or follow up with our team, just share your name and email below.</p>"
        },
        {
          "type": "text",
          "name": "Name",
          "title": "Name",
          "isRequired": true,
          "placeholder": "Enter your first and last name"
        },
        {
          "type": "text",
          "name": "email",
          "title": "Email",
          "isRequired": true,
          "inputType": "email",
          "placeholder": "Enter your email"
        },
        {
          "type": "text",
          "name": "formId",
          "visible": false,
          "title": "formId",
          "defaultValue": "emailNameForm"
        }
      ]
    }
  ],
  "showQuestionNumbers": "off",
  "clearInvisibleValues": "none",
  "completeText": "Submit"
}

When using a hidden field to handle an identifier, i.e. visible false, also set "clearInvisibleValues": "none", so it will be included in the form submit

🔧 ai12z System Prompt Setup​

Make sure your system prompts use:

User profile
{attributes}

Example response handling:

  • If skipInitialForm is true, the form will be skipped.
  • You can then safely assume the bot knows the user's name and email via {attributes.email} and {attributes.userName}.

🧪 Testing​

  1. Load the page, fill out name/email, and click Save.
  2. Refresh the page — the cookies are read and passed into the bot as attributes.
  3. Ask the bot a question. It will use the data and skip asking for contact info again.
  4. Clear cookies to restart the flow.