Embed to Webflow sites

Ready to bring your AI Agent to your Webflow site? With just a few quick steps using Webflow’s built-in Custom Code settings, you can embed your Agent and go live.

🔧 What You’ll Need Before You Start

To complete this setup, make sure you have:

✅ A published AI Agent in MagicBlocks 
✅ Your MagicBlocks Embed Code (check here for the step-by-step to get the code Go Live: Embedding Your Al Agent to a Website ) 
✅ Admin access to your Webflow dashboard

🛠 Step-by-Step: How to Embed Your AI Agent on Webflow

1. Copy the Embed Code from MagicBlocks

Start in your MagicBlocks dashboard:

Go to Agents

Select the Agent you want to go live with

Navigate to the Go Live

Copy the code to Embed.

This is the script you’ll paste into Webflow to activate the Agent on your site.

🎥 This video will explain the step-by-step process on how to embed your AI Agent on Webflow:

2. Log in to Webflow

From your Webflow dashboard, click All Sites.

3. Click the Three Dots on Your Website’s Tile

Find the project where you want to install the Agent and click the three dots (⋯) on the right side.

4. Click “Settings”

From the dropdown menu, select Settings to access your site’s configuration panel.

5. Go to the “Custom Code” Tab

Click on the Custom Code tab from the top navigation.

6. Paste the Embed Code into the Header Section

Scroll to the Head Code section and paste your MagicBlocks embed script here.

7. Click “Save”

Scroll down and click the Save button to apply your changes.

8. Click the “Publish” Button

Return to the top of the page and click Publish.

9. Publish to Selected Domains

Select the domain(s) where your website is live, then confirm the Publish action.

10. Click “Close”

Once your publish is complete, click Close to exit the screen.

11. Open Your Website

Back on your dashboard, click the arrow icon beside your site name to preview the live version.

Your AI Agent Is Now Live 🎉

You should now see the MagicBlocks chat icon on your Webflow site.

Start Chatting & Testing

Click on the chat icon and:

Test your lead capture flow

Confirm your Agent’s tone, persona, and behavior

Try qualification steps, scheduling (if enabled), or CRM handoff

Make sure everything runs smoothly and matches your brand experience.