5d:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/3xktnaujy87te.js","/creators-assets/_next/static/immutable/chunks/3futvmn4fb096.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1ozc4wc1du10z.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1n4sz3rar6_gg.js","/creators-assets/_next/static/immutable/chunks/2h_rs7nbfvb7-.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/03stgnoj58q7s.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3gipqcylfnv5h.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/1ftf6fdyz0hh4.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/2y36h9lujf54i.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 5e:Ta4d,

Transform static designs into engaging, interactive conversations with the Conversational Bot UI. This component lets you create realistic chatbot experiences directly inside Framer using simple, flexible chat flows - no backend, no APIs, and no complex setup required. Whether you're building a SaaS landing page, onboarding experience, or showcasing an AI product, this component helps you capture attention instantly and guide users through a dynamic, story-driven interface.

Designed with both designers and developers in mind, the component delivers a smooth, app-like chat experience with typing animations, interactive options, and seamless transitions between conversation steps. It mimics real messaging interfaces, making your product feel more alive, intuitive, and modern - perfect for increasing user engagement and time spent on your page.

Key Features

Multi-step conversational flows
Realistic typing animation for AI-like interaction
Clickable options to guide user journeys
Restart and end chat functionality
Mobile-inspired UI for a clean, modern look
Works instantly inside Framer (no integrations needed)

Fully Customizable

Make it truly yours with powerful customization controls:

Theme Support — Switch between dark and light modes
Accent Color — Match your brand perfectly
Scale Control — Adjust size to fit any layout
Custom Chat Flow — Define your own conversation logic.
Start State Control — Customize where the conversation begins

Perfect For

SaaS onboarding experiences
AI product demos
Landing page engagement
Interactive storytelling
Portfolio projects

Instead of overwhelming users with static content, guide them through a conversation that feels natural and engaging. This approach not only improves user experience but also helps communicate your product’s value in a more intuitive and memorable way.

Note: Set width and height of the component to fit and adjust manually through control panel.

5a:[["$","$L5d",null,{"post":{"id":"019d6821-a4dd-7b29-86a7-cfdc6cc57f22","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"214a75c7-48b9-4dca-9fff-a785a048af51","name":"Shakil Ur Rehman","slug":"shakil-ur-rehman","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/214a75c7-48b9-4dca-9fff-a785a048af51/yknzo0lv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"K6fciVPCOj2N1XhyN1de","resolved":true,"title":"Smart AI Support","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Transform static designs into "},{"type":"text","text":"engaging, interactive conversations","marks":[{"type":"bold"}]},{"type":"text","text":" with the Conversational Bot UI. This component lets you create realistic chatbot experiences directly inside Framer using simple, flexible chat flows - no backend, no APIs, and no complex setup required. Whether you're building a SaaS landing page, onboarding experience, or showcasing an AI product, this component helps you capture attention instantly and guide users through a dynamic, story-driven interface."}]},{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-s2qihwj0-cQ57lBKIlSdbV8xwZQsutrtHHpnyAC","link":null,"caption":"","uploadId":null}},{"type":"paragraph","content":[{"type":"text","text":"Designed with both designers and developers in mind, the component delivers a "},{"type":"text","text":"smooth, app-like chat experience","marks":[{"type":"bold"}]},{"type":"text","text":" with typing animations, interactive options, and seamless transitions between conversation steps. It mimics real messaging interfaces, making your product feel more alive, intuitive, and modern - perfect for increasing user engagement and time spent on your page."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-step conversational flows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Realistic typing animation for AI-like interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clickable options to guide user journeys"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Restart and end chat functionality"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile-inspired UI for a clean, modern look"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works instantly inside Framer (no integrations needed)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fully Customizable","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Make it truly yours with powerful customization controls:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Theme Support","marks":[{"type":"bold"}]},{"type":"text","text":" — Switch between dark and light modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accent Color","marks":[{"type":"bold"}]},{"type":"text","text":" — Match your brand perfectly"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scale Control","marks":[{"type":"bold"}]},{"type":"text","text":" — Adjust size to fit any layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Chat Flow ","marks":[{"type":"bold"}]},{"type":"text","text":"— Define your own conversation logic."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start State Control","marks":[{"type":"bold"}]},{"type":"text","text":" — Customize where the conversation begins"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS onboarding experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI product demos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing page engagement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive storytelling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio projects"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of overwhelming users with static content, guide them through a "},{"type":"text","text":"conversation that feels natural and engaging","marks":[{"type":"bold"}]},{"type":"text","text":". This approach not only improves user experience but also helps communicate your product’s value in a more intuitive and memorable way."}]},{"type":"paragraph","content":[{"type":"text","text":"Note: Set width and height of the component to fit and adjust manually through control panel.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":" "}]}]},"introduction":"Turn pages into AI conversations","slug":"chatflow","author":{"framerUserId":"214a75c7-48b9-4dca-9fff-a785a048af51","name":"Shakil Ur Rehman","slug":"shakil-ur-rehman","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/214a75c7-48b9-4dca-9fff-a785a048af51/yknzo0lv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/K6fciVPCOj2N1XhyN1de/chatflow-R0kJnwLwHdbAynogfIVpq2IEs1NKa4","metadata":{"tint":{"h":210,"s":13,"l":24},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-25T12:38:17.905Z","updatedAt":"2026-06-20T06:24:31.029Z","publishedAt":"2026-04-07T13:28:48.605Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://organic-llama-152507.framer.app/","price":"9","paymentUrl":"https://www.paypal.com/ncp/payment/KSPUH4KL9QNGE","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"98OEcw1EmeU1mNeLcRbY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-07T13:28:48.605Z","updatedAt":"2026-04-07T13:28:48.605Z","reported":false,"type":"post"}}],"$L5f"]

Suggested for you