Webflow Custom API Events for User Journey

Last updated 05/09/2022

Before adding Custom API Events make sure you have added the initialization script tag.

Custom API Events are used to define your website’s User Journey, as milestones are reached for each user on your website. You can create an API event when a user does an action you are interested in monitoring, such as unlocking pricing, starting a free trial or downloading a coupon, discount code, or a (content gated) white paper or eBook. In this way, you can see where users are in their progression through your website’s journey as a customer.

Then, you can filter by custom events in the Bread & Butter Dashboard to see who and how many users have done these actions.

Note: This feature can be used with any Link, Link Block, or Button in Webflow.

Step 1

First, create your Custom API Event under API Events in Bread & Butter. For steps on how to do this, check out our API Events page.

Make sure you take note of the event code when you create it, so you can use it below.


Step 2

Find the link or button that you want to trigger the API Event.

Select it by clicking on it on the page, or by finding it in the Navigator in the left menu.

Step 2

Step 3

In the right pane, click on the gear icon to go to Element Settings.

Then, set the ID to a unique value of your choice.

Step 3

Step 4

At the top left of the Designer screen, click on the "W" Webflow icon, and select Project Settings.
Step 4

Step 5

Select the Custom Code tab.

Step 5

Step 6

In the Head Code field, paste in the following script tag after the Bread & Butter initialization script tag:

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    BreadButter.ui.addEventToLink('LINK_ID', 'CUSTOM_EVENT');
});
</script>
 

Note: If you have other Bread & Butter feature snippets, just add this snippet below them.

Step 6

Step 7

  • Replace CUSTOM_EVENT with the Event code you created from Step 1.
  • Replace LINK_ID with the ID you set in Step 2.

Step 8

Repeat the above steps for any other links or buttons you want to set up. You can add as many as you want into any page using the head code section.


Step 9

  • Click Save Changes.
  • Publish your website, when ready.