To embed a Facebook pixel in your Webflow project, paste the pixel ID in project settings → integrations → Facebook pixel.

Learn more about creating a Facebook pixel, grabbing the ID, checking that your pixel's working, troubleshooting pixel errors, and more.
Need to know
You can only add one pixel to your site using this integration. If you need to add more pixels, use custom code to embed your pixels.
To avoid conflict, if you've already embedded pixel on your site, make sure to remove the code that initiates the pixel form your project's code before adding your pixel ID in the Facebook pixel integration section.

Delay for cookie consent

If you host websites that collect personal data from EU residents, you need to comply with GDPR. To do that, you can delay loading the pixel until your site visitors accept your cookie consent. Of course, when you enable this, you'll need to request consent on your site. To do that, add a cookie consent banner.

Adding a cookie consent banner

To request consent, you can integrate any cookie consent tool by embedding it in your project's footer. We list some on our integrations page. You can find more tools by searching the web.

Helpful resources

Create your own pixel cookie consent on your site

You can also create your own Facebook pixel cookie consent banner. Simply create a banner in the Designer and add the custom code in your project's footer.

Design your banner 

  1. Create the banner. Include your cookie notification message. 
  2. Give the banner an ID. We're using the following ID: consentPopup
  3. Add an "Accept pixel cookies" button or text link. Give it a class. Give this button an ID as well. We're using: consentBtn
  4. Add a "decline" or "close" button. Give it the same class.
  5. (optional) Include a "learn more" link and link your users to your privacy policy page.
  6. Drag the banner inside of a div block, give it a class: "Popup wrapper". Set this wrapper's position to fixed. Choose a preset position or manually adjust the position of your popup wrapper.
  7. Save the Popup wrapper as a symbol. Add it to all of your pages.

Create the interactions

  1. Select the "Accept" button. Add a mouse click trigger. Set the trigger to affect the class of the button. Under on mouse click, create a new animation: "Close the cookie popup". Select the "Popup wrapper" and add an action:
  • Move → y-axis = 100%. Make sure to set the target to affect the class.
  1. Select the "Decline" button. Add a mouse click trigger. Set the trigger to affect the class of the button. Under on mouse click, select "Close the cookie popup".
  2. Add a page trigger. Under when page starts to load, create a new animation: "Show the cookie popup". Select the "Popup wrapper" and add 2 actions:
  • Move → y-axis = 100%. Set this as the initial state. Make sure to set the target to affect the class.
  • Move → y-axis = 0.
  1. Go to each of your pages and add a page trigger. Under when page starts to load, choose "Show the cookie popup".
Important
Make sure that you select the "Popup wrapper" when creating animation actions. If you apply the actions to the banner itself, the custom code may not function correctly.

Embed the code

To make the cookie consent work, embed the following code in your project's footer:

<script type='text/javascript'>
var popup = document.getElementById('consentPopup');
var alreadyLoaded = window.localStorage.getItem('fbGrantConsent') === 'true';

//Show the consent banner if consent is not granted, hide it if consent is already granted.
if (alreadyLoaded) {
popup.style.display = 'none';
} else {
popup.style.display = 'block';
}

//Grant consent and store it in localStorage of the browser
var consentBtn = document.getElementById('
consentBtn');
consentBtn.addEventListener("click", function() {
fbq('consent', 'grant');
window.localStorage.setItem('fbGrantConsent', 'true');
});
</script>
Important
If you've used different IDs for your popup and "accept" buttons, make sure to replace the bolded IDs in the code above with the one's you're using:
  • Replace "consentPopup" with the ID you've set for the banner
  • Replace "consentBtn" with the ID you've set for the "Accept cookies" button

Advanced event tracking

For advanced pixel event tracking, check out Facebook’s events guide. Also, check out additional Facebook pixel use cases like tracking clicks on buttons.

You can add these events to the <head> code section of one or more pages on your site.

Note that you do not need to add the Facebook pixel code to your site if you've already added the pixel ID in your project settings → integrations → Facebook pixel section.
If you want to track clicks on links or buttons, make sure to set an ID for those elements in the Designer. Then, embed the script in your page's code. Don't forget to replace the ID in the code with the one you applied to your buttons and links.
Example
This is an example code from Facebook. You can get the code for the event that you need from the pixel events guide.
Note

We’ll be adding more default events when Webflow Ecommerce arrives, like “product viewed,” “product added to cart,” and “product purchased.” Soon!

Need more help?
If you need more help integrating pixel events, you can always post on the code help section of the Webflow Community Forum with as much information as possible (read-only link, screenshots, the code you're trying to integrate, and a description of the issue), and our amazing community and staff can help you there.