With Chatbot Builder AI, you can build a simple form on your website that sends visitor details directly into your chatbot. When the visitor clicks submit, they are redirected into the chat and their information is automatically saved to custom fields.
This makes it effortless to:
Collect contact details.
Personalize chatbot conversations.
Segment users by fields like email, phone, or salary range.
1. How It Works
Every Webchat link looks like this:
https://app.chatgptbuilder.io/webchat/?p=YOUR_ACCOUNT_ID&ref=FLOW_ID
p = your Account ID
ref = the flow or entry point to trigger when chat opens
- By adding an scf parameter, you can also set custom fields automatically.
Example scf JSON:
[
{"id":"email","value":"john@example.com"},
{"id":"full_name","value":"John Smith"},
{"id":"phone","value":"+15551234567"},
{"id":"413712","value":"$100k"}
]
System fields like email, full_name, phone are built in.
Custom fields (like Salary) use their Custom Field ID (get this in Flows > Custom Fields > ⋯ > Get ID).
2. A Complete Example Form
Here’s a ready-to-use HTML form. Drop this into your website where you want it to appear. Just replace the ACCOUNT_ID, REF_ID, and any custom field IDs with your own values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chat Prefill Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: system-ui, sans-serif;
background: #0b0b0b;
color: #eee;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form-box {
background: #111;
padding: 32px;
border-radius: 12px;
max-width: 600px;
width: 100%;
}
label { display: block; margin-bottom: 6px; font-size: 14px; color: #aaa; }
input, select {
width: 100%; padding: 12px; margin-bottom: 16px;
border-radius: 6px; border: 1px solid #333;
background: #000; color: #eee;
}
button {
width: 100%; padding: 14px; background: #36D6B5; color: #000;
font-weight: bold; border: none; border-radius: 6px; cursor: pointer;
}
button:hover { background: #28bfa1; }
.output { margin-top: 16px; font-size: 13px; color: #aaa; word-break: break-all; }
</style>
</head>
<body>
<div class="form-box">
<h2 style="color:#36D6B5;">Start Chat</h2>
<form id="chatForm">
<label>Full Name</label>
<input id="fullName" type="text" required placeholder="Jane Doe" />
<label>Email</label>
<input id="email" type="email" required placeholder="jane@example.com" />
<label>Phone</label>
<input id="phone" type="tel" required placeholder="+1 555 123 4567" />
<label>Salary Range</label>
<select id="salary" required>
<option value="">Select range</option>
<option>$50k</option>
<option>$75k</option>
<option>$100k</option>
<option>$150k</option>
<option>$200k+</option>
</select>
<button type="submit">Open Chat</button>
</form>
<div class="output" id="linkOut"></div>
</div>
<script>
const ACCOUNT_ID = "1842672"; // replace with your Account ID
const REF_ID = "1725999210020"; // replace with your Flow ID
const SALARY_CUF_ID = "413712"; // replace with your custom field ID for Salary
const BASE_URL = "https://app.chatgptbuilder.io/webchat/";
function buildScf(fullName, email, phone, salary) {
const parts = [];
if (email) parts.push({id:"email",value:email});
if (fullName) {
const [first,...rest] = fullName.split(" ");
if (first) parts.push({id:"first_name",value:first});
if (rest.length) parts.push({id:"last_name",value:rest.join(" ")});
parts.push({id:"full_name",value:fullName});
}
if (phone) parts.push({id:"phone",value:phone});
if (salary) parts.push({id:SALARY_CUF_ID,value:salary});
return encodeURIComponent(JSON.stringify(parts));
}
document.getElementById("chatForm").addEventListener("submit", (e) => {
e.preventDefault();
const fullName = document.getElementById("fullName").value.trim();
const email = document.getElementById("email").value.trim();
const phone = document.getElementById("phone").value.trim();
const salary = document.getElementById("salary").value.trim();
const scf = buildScf(fullName,email,phone,salary);
const url = `${BASE_URL}?p=${ACCOUNT_ID}&ref=${REF_ID}&scf=${scf}`;
document.getElementById("linkOut").textContent = url;
window.location.href = url; // redirect
});
</script>
</body>
</html>
3. Steps to Use
Copy the code above.
Replace the ACCOUNT_ID, REF_ID, and SALARY_CUF_ID values with your own (from your Chatbot Builder AI dashboard).
Paste it into your website.
When someone fills the form and clicks Open Chat, they will be redirected into your chatbot with their details already saved to their profile.
4. Key Benefits
Automatic personalization: your chatbot greets the visitor by name.
Data capture: details are saved in the contact profile automatically.
Segmentation: flows can branch based on custom fields like salary, role, or any other info you choose to collect.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article