#What is This Course?

"Add an AI Chatbot" is a free, text-based tutorial (9m reading time) on the Framer Marketplace, created by Sadman Alam. This framer resource shows how to embed an AI customer support agent into any Framer website without code—turning static pages into dynamic, responsive tools that handle inquiries 24/7. The guide starts with why AI chat matters (always-on support, sales boost), then delivers a 5-step process: get the snippet from your provider, navigate to Custom Code, paste in "End of Body", preview to test (canvas won't show it), and publish/live verify. Focused on popular providers like Tidio, Intercom, or HubSpot, it emphasizes performance (body-end placement) and the key preview trick. No duplicatable project or starter is mentioned, but the workflow is universal and applies directly in any Framer project. It's invaluable for designer-developers who want smart, automated engagement—adding real interactivity and conversion power to portfolios, landing pages, or client sites with minimal effort.

#What You’ll Learn ⚡

• Obtaining the correct JavaScript snippet from your AI chatbot provider's dashboard (Installation/Settings → Manual/JS option)

• Locating and using Framer's Custom Code panel (Site Settings → Custom Code → Add Scripts → End of Body) for script placement

• Understanding why scripts go in "End of Body" (prioritizes site load speed and avoids blocking)

• Testing the chatbot correctly—using Preview mode (Play button) since scripts don't run on the canvas

• Publishing and verifying the live chatbot on your domain across devices with a test message

#Who Is This For?

This tutorial is perfect for Framer users ready to add intelligent, always-on support—especially if your site feels static or you're losing leads from unanswered questions.

• Skill Level: Beginner—assumes no code experience, just basic Framer navigation

• Prior Knowledge Needed: Comfort opening Site Settings and previewing; sign-up with a chatbot provider (free tiers available)

• Use Case 1: Adding 24/7 AI support to portfolios, landing pages, or business sites for instant visitor answers

• Use Case 2: Enhancing client projects with automated engagement (FAQs, lead capture, recommendations)

• Pain Point Solved: No built-in AI chat in Framer—embed third-party widgets easily

• Pain Point Solved: Scripts not appearing on canvas—learn the preview trick to test reliably

• Bonus Fit: Freelancers/agencies wanting quick, high-value features that impress clients and boost conversions

#Course Structure Breakdown

This 9m text tutorial flows as a tight, 5-step guide—easy to follow while in your Framer project and chatbot dashboard, with an intro on AI chat benefits and clear actions.

• Intro / Recap / Problem Statement: Hooks with the power of AI chat (24/7 support, sales boost), notes static sites miss out, and promises a no-code embed workflow

• Main Demo Sections: Step 1: Get snippet from provider (Tidio/Intercom/HubSpot dashboard → Installation → JS/Manual); Step 2: Go to Framer Site Settings → Custom Code

• Key Live Examples or Walkthroughs: Step 3: Paste into "End of Body"; Step 4: Preview (Play button) to see widget appear (2–3 sec delay)

• Tips / Best Practices: Step 5: Publish and test live on domain/devices; notes on placement (body-end for speed), preview necessity, and broader uses (analytics, calendars)

• Wrap-up / Encouragement: Reinforces how simple it is to add smart features—encourages testing a message and enjoying 24/7 engagement