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

Last updated 02/16/2024

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

Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data

BOOK A DEMO