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.
If you’re using OpenAI’s Agent Builder or ChatKit in Bubble, make sure your API connector is configured for streaming responses. I’ve noticed widgets sometimes fail due to missing event listeners or incorrect JSON parsing. Adding a small delay for data binding and testing with console logs helps confirm whether responses are reaching the UI properly.
I have developed in the Firebase Studio , it also asks for the repo to start.
I think Vercel is good but i prefer Gemini power with my side.
This is what i am testing right now , i am passing the “text” with iframe below script
<iframe id="chatkit-iframe" src="URL_TO_YOUR_CHATKIT_APP"></iframe>
<script>
// Get the iframe element
const iframe = document.getElementById('chatkit-iframe');
// Wait for the iframe to load
iframe.onload = function() {
// Prepare the message you want to send
const message = "Hello, this is a message from the parent application!";// Send the message to the iframe
iframe.contentWindow.postMessage({ type: 'NEW_MESSAGE', message: message }, '*');
};
This is what i am trying to do to pass the output :
Listen for the Message from the Iframe:
You need to add a global event listener. The easiest way is to add another HTML element to your page (it can be small and hidden).
Paste the following code inside this new HTML element. This code will listen for messages and, when it receives one, will trigger the “Javascript to Bubble” element you just created.
<script>
window.addEventListener('message', function(event) {
// Optional, but recommended: check the message origin for security
// if (event.origin !== "https://your-chatkit-app-url.com") return;
// Check if it's the correct message type from our iframe
if (event.data && event.data.type === 'ASSISTANT_RESPONSE') {
// Get the message text
const assistantMessage = event.data.message;
// Use the function name from your "Javascript to Bubble" element
// This sends the data into the Bubble element
window.bubble_fn_handleAssistantResponse(assistantMessage);
}
});
</script>
Create a Workflow to Handle the Received Data:
Go to your “Workflows” tab and create a new event: Elements → A Javascript to Bubble event.
This workflow will run every time the handleAssistantResponse function is called by the script above.
Inside this workflow, you can access the assistant’s message with This JavascripttoBubble's value.
Now you can do whatever you want with it! For example:
Elements -> Set state of a page or group to display the text.
Data -> Create a new thing... to save the response to your database.
Some Notes
Please add policy to not render rather than your bubble website , security purposes
Just adding another setup approach in case it helps anyone
I’m using the ChatKit web component directly on a Bubble page. The session token is created through the API Connector and a Bubble backend workflow, so that part is handled securely on the backend.
Inside the HTML element, I also listen for actions coming from the widget — for example, when a “send email” button is pressed in the widget, the script calls a Bubble backend workflow. Once the workflow finishes, that same script sends a short confirmation message back into the chat so the user knows it has completed.
Sharing in case this is useful as I couldn’t find any other posts or tutorials on how to do so!
