import useWidgetQuerySelector from '@chatbotkit/react/hooks/useWidgetQuerySelector' import clsx from 'clsx' export default function Page() { const widget = useWidgetQuerySelector('chatbotkit-widget', { waitForReady: true, }) useEffect(() => { // if the widget is not ready, do nothing if (!widget) { return } // setup the functions available to the widget AI bot widget.functions = { listFormFields: { description: 'Returns a list of form fields with their current values and descriptions.', parameters: {}, handler: () => { return Array.from( document.querySelectorAll('#form input, #form textarea') ).map((element) => { return { field: element.name, value: element.value, description: element.parentNode.parentNode.querySelector( '.input-description' ).textContent, required: true, } }) }, }, fillFormFieldValue: { description: 'Fill a single form field given a name and value. Returns "success" or "error: field not found".', parameters: { type: 'object', properties: { field: { type: 'string', description: 'The name of the form field', }, value: { type: 'string', description: 'The value to fill the form field with', }, }, required: ['field', 'value'], }, handler: ({ field, value }) => { field = field.trim().toLowerCase() const element = document.querySelector(`#form [name="${field}"]`) if (!element) { return `error: field "${field}" not found` } element.value = value element.focus() return 'success' }, }, } }, [widget]) return (

{/* name */}

Name

Your name will help us personalize your experience.

{/* email */}

We will send important information to this address.

{/* reason for visit */}

Reason for visit