Last updated 06/02/2023
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.
Find the initialization script you have added to your webpage (see initialization script if you have not added it already)
In the initialization script, find the line:
BreadButter.configure({app_id: "[APP_ID]"});
Add the following line under BreadButter.configure();
BreadButter.widgets.signIn("bb-signin-widget");
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/", });
Add authentication & API event tracking to your website/app with a script tag & configuration