Joonbot

How to integrate Joonbot with Webflow

Joonbot replaces static forms with conversational interfaces that qualify leads, recommend products, and automate support. The chatbot guides visitors through multi-step processes while capturing structured data you can route to your CMS or business tools.

You can add Joonbot to Webflow pages using custom Code Embed elements for quick implementation. You can also use third-party automation tools like Zapier for no-code automation between Joonbot and Webflow.

Teams that need to sync conversation data with Webflow CMS collections can use Joonbot's webhook system with middleware functions that call Webflow's REST API.

Add Joonbot with Code Embed

The Code Embed method places Joonbot chatbots anywhere on your Webflow pages using a JavaScript snippet. You control exactly where the chatbot appears and can configure multiple bots across different pages.

To add the Joonbot chatbot to your site, add a custom Code Embed element to your Webflow canvas and paste your Joonbot embed code. Get the embed code from your Joonbot dashboard after you build your chatbot flow.

For site-wide deployment, paste the code in Site settings > Custom code > Head code instead.

This integration supports several chatbot formats:

• Floating widget chatbots — appear in the bottom corner of pages for persistent access to conversations
• Inline embedded chatbots — sit within page content using iframe-based integration with responsive sizing
• Modal popup chatbots — trigger on user actions like button clicks or exit intent
• Full-page chatbots — take over entire pages for focused conversation flows

Keep these technical details in mind when implementing:

Custom code effects only appear after you publish your site, not in the preview.

Tip: Set iframe dimensions to 100% width and height for responsive behavior across device sizes. The chatbot loads asynchronously and won't block page rendering.

Use third-party automation tools

Connect Joonbot to Webflow using third-party automation tools like Zapier when you need no-code automation. This bypasses the need for custom middleware and API integration. Zapier triggers when Joonbot conversations complete, then can create CMS items, send emails, update spreadsheets, or notify team channels.

Common patterns include capturing leads in Google Sheets while also adding them to Webflow CMS, sending conversation transcripts to Slack, or triggering Mailchimp campaigns based on chatbot responses. Zapier handles the data transformation between platforms without custom code.

Connect chatbot data to Webflow CMS with webhooks

Joonbot sends conversation data through webhooks when users complete chatbot flows. This captures lead information, form responses, and conversation transcripts in Webflow CMS collections. You'll need middleware to bridge Joonbot's outbound webhooks with Webflow's CMS API.

Configure webhooks in your Joonbot dashboard by adding a webhook block to your chatbot flow. Point the webhook to a serverless function (like Netlify Functions or Vercel Edge Functions) that processes the payload and calls Webflow's API. Use asynchronous webhook mode for CMS syncing since you don't need to modify the conversation in real-time.

Here's how to set this up:

1. Set up webhook receiver to create a serverless function endpoint that accepts POST requests from Joonbot
2. Parse conversation data to extract user responses from the JSON payload Joonbot sends
3. Map to CMS fields to transform chatbot variables to match your Webflow collection schema
4. Create CMS items to call POST /collections/{collection_id}/items to add entries
5. Handle errors by implementing retry logic since Joonbot expects 2xx status codes for successful webhook delivery

Joonbot sends variable payloads based on your chatbot configuration. The JSON includes user responses as key-value pairs plus a full conversation transcript. You'll need dynamic field mapping to handle different chatbot flows with different variables.

What you can build

Integrating Joonbot with Webflow replaces static forms with conversational interfaces that guide visitors through multi-step processes.

• Lead qualification systems — capture visitor information through natural conversations, score responses automatically, and route high-value leads to CMS collections for follow-up while filtering out unqualified prospects.
• Product recommendation engines — ask questions about customer needs, use logic jumps to guide them through options, and display personalized product suggestions based on their answers.
• Event registration flows — collect attendee information conversationally, integrate with Calendly for scheduling, and store registration details in Webflow CMS while sending confirmation emails through connected tools.
• Customer support automation — answer common questions through chatbot flows, deflect support tickets with self-service options, and capture complex issues as CMS entries for your team to address later.