Pixelflow
All Collections
Installation Guides
Webflow
Webflow Setup (Using Plugin)

This article guides you through the process of how to set up the Facebook Conversions API on Webflow using the PixelFlow Webflow plugin.

Note: If you use Webflow Commerce, we can automatically track your eCommerce events. See more information in the Auto track Webflow eCommerce events guide.

Prerequisites

  • Webflow editor access with permissions to install apps and modify site settings

  • 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

You don't need to visit the dashboard first—authentication happens directly through the Webflow app when you launch it.

2. Install the PixelFlow App from Webflow Marketplace

  1. Visit the PixelFlow Webflow app in the Webflow Marketplace

  2. Click Install App or Login to Install

  3. Choose which site or directory to install the app into

  4. Click Authorise App to grant PixelFlow permission to access your Webflow site

Authorization complete: You've now granted PixelFlow access to your Webflow site. The app will appear in your Webflow editor's Apps sidebar.

3. Launch the PixelFlow App in Webflow

  1. Open your Webflow dashboard and hover over the site you want to use PixelFlow on

  2. Click Open in Webflow to open the Webflow editor

  3. In the left sidebar, ensure you're in Design Mode

  4. In the left sidebar, click the Apps icon

  5. Select PixelFlow from the installed apps list

  6. Click Launch App

Where to find Design Mode: Design Mode is located in the top-left corner of the Webflow editor. Make sure it's selected (not "Preview" or other modes) before accessing the Apps menu.

4. Login to the Plugin

When you launch the app, a browser window will open asking you to authenticate with PixelFlow.

For existing PixelFlow users:

  • Log in with your email and password, OR

  • Click Sign in with Google

For new users:

  1. Click Create account and register with your email and password, OR use Sign in with Google

  2. Complete registration and wait for the automatic redirect back to Webflow

Session expires after 5 minutes: You have 5 minutes to complete the authentication process. If you take longer, the session will expire and you'll need to relaunch the app from Webflow to generate a new session.

Google account already in use? If you see an error saying "An account with this email already exists," it means you previously created a PixelFlow account with email/password. Log in using your email and password instead of Google OAuth.

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

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

Automatic Sync (recommended):

  • PixelFlow will attempt to automatically detect your Webflow site 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 (e.g., https://www.mysite.com)

The wizard uses a 4-step process with visual navigation to guide you through setup. You can move between steps as needed.

6. Add Site Domain and Currency

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

  1. Confirm or enter your website domain (e.g., https://www.mysite.com)

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

  3. Click Continue or Next to proceed

Your Webflow site is now registered in PixelFlow and will appear in your Sites list in the dashboard.

7. Add Your Meta Pixel

PixelFlow loads both your Facebook Pixel and Facebook Conversions API simultaneously with automatic event deduplication to ensure accurate tracking. This means you can remove any existing Facebook Pixel scripts from your website.

In the second wizard step, connect your Meta Pixel:

  1. Add your Pixel Name (this 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

Need help finding your Pixel ID or Access Token? Check out our simple guide on How to Find Your Pixel and Generate your Access Token

8. Copy and Paste Embed Code to Your Site

In the third wizard step, PixelFlow generates a unique tracking script for your Webflow site.

Copy the script:

  1. In the wizard, click the Copy Script button

  2. The script will be copied to your clipboard

Add to Webflow Custom Code:

  1. Go to your Webflow dashboard and click All Sites

  2. Hover over your website and click the Settings (cog) icon

  3. In the left sidebar, scroll down to Custom Code and click it

  4. Paste your PixelFlow script in the Head Code section

  5. Click Save Changes

Publish your site:

  1. In the Webflow editor, click the Publish button in the top right corner

  2. Select your production domain (your live website)

  3. Click Publish to selected domains

Don't copy code from another site: Each Webflow site has a unique identifier in the PixelFlow script. If you switch sites or pixels, always copy the new script from the PixelFlow Webflow app—don't reuse old code from Custom Code sections.

Automatic Script Updates: Your PixelFlow script will automatically be updated to apply any new changes. New website visitors will receive an update immediately, those who currently use your website will receive it in up to 1 mins (when script cache is invalidated). No additional action is required from your end. However, if you added your script before the 27th November 2024, you'll need to update it one last time to the latest version of the script which will update itself going forward.

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 Webflow 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

Setup complete! PixelFlow is now tracking Page View events on your website. Events should appear in your PixelFlow dashboard within 2-3 minutes.

No events appearing? If you don't see events after a few minutes, verify that:

  • You published your Webflow site to your production domain

  • The script is correctly pasted in Settings → Custom Code → Head Code

  • You're visiting the live site (not the Webflow preview)

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

  • Webflow eCommerce: Auto-track product views, add to cart, checkout, and purchases—see Auto Track Webflow eCommerce Functionality

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

Access these settings from your PixelFlow dashboard Overview page or the Events page. Each site can have custom tracking configurations.

Troubleshooting

Symptom

Likely Cause

Solution

Login window doesn't appear

Popup blocker is enabled

Allow popups for PixelFlow in your browser settings, then relaunch the app from Webflow

"Session expired" or "Session not found" error

Took longer than 5 minutes to authenticate

Close the login window and relaunch the app from Webflow to generate a new session

"An account with this email already exists"

Email is already associated with an email/password account

Log in with your email and password instead of Google OAuth

Autosync fails or shows warning

Webflow site information couldn't be detected

Manually enter your domain in the wizard and proceed with setup

No events appearing in PixelFlow dashboard

Script not added or site not published

Verify the script is in Custom Code → Head Code, then republish your site

Events not appearing in Facebook Events Manager

Meta Pixel not configured or incorrect Access Token

Relaunch the PixelFlow app from Webflow and verify your Pixel ID and Access Token

No confetti after interacting with site

Events not reaching PixelFlow or wizard timeout

Wait 2-3 minutes and check the Events page manually. Wizard polls for 1 hour max

Redirected to subscription page after login

Trial expired or subscription inactive

Activate your subscription or start a new trial in the PixelFlow dashboard

Limitations

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

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

  • One script per site: Each Webflow site requires its own unique PixelFlow script. Don't copy scripts between sites.

  • 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.

Getting Help

If you're experiencing issues with your Webflow 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 Webflow 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

Was this helpful?