Skip to main content

How to use your own Meta Pixel with Widget 2.0 (outside the Facebook Business integration)

Learn how to fire your own custom Meta Pixel events from Widget 2.0

šŸŒ Overview

If you want full, independent control over your Meta Pixel rather than using the Pixel tied to our Facebook Business integration - you can do this by embedding Widget 2.0 on your own website and firing your own Pixel events using our booking tools SDK.

This is a different setup to our native Facebook/Instagram integration, and it comes with an important trade-off, so please read the "Which option is right for you" section below before setting this up.

āš ļø Which option is right for you?

There are two ways to get Meta Pixel data on Appointedd bookings:

Native Facebook Business integration

Your own Pixel (this guide)

Where the booking happens

Inside the Facebook/Instagram app - no redirect

On your own website

Who selects/manages the Pixel

Chosen during the FBMS connection flow

You, entirely self-serve

Setup effort

Guided wizard in Appointedd and Meta

Manual - requires basic JavaScript

Best for

Businesses who want customers to stay in-app on Facebook/Instagram

Businesses who want full control of Pixel events/parameters, and don't mind directing customers to their own website

Important: Meta does not provide a way to embed a custom script or iframe directly into the native "Book Now" button on a Facebook Page. This means the approach in this guide only works if your Facebook/Instagram CTA (or your posts/ads) link out to your own website, where Widget 2.0 is embedded, not to our native in-app widget or widget URL directly.

If you'd rather keep the native in-app booking experience, use our Facebook Business integration guide instead.

āœ… What you'll need

šŸ› ļø Step 1: Embed your booking widget on your website

If you haven't already, embed your Widget 2.0 on your website in embed or popover mode. Instructions for this are covered in our Widgets 2.0 guide.

šŸ› ļø Step 2: Add the Appointedd event listener script

Our booking tools emit JavaScript events (e.g. when a customer engages with the widget, or completes a booking) that you can listen for on your website.

Full details on the available events and example listener scripts (for both embed and popover mode) are in our guide: Tracking events from your Appointedd booking tools on your website with JavaScript.

The events most relevant for Pixel tracking are:

  • USER_ENGAGED - fires when a customer interacts with the widget (good for a "Lead" or engagement-style event)

  • BOOKING_CREATED - fires when a booking is successfully completed (good for a conversion event)

šŸ› ļø Step 3: Fire your Meta Pixel events inside the listeners

Inside each event listener, add your fbq() call to fire the relevant Pixel event. For example:

<script src="https://booking-tools-sdk.appointedd.com/appointedd-booking-tools-sdk-v1.js"></script>
<script language="javascript" type="text/javascript">
  var registered = false;

  function init() {
    if (registered) return;

    // Fires when a customer engages with the widget
    window.Appointedd.popovers.on("USER_ENGAGED", function() {
      fbq('track', 'Lead');
    });

    // Fires when a booking is completed
    window.Appointedd.popovers.on("BOOKING_CREATED", function(event) {
      fbq('track', 'Schedule', {
        content_name: event.data.booking.service_name,
        value: event.data.booking.spaces,
      });
    });
  }

  if (window.Appointedd) {
    init();
  } else {
    window.addEventListener(
      "appointedd-booking-tools-sdk-v1",
      function(event) {
        if (event.detail.type === "sdk.ready") init();
      }
    );
  }
</script>

Replace window.Appointedd.popovers.on(...) with bookingTool.on(...) if you're using embedded mode instead of popover mode - see the JavaScript tracking guide for the embed mode setup.

You can use any standard or custom Meta Pixel event name and parameters here - this is standard fbq() usage, so anything you can normally pass to a Pixel call works.

šŸ§Ŗ Step 4: Test your setup

Confirm your Pixel is firing correctly:

  1. Install the Meta Pixel Helper Chrome extension

  2. Visit your website and open the booking widget

  3. Interact with the widget and complete a test booking

  4. Check Pixel Helper (and Meta Events Manager's Test Events tool) to confirm the expected events are firing with the correct data

šŸ—ŗļø Using Google Tag Manager instead

If you manage tags through Google Tag Manager, you can follow the same pattern shown in our GA4/GTM tracking guide, but instead of pushing events to the GTM dataLayer and creating a GA4 tag, you'd create a Custom HTML tag that fires your fbq() call, triggered off the same custom event.

Need help?

If you get stuck, please reach out to our support team via the chat icon. For questions about Pixel event names, parameters, or Meta Ads setup itself, Meta's own Events Manager documentation is the best resource.

Did this answer your question?