How to add the ‘Sign in’ tool

Last updated 01/29/2024

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

If you have a Login or Sign in page, you can embed the Bread & Butter ‘Sign in’ tool directly on the page, like you would with any other sign in option.

Once added, the ‘Sign in’ tool works just like the ‘Continue with’ tool, except it is on the page, instead of hovering above.

This image has an empty alt attribute; its file name is SIW_TOOL_SCREENS_032822.gif

This guide explains how to add the ‘Sign in’ tool to your site.

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 Bread & Butter 'Sign in' tool to appear.
  • Add an id attribute to the <div /> of "bb-signin-tool".
<div id="bb-signin-tool" />

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.signIn("bb-signin-tool");

Step 5

The ‘Sign in’ tool also allows you to specify options, which you can review on our GitHub.

For example, if you want the button theme to be icons and the page the user is returned to after login to be different, the code would look like this:

BreadButter.ui.signIn("bb-signin-tool", {
        button_theme: "round-icons",
        destination_url: "https://example.com/new_page/",
    });


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