How to add the Profile widget

Last updated 05/10/2022

Before adding the Profile widget make sure you have added the initialization script tag.

The Profile Widget feature allows you to add a Sign Up / Sign In & Sign Out button anywhere on a webpage, or in your webpage header.

When a user converts and authenticates with their favorite account, the profile widget changes to display their profile picture from their account, plus the option to sign out.

The Profile Widget is added by placing a Div Block element where you want it, then adding a Bread & Butter script tag to reference the Div.

Step 1

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


Step 2

  • Add a Div block to the location on your page where you want the Bread & Butter Profile Widget to appear. Most customers place it in their website header, so that it appears on all pages.
  • Set the Div name to: bb-profile-widget

Step 3

In the initialization script, find the line:

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

Step 4

Add the following line under BreadButter.configure();

BreadButter.ui.addProfileWidget('bb-profile-widget');
Step 4

Step 5

The Bread & Butter Profile widget will now appear at the top of all of your pages, and show the user their account information when logged in.