Framer Integration

Add ads to your Framer site

1 Embed Component (Recommended)

Use Framer's built-in Embed component to add your ad.

Open your project in Framer

Press / or click Insert to open the component menu

Search for "Embed" and drag it to your canvas

In the right panel, paste your embed code in the HTML field

<iframe src="https://example.com/ad-slot-id" style="width:100%;height:auto;min-height:90px;border:none;overflow:hidden;" frameborder="0" scrolling="no"></iframe>

2 Code Component (React)

Create a reusable React code component for your ad.

Go to Assets → Code in the left panel

Click New Component

Replace the code with the following

import { useEffect, useRef } from "react"

export default function BeaverAd() {
    const containerRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (containerRef.current) {
            containerRef.current.innerHTML = `<iframe src="https://example.com/ad-slot-id" style="width:100%;height:auto;min-height:90px;border:none;overflow:hidden;" frameborder="0" scrolling="no"></iframe>`
        }
    }, [])

    return (
        <div
            ref={containerRef}
            style={{
                width: "100%",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
            }}
        />
    )
}

✅ After saving, drag this component from Assets to any page!

3 Site-wide Custom Code

Add code that runs on every page of your Framer site.

Go to Site Settings (gear icon)

Navigate to General → Custom Code

Paste in the End of <body> tag section

<!-- Beaver.ad - Floating Ad -->
<div id="beaver-floating-ad" style="position:fixed;bottom:20px;right:20px;z-index:9999;background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.15);padding:12px;">
  <iframe src="https://example.com/ad-slot-id" style="width:100%;height:auto;min-height:90px;border:none;overflow:hidden;" frameborder="0" scrolling="no"></iframe>
  <button onclick="this.parentElement.style.display='none'" style="position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#333;color:white;border:none;cursor:pointer;font-size:14px;line-height:1;">×</button>
</div>

💡 Note: Custom code requires a Framer paid plan.

4 CMS Blog Integration

Add ads to your Framer CMS-powered blog posts.

Open your Blog Post template page

Add an Embed component after your content area

Paste your embed code

<!-- Beaver.ad - Blog Post -->
<div style="margin:40px 0;padding:20px;background:#f9f9f9;border-radius:12px;text-align:center;">
  <p style="font-size:11px;color:#999;margin:0 0 10px 0;text-transform:uppercase;letter-spacing:1px;">Sponsored</p>
  <iframe src="https://example.com/ad-slot-id" style="width:100%;height:auto;min-height:90px;border:none;overflow:hidden;" frameborder="0" scrolling="no"></iframe>
</div>

Back