How to add the ‘Sign up / Sign in’ tool

Last updated 01/13/2026

Before adding the ‘Sign up / Sign in’ tool make sure you have added the initialization script tag.

The ‘Sign up / Sign in’ tool 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 tool changes to display their profile picture from their account, plus the option to sign out.


The ‘Sign up / Sign in’ tool is added by placing a <div /> element where you want it, then updating the Bread & Butter script tag to reference it.

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 /> element to the location on your page where you want the 'Sign up / Sign in' tool to appear. Most customers place it in their website header, so that it appears on all pages.
  • Add an id attribute to the <div /> of "bb-profile-widget"

    <div id="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 'Sign up / Sign in' tool will now appear at the top of all of your pages, and show the user their account information when logged in.