---
title: "Embed to Webflow sites"
url: "https://help.magicblocks.ai/en/article/embed-your-ai-agent-on-webflow"
language: "en"
last_updated: "2026-03-18T08:20:28.616Z"
---

# 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**

Before we jump in, make sure you have everything ready:

-   A **published** AI Agent built in MagicBlocks
-   Your **MagicBlocks Embed Code** (here’s the step-by-step on how to get the code ([Embedding](https://help.magicblocks.ai/en/article/embedding-your-ai-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:

1.  Go to **Agents**
2.  Select the Agent you want to go live with
3.  Navigate to the **Go Live**
4.  **Copy** the code to Embed.![1](https://export.supademo.com/renders/2hibmqch2q/out.png)

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](https://webflow.com/), 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 contact 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.