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

Last updated 05/11/2023

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 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 'Sign up / Sign in' tool 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 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.