What are User Events and how do I use them?

User Events are the milestones a visitor reaches on your website, such as clicking your free trial button, unlocking pricing, downloading a white paper or grabbing a discount code. Each one appears on the visitor's User Journey, so you can see how far along they are and which actions matter most.

In short: Create a User Event in Bread & Butter under Automation, then User Journey Events, giving it a name, an event code, a color and a short description. Then record it on your site: on page load, from a WordPress shortcode or block, from a script attached to any link or button, or through the API. Events show up on each visitor's User Journey, can be filtered on in your dashboard, and can trigger automation rules. The description also tells Bread & Butter what the action means, so it's used in journey summaries and in Nurture's outreach.

What User Events are for

Standard tracking tells you who a lead is. User Events tell you what they did. With them you can:

  • Follow the User Journey. See exactly which steps a visitor took before they became an engaged lead, and after.
  • Measure engagement. See which features and calls to action get the most interest, and filter your dashboard to see who did a given action and how many people did it.
  • Improve conversion. Compare paths to see where your funnel is strongest.
  • Trigger automations. Use an event as the trigger for a rule that sends the contact to your CRM, posts to Slack or fires a webhook.

Create a User Event

Your account comes with a core set of events created by our AI agent, so you can track engagement from day one. Edit those, or create your own:

  1. In Bread & Butter, go to Automation, then the User Journey Events tab.
  2. Add a new event.
  3. Give it a name and a color. These appear on the event's tag in each visitor's User Journey. Pick a light shade for everyday events and a bold one for key milestones.
  4. Set an event code, such as trial_click  . This is what your website uses to record the event. It can't contain spaces and can't be changed once saved, so note it down.
  5. Choose how it's recorded. To record it whenever someone views a page, choose On page load and add the pages. Otherwise, record it from your site using one of the methods below.
  6. Add a description. In a sentence, say what the action tells you about the visitor, for example "Clicked the free trial button on the pricing page. Ready to evaluate." Bread & Butter uses this to understand where the visitor is in their journey, in journey summaries and in Nurture's outreach, so a clear description makes both more relevant.
  7. Save the event.

Put your most important events first

Drag your events to change their order. The events at the top carry the most weight in journey summaries, so put your highest-intent actions there. For example, a visit to your Contact page is a stronger signal than a visit to your Pricing page, so the Contact event belongs higher up.

The events our AI agent created work the same way. Edit them to match your goals, reorder them, or turn off any you don't want in your journey summaries.

Record an event on WordPress

On WordPress you can record events without a developer.

When a page loads. Choose On page load when you create the event in Bread & Butter and add the page, as described above. Or add this shortcode to the page, with your event code:

[breadbutter-customevent event=event_code /]

When a button is clicked. This shortcode adds a button that records the event when it's clicked. The text before the closing tag is the button's label, and css_class   lets you apply your own styling:

[breadbutter-customevent-button css_class="custom" event="your_event"]Start free trial[/breadbutter-customevent-button]

To send the visitor to another page after they click, add redirect  :

[breadbutter-customevent-button css_class="custom" event="your_event" redirect="https://www.yoursite.com/page"]Start free trial[/breadbutter-customevent-button]

To run your own JavaScript function after they click, add callback  :

[breadbutter-customevent-button css_class="custom" event="your_event" callback="runFunction"]Start free trial[/breadbutter-customevent-button]

From any block on the page. You can record an event when a visitor clicks any block, such as a button or an image, without adding a shortcode:

  1. Open the page in the WordPress editor and select the block.
  2. In the right panel, open the Block tab and expand Advanced.
  3. In Additional CSS class(es), enter a new class name, for example bb-trial-button , then publish the page.
  4. In the left menu of your WordPress admin, click Bread and Butter, open the Advanced Settings tab and scroll to User Event Setup.
  5. In Element Name/ID/Selector, enter the class name with a dot in front, for example .bb-trial-button .
  6. Enter the event code, then click Save.

If the event doesn't appear in the list after you save, check that the plugin is connected to your Bread & Butter app, then try again.

On any other website, you can record an event when a visitor clicks any link or button. On Webflow, this works with any Link, Link Block or Button. The Bread & Butter snippet must already be installed (see JavaScript Snippet, or Install Bread & Butter on Webflow).

Step 1: Create the event

Create the event in Bread & Butter as described above, and note its event code.

Select the link or button and give it a unique ID, for example trial-button  . On Webflow, select it on the page or in the Navigator in the left menu, click the gear icon in the right pane to open Element Settings, and enter the ID in the ID field.

Step 3: Add the script to your site

Add this script to the head of your site, below the Bread & Butter snippet. If you already have other Bread & Butter scripts there, add it below them. On Webflow, click the W icon at the top left of the Designer, select Site Settings, open Custom Code in the left menu and paste it into the Head Code field.

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

Step 4: Add your ID and event code

  • Replace LINK_ID   with the ID you gave the link or button in Step 2.
  • Replace CUSTOM_EVENT   with the event code from Step 1.

To track more links or buttons, add another BreadButter.ui.addEventToLink(...)   line for each one inside the same script. You can add as many as you like.

Step 5: Save and publish

Save your changes and publish your site. On Webflow, click Save Changes, then publish.

Record an event through the API

For custom setups or server-side tracking, send a request to the Bread & Butter API with your app_id  , the visitor's device_id   and the event code.

Turn off or delete an event

  • Turn it off. Untick an event in your list to stop recording it. Its history is kept.
  • Delete it. You can delete an event only if it has never been recorded. Once any visitor has triggered it, it can't be deleted, so your reporting stays accurate.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.