WordPress Shortcodes

For your convenience, we’ve created several WordPress shortcodes to make it easy to implement our functionality on your site. Check out the shortcodes below to see how they work, and how they can help you improve conversions.

To add a shortcode, follow these steps:

1. Find the page or post where you want the tool to appear, and open it in Edit mode in WordPress.
   
   
2. Place the cursor at the place in the page where you want to add the tool. For tools that aren’t inline on the page, you can put the shortcode anywhere.
   
   
3. Click the Toggle block inserter button, then search for and select Shortcode.
   
   
   
   
4. In the shortcode block, enter the shortcode for any of the tools below.
   
   

‘Continue with’ auto launch on page load

You can configure the ‘Continue with’ tool to appear on page load via the page settings in WordPress, but you can also do it with the following shortcode:

[breadbutter-continuewith]

Logout button

Add a simple logout button to any location on your website. When clicked, users will be logged out of your WordPress site, and their authentication status with Bread & Butter will be reset. Add the following shortcode:

[breadbutter-logout-button]

‘Sign up / Sign in’ tool on a page

You can easily add the ‘Sign up / Sign in’ tool to a menu item by following these steps, but you can also add it directly to any page using this shortcode:

[breadbutter-profile-widget]

Newsletter tool on a page

The standard Newsletter sign up tool appears over top of the page, and can be configured directly in your WordPress settings, but you can also embed it directly on a page using this shortcode:

[breadbutter-newsletter]

Or you can make it appear from a button click:

[breadbutter-newsletter-button]button[/breadbutter-newsletter-button]

Where “button” is the display label of the button (you can set this to anything).

User event from a button click

You can quickly and easily add a button to your page that creates a user event when clicked:

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

Where “button” is the display label of the button (you can set this to anything). You need to specify the event code (See the User Events page for more details), and you can also optionally apply your own CSS to the button.

Additionally, you can specify a callback function, or a redirect URL for the button:

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

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

Note: you cannot use both the callback and redirect parameters in the same shortcode. You can only use one or the other.

Contact Us from a button click

Launch the contact us dialog from a button anywhere on your site:

[breadbutter-contactus-button css_class="custom"]button[/breadbutter-contactus-button]

Where “button” is the display label of the button. You can also optionally specify a CSS class to style the button itself.

User Event created on page load

Add this shortcode to any page, and the specified event will be created for the user when they visit the page:

[breadbutter-customevent event=event_code /]

Specify the event code from the user event setup in the Webapp.