How to Add Custom API Events for User Journey

Last updated 05/10/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.

To add Custom API Events to any page you just need to follow these few steps:

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

Identify the button or element that you want to trigger the Custom API Event.


Step 3

Find the initialization script you have added to your webpage (see initialization script if you have not added it already)


Step 4

In the initialization script, find the line:

BreadButter.configure({app_id: "[APP_ID]"});

Step 5

Add the following line under BreadButter.configure();

BreadButter.ui.addEventToLink('LINK_ID', 'CUSTOM_EVENT');
Step 5

Step 6

  • Replace CUSTOM_EVENT with the Event code you created from Step 1.
  • Replace LINK_ID with the ID of the button or element that you want to trigger the Custom API Event.

Step 7

You can also add a custom event call to any scenario programmatically by adding this line:

BreadButter.events.custom("CUSTOM_EVENT", callback);

More details on this are available on our Github.