ChatKit for Bubble - Quick Start Guide
🚀 Setup (3 Steps)
Step 1: Create a Session
⚠️ Important: This API call must happen in a Backend Workflow (never expose your OpenAI API key on the frontend!)
Call OpenAI:
Endpoint:
https://api.openai.com/v1/chatkit/sessionsMethod: POST
Headers:
Authorization: Bearer YOUR_API_KEY
Content-Type: application/json
OpenAI-Beta: chatkit_beta=v1
Body:
json{
"workflow": {"id": "wf_YOUR_WORKFLOW_ID"},
"user": "bubble-user-123"
}
Save the client_secret from the response - you'll need it next!
Step 2: Add ChatKit Element
Drag ChatKit element onto your page
Set Client Secret = the client_secret from Step 1
Set Config JSON = Paste the entire code from ChatKit Studio Playground (with TypeScript) OR just the JSON. Both work! Sets theme, greeting, prompts, etc
Step 3: Whitelist Your Domain
Go to OpenAI → Security → Domain Allowlist
Add your Bubble app's domain
✅ Done!
Your ChatKit widget is now live and ready to use.
Built on Bubble
