What is Dynamic Context Ingestion
Dynamic Context Ingestion refers to adding extra context to the agent at the beginning of a call.
For example, if you have a PLG app and have deployed the Docket Widget in your app, when a users clicks on the widget, you can tell Docket their email, what plan the user is in, etc.
Another example is form based triggering. You can trigger the Docket Agent on your website when someone fills a form and pass on the form data to the Agent for additional context.
How to set it up
Log in to your Docket App and Navigate to the Marketing Agent Config page.
Select an Agent to set up CTAs for. If you haven't created any agent yet, refer to this guide to get started.
Go to the "Dynamic Context Ingestion" section and turn on the toggle.
Click on "Add Variable".
Enter the variable name as you would pass it from your side. For example, if you have a field called "f_name" in your form, then set the variable name to the same.
In the "Context for Agent" field, tell the agent what the variable is and how to use it.
Once you are done, click on "Add Variable".
You can add multiple variables like this or delete existing ones.
Passing on context while initiating a call to the agent
When triggering a call [for e.g. when a user clicks on the widget or a visitor fills a form], do the following to pass on the context.
The Docket Script has 2 functions to set or reset context.
setContext() – Sends context to Docket Agent so the AI knows who it's talking to.
resetContext() – Clears all stored data to start fresh (useful if there was a change in context).
Here is a quick reference on how to use these functions in your website/app code:
// Send visitor data to AISeller
await window.AISeller.setContext({
name: "John",
email: "[email protected]"
});
The variables in the above example must be replaced with the variables you configured above.
// Clear all visitor data
await window.AISeller.resetContext();
```
Notes:
Note that the context will only be transmitted to the agent when the call is being initialised.
If the context is set after the call has started, it won't be considered.
To trigger the widget automatically without needing the visitor to click on it, use the
callWidget(‘showAndConnect’)option. Refer to this guide to learn more.
Additional Info: Passing context from a form to Docket
1. Normal HTML Form
Use this if: You have a simple HTML website with a custom contact form.
How it works: When the form is submitted, we capture all form fields and send them to Docket.
<form id="contact-form">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="text" name="company" placeholder="Company" />
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
e.preventDefault();
// Collect all form fields into an object
const formData = new FormData(e.target);
const data = Object.fromEntries(formData);
// Result: { name: "John", email: "[email protected]", company: "Acme Inc" }
// Send to AISeller
if (window.AISeller?.setContext) {
await window.AISeller.setContext(data);
}
// Continue with your normal form handling (e.g., show thank you message)
});
</script>
2. HubSpot Form in HTML
Use this if: You're embedding HubSpot forms on a static HTML website.
How it works: HubSpot fires a special event when a form is submitted. We listen for that event, extract the form data, and send it to Docket.
<!-- Container where HubSpot will render the form -->
<div id="hubspot-form"></div>
<!-- Load HubSpot Forms script -->
<script src="//js.hsforms.net/forms/v2.js"></script>
<script>
// Initialize the HubSpot form
hbspt.forms.create({
portalId: "YOUR_PORTAL_ID", // Replace with your HubSpot Portal ID
formId: "YOUR_FORM_ID", // Replace with your Form ID
target: "#hubspot-form"
});
// Listen for successful form submission
window.addEventListener('hs-form-event:on-submission:success', async (event) => {
if (window.HubSpotFormsV4) {
const form = window.HubSpotFormsV4.getFormFromEvent(event);
const rawValues = await form.getFormFieldValues();
// Clean up field names (HubSpot adds prefixes like "0-1/")
const data = {};
rawValues.forEach(field => {
const name = field.name.includes('/') ? field.name.split('/').pop() : field.name;
data[name] = field.value;
});
// Send to AISeller
if (window.AISeller?.setContext) {
await window.AISeller.setContext(data);
}
}
});
</script>
Note: Find your Portal ID and Form ID in HubSpot under Marketing → Forms → Form details.
3. HubSpot Form in React/Next.js
Use this if: You're building a React or Next.js application with HubSpot forms.
How it works: Same as above, but wrapped in a React component with proper lifecycle management.
import { useEffect } from "react";
// TypeScript type definitions
declare global {
interface Window {
hbspt: any;
HubSpotFormsV4?: {
getFormFromEvent: (e: Event) => {
getFormFieldValues: () => Promise<Array<{ name: string; value: string }>>;
};
};
AISeller?: {
setContext?: (data: Record<string, unknown>) => Promise<unknown>;
};
}
}
export function HubSpotForm() {
useEffect(() => {
// Handle successful form submission
const handleSubmit = async (event: Event) => {
if (window.HubSpotFormsV4) {
const form = window.HubSpotFormsV4.getFormFromEvent(event);
const rawValues = await form.getFormFieldValues();
// Clean up field names
const data: Record<string, string> = {};
rawValues.forEach(field => {
const name = field.name.includes('/') ? field.name.split('/').pop()! : field.name;
data[name] = field.value;
});
// Send to AISeller
await window.AISeller?.setContext?.(data);
}
};
// Add event listener
window.addEventListener('hs-form-event:on-submission:success', handleSubmit);
// Load HubSpot script dynamically
const script = document.createElement("script");
script.src = "//js.hsforms.net/forms/v2.js";
script.onload = () => {
window.hbspt.forms.create({
portalId: "YOUR_PORTAL_ID",
formId: "YOUR_FORM_ID",
target: "#hubspot-form",
});
};
document.body.appendChild(script);
// Cleanup when component unmounts
return () => {
window.removeEventListener('hs-form-event:on-submission:success', handleSubmit);
};
}, []);
return <div id="hubspot-form" />;
}
**Usage in your page:**
```tsx
import { HubSpotForm } from "@/components/HubSpotForm";
export default function ContactPage() {
return (
<div>
<h1>Contact Us</h1>
<HubSpotForm />
</div>
);
}
```
4. Normal Form in React/Next.js
Use this if: You have a custom form built in React or Next.js (not using HubSpot).
How it works: On form submission, we collect all input values and send them to Docket.
"use client";
import { FormEvent } from "react";
// TypeScript type definitions
declare global {
interface Window {
AISeller?: {
setContext?: (data: Record<string, unknown>) => Promise<unknown>;
resetContext?: () => Promise<unknown>;
};
}
}
export function ContactForm() {
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Collect all form fields
const formData = new FormData(e.currentTarget);
const data = Object.fromEntries(formData);
// Send to AISeller
await window.AISeller?.setContext?.(data);
// Continue with your normal form handling
console.log("Form submitted:", data);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="text" name="company" placeholder="Company" />
<input type="text" name="phone" placeholder="Phone" />
<button type="submit">Submit</button>
</form>
);
}
Troubleshooting
Issue | Solution |
window.AISeller is undefined | Make sure the Docket script is loaded on the page before your form code runs |
Form data not appearing in AI chat | Check browser console for errors. Verify `setContext` is being called with the correct data |
HubSpot form values have weird prefixes | The code above automatically cleans these up (removes "0-1/" prefixes) |