π 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 Agent 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 Agent 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β
- Load the page, fill out name/email, and click Save.
- Refresh the page β the cookies are read and passed into the bot as attributes.
- Ask the bot a question. It will use the data and skip asking for contact info again.
- Clear cookies to restart the flow.