Hey all,
With the new release a few weeks ago I have been struggling with integration. The first hurdle of embedding ChatKit in my bubble app was achieved (I’ll add a quick “how I did it” below) but I am still challenged by enabling widget interactions / extracting content from the conversations into bubble. The majority of content I have found online covers a general surface level and I have yet to find how to integrate the more advanced abilities (primarily via widgets.)
For example, the image below is one of the example widgets that OpenAI provides when integrating into your agent workflow.
Now, I have no issues with the agents extracting data from my bubble application (I primarily rely on Vector Stores + Google Drive MCP). So for the example widget above, it has no issue filling the from/to emails and the subject/body.
My challenge is registering when a button is pressed. Currently, when I press “send email” inside my bubble embedded chatkit, I get an error inside the chat “An error has occurred. Please try again later.” Outside, within the browser console they flag CORS policy and invalid GET URL. (I have spent hours going back and forth trying to resolve this and cannot figure out what is causing it.)
Has anyone integrated actions into their bubble app with these widgets, and if so would you please share how? I’m confident I will be able to get the action to then trigger my bubble workflows (i.e. sendgrid API + normal bubble database updates) but that leads to my other issue:
How do I extract the information within that body? Will it be as simple as reading the schema from the widget in the button workflow?
Would be a massive help if anyone could share some insights or their expertise, thank you!!
For context (and a “how I did it") for embedding ChatKit inside bubble:
-
I downloaded the official Github files for the “openai-chatkit-starter-app”
-
Created an account with Vercel, and connected my GitHub account + the above files
-
Deployed via Vercel and then utilized an iFrame in an HTML element on my page:
Note: Many issues I ran into with embedding the ChatKit were due to integrating my agent builder workflows and altering the GitHub files. Also, the OpenAI security domains were important to ensure both your bubble app + vercel deployments were added as sometimes your Vercel sessions would not even show up due to not being added / updated in your approved domains.