Framer Setup (Using Plugin)

This article guides you through setting up the Facebook Conversions API on Framer using the official PixelFlow plugin from the Framer Marketplace. This is the recommended method for automatic setup and management.

Prerequisites

• Framer project access with permissions to install plugins

• Admin access to Meta Business Manager with your Meta Pixel credentials

• Remove any existing Facebook Pixel scripts to avoid duplicate tracking

1. Login or Register to PixelFlow Dashboard

Before starting the setup process, you'll need a PixelFlow account.

• If you're a new user, you'll create your account during the plugin authentication step (Step 4 below)

• If you're an existing user, you'll log in during the authentication step

• A free 7-day trial starts automatically with no credit card required

2. Install the PixelFlow Framer Plugin

1. Visit the PixelFlow Framer plugin in the Framer Marketplace

2. Click Install Plugin or Get Plugin

3. Choose which Framer project to install the plugin into

3. Open the PixelFlow Plugin in Your Framer Project

1. In your Framer project editor, locate the PixelFlow plugin in your plugins panel

2. Click Open Plugin to launch it

4. Login to the Plugin

When you open the plugin, you'll see a login window prompting you to authenticate with PixelFlow.

For existing PixelFlow users:

• Click Login and enter your email and password, OR

• Use Sign in with Google

For new users:

1. Click Start Free Trial

2. Create your account with email and password, OR use Sign in with Google

3. Complete registration

After successful authentication, a new browser tab will open briefly and then automatically close as it syncs with the PixelFlow dashboard.

5. Wizard Auto-Opens: Autosync or Manual Site Sync

After successful authentication, the PixelFlow setup wizard will automatically open and guide you through the remaining steps.

Automatic Sync (recommended):

• PixelFlow will attempt to automatically detect your Framer project information

• If successful, your site domain will be pre-filled

Manual Entry (if autosync fails):

• If automatic detection doesn't work, you'll see a warning message

• Manually enter your website domain (starting with https://)

6. Add Site Domain and Currency

In the first step of the wizard, configure your site details:

1. Enter your domain name (starting with https://)

2. Choose your currency from the dropdown (optional, used for eCommerce tracking)

3. Click Continue or Next to proceed

7. Add Your Meta Pixel

In the second wizard step, connect your Meta Pixel:

1. Add your Pixel Name (can be any name you choose for identification)

2. Add your Pixel ID (find this in Facebook Events Manager)

3. Add your Meta Pixel Access Token (generate this in Facebook Events Manager under Settings)

4. Check the box to confirm you've removed any existing native Meta Pixel

5. Click Add Pixel or Save

8. Activate PixelFlow and Publish Your Site

In the third wizard step, activate tracking for your Framer site.

Activate the plugin:

1. In the PixelFlow plugin panel, toggle ON Activate PixelFlow

2. Click the Publish Changes button in the plugin

Publish your Framer site:

1. In the Framer editor, click the Publish button in the top toolbar

2. Click Update to publish your changes to your live site

9. Interact with Your Site and See Confetti

The final wizard step helps you verify your setup is working correctly.

1. Visit your live website in a new browser window or incognito/private mode

2. Navigate to a few pages on your site (e.g., homepage, then click some links)

3. Return to the PixelFlow wizard—it will automatically poll for events every 10 seconds

4. When the first Page View event is detected, you'll see:

   • A confetti animation (purple, pink, and blue particles from center screen)

   • A green congratulations modal: "Congratulations! Your Framer site is now connected to PixelFlow"

   • The wizard will close automatically

5. Your site status will change to "Connected" in the Pixels table on your Overview page

Additional verification:

• Check the Events page in your PixelFlow dashboard

• Check Facebook Events Manager to confirm events are arriving (look for both "Browser" and "Server" events)

For detailed verification steps, see How to Test and Verify Your PixelFlow CAPI Setup.

10. Set Other Tracking

After the wizard closes, you can configure additional event tracking beyond Page Views.

Available tracking options:

• Event Classes: Track form submissions, button clicks, and custom interactions using CSS classes—see How to Track Events

• Tracking URLs: Track specific page visits, button clicks, or link interactions

• Calendly Integration: Automatically track Lead or Schedule events when users book calls

All tracking is unlimited on every plan, with no limits on events or pixels.

Troubleshooting

Limitations

• Session key expiration: Authentication sessions expire after 5 minutes. If you don't complete login within this window, you'll need to reopen the plugin.

• Popup requirements: The authentication flow requires a popup window. If your browser blocks popups, you must allow them for PixelFlow.

• Account linking: You cannot link a Google account to an existing email/password account. Choose one authentication method.

• Wizard polling window: The verification step polls for events for up to 1 hour. After that, check the Events page manually.

• Manual sync limitations: If autosync fails and manual entry doesn't work, contact support for assistance.

Getting Help

If you're experiencing issues with your Framer setup:

• Check that you've completed all 10 steps above and published your site

• Verify your Meta Pixel ID and Access Token are correct in Facebook Events Manager

• Use browser developer tools (F12) to check for JavaScript errors on your site

• Contact PixelFlow support at [email protected] or book a free setup call

When contacting support, please provide:

• Your Framer site URL

• Screenshots of any error messages

• Whether you're seeing events in your PixelFlow dashboard

• Whether you're seeing events in Facebook Events Manager