OpenAI's new ChatKit

Plugin builders
1

OpenAI just released a way to embed a chat UI right from their platform, complete with agents you can manage in the dashboard.

Has anyone successfully implemented this feature into their Bubble app?

1 Like
3

I’ve successfully implemented it with this code:

<!-- ChatKit embed -->

<script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js" defer></script>



<style>   /* Theme variables */   openai-chatkit{     --ck-background:#0f1012;     --ck-surface-color:#0f1012;     --ck-text-primary:#9B9EA3;     --ck-accent-color:#08F870;     --ck-density:compact;   } </style>

<script type="module">   (async () => {     await customElements.whenDefined('openai-chatkit');     const el = document.getElementById('chat');     // Provide via Bubble dynamic data (e.g., "Insert dynamic data" → token field)     const token = '{{CLIENT_TOKEN}}

'; // ← set your client_secret here

if (!token) {   console.error('ChatKit: missing client_secret token.');   return; }  el.setOptions({   api: { getClientSecret: () => token },   theme: {     colorScheme: 'dark',     color: { accent: { primary: '#08F870', level: 2 } },     radius: 'pill',     density: 'compact'   },   composer: { placeholder: 'Ask me anything...' },   startScreen: {     greeting: "Hey, I'm Kai from TradingWizard AI. Your trading friend",     prompts: [       { label: 'Analyze Bitcoin',     prompt: 'Analyze Bitcoin',     icon: 'search' },       { label: 'Find Trade Ideas',    prompt: 'Find Trade Ideas',    icon: 'write'  },       { label: 'Explain Market Mood', prompt: 'Explain Market Mood', icon: 'search' }     ]   } });

})();
3 Likes