How to add the ‘Sign in’ widget

Last updated 05/10/2022

Before adding the ‘Sign In’ widget 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’ widget directly on the page, like you would with any other sign in option.

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

This guide explains how to add the ‘Sign in’ widget 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 block to the location on your page where you want the Bread & Butter IO 'Sign in' Widget to appear.
Set the Div name to: bb-signin-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.widgets.signIn("bb-signin-widget");

Step 5

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

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

BreadButter.widgets.signIn("bb-signin-widget", {
        button_theme: "round-icons",
        expand_email_address: false,
        destination_url: "https://example.com/new_page/",
    });