import useWidgetInstance from '@chatbotkit/react/hooks/useWidgetInstance' import clsx from 'clsx' /** * The example demonstrates how to use client-side functions to interact with * the ChatBotKit AI Widget. The example allows an AI bot to control the number * of boxes rendered and the animations applied to them. All of these actions * are performed via chat messages. */ export default function Page() { const widget = useWidgetInstance('chatbotkit-widget') useEffect(() => { // if the widget is not ready, do nothing if (!widget) { return } // setup the functions available to the widget AI bot widget.functions = { bookMeeting: { description: 'When invoked, the user will be presented with a form to book a meeting.', parameters: {}, handler: () => { widget.render({ frame: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ05tgQAH_KuE1nSqhagde5Xwg2BqZ-WGUQiIYI49cZBpWr0pALy1v04eCckGzyF1dp6L1gnjJCn?gv=true', }) const controller = new AbortController() controller.abort() return controller.signal }, }, } }, [widget]) return (

) }

Custom Components