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. [Screenshot 2025-11-02 at 8.07.52 AM] 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.) [Screenshot 2025-11-02 at 8.13.25 AM] 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 :smiley: // 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. 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); } }); 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 :blush: 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! :+1:

Nice to see other people are checking out Chatkit! :slight_smile: I made a tool for building an MCP of your Bubble app. It’s quite useful for integrating it inside OpenAI Agent Builder. You can also check the post I made her ein the forum: [image] Build an MCP of your Bubble App Showcase Update for the Chatkit Integration! Added a feature for giving the AI context of the Current User, which will be the bridge for making sure the AI agent respects the privacy rules attached to that user when asking it to retrieve data trigger actions [image] Also, improve the logs view to have a better understanding of how the calls are being made to the MCP [image] Next step is to build a demo using all this to build an experience like https://chatkit.world/ where the user can interact … It also allows for the integration of Chatkit and listen to clicks on widgets!:slight_smile:

OpenAI / Agent Builder / ChatKit / Widgets

Need help

design.agx December 31, 2025, 8:41am 5

Nice to see other people are checking out Chatkit!

I made a tool for building an MCP of your Bubble app. It’s quite useful for integrating it inside OpenAI Agent Builder.

You can also check the post I made her ein the forum:

It also allows for the integration of Chatkit and listen to clicks on widgets!

Topic		Replies	Views
OpenAI's new ChatKit Plugin builders	1	319	October 9, 2025
Let a Embedded Conversational Agent Receive and Send Data to Bubble Frontend Need help	1	307	June 10, 2021
Can bubble build this...? Need help	2	649	June 17, 2021
Use bubble to build chatbot with ibm wattson APIs	3	1565	July 1, 2017
Embedding ChatGPT into Bubble? Please help Questions	4	159	December 5, 2024

OpenAI / Agent Builder / ChatKit / Widgets

Related topics