Add an AI Chatbot — Automate support in minutes.

Add an AI Chatbot to Your Framer Site

Your Framer site looks incredible. The typography is perfect, and the animations are smooth. But while you are sleeping, who is answering your customers' questions?

Adding an AI chatbot (like Tidio, Intercom, or a custom agent) can transform your static portfolio or landing page into a 24/7 sales machine. The best part? You don't need to be a developer to do it. Framer makes embedding these tools incredibly easy.

In this guide, we will walk through exactly how to take a script from a chatbot provider and make it live on your site in under 5 minutes.

Step 1: Get Your Snippet

First, you need the "brain." You can use any provider you like, but for this tutorial, the process is the same whether you use Tidio, Intercom, or HubSpot.

1. Log in to your chatbot provider's dashboard.

2. Look for the "Installation" or "Settings" section.

3. Find the option for "JavaScript" or "Manual Installation."

4. Copy the code snippet to your clipboard. It usually starts with <script>.

Step 2: Navigate to Custom Code

Now, let's head back to Framer.

1. Open your project.

2. Click on the Site Settings gear icon in the top right corner.

3. Select the Custom Code tab.

4. You will find the Add Scripts option.

Step 3: Paste the Code

This is the only technical part, and it's just a copy-paste job.

1. Most chatbot providers will tell you exactly where to put the code. Usually, they ask for it to be in the Body tag.

2. Paste your snippet into the End of Body text box.

3. Why here? Putting scripts at the end of the body ensures your website loads its visuals first, so the chatbot doesn't slow down your site speed.

Step 4: The Preview Trick

You paste the code, you go back to the canvas, and... nothing happens. Did it work?

Don't panic. Custom code scripts do not run on the design canvas (to keep the editor fast).

1. Click the Play (Preview) button in the top right.

2. Wait 2–3 seconds.

3. You should see your chat widget appear in the bottom corner of the preview window.

Step 5: Publish and Test

If it looks good in the preview, it’s time to go live.

1. Click Publish.

2. Open your live domain on your phone and desktop.

3. Send a test message to your bot to ensure the connection is working.

Wrap Up

You have just upgraded your site from a digital brochure to an interactive tool. Now, when a potential client lands on your portfolio at 2 AM, your AI agent can capture their email and answer their questions instantly.

Keep experimenting with different widgets - you can use this same process for analytics, calendars, or newsletters!