Webflow ‘Sign up / Sign in’

Last updated 06/02/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. Follow these steps to add the ‘Sign up / Sign in’ tool to your page:

Step 1

Find the location on your page or header where you want to add the 'Sign up / Sign in' tool.

Step 2

In the Add element menu in the left pane in Webflow, drag a Div Block element to the location you chose in Step 1.

Step 3

Select the Div Block by clicking on it on the page, or by finding it in the Navigator in the left menu.

Step 4

In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to: bb-profile-widget

Note: The element ID is what links the Bread & Butter code to the Div element, so it knows where to put the Login/Logout button.

Feel free to use anything other than bb-profile-widget. Just make sure to change it both in the Div Block ID, and in the Bread & Butter code snippet, so that they remain linked.

Step 5

At the top left of the Designer screen, click on the "W" Webflow icon, and select Site Settings.

Step 6

Select the Custom Code tab.

Step 7

In the Head Code field, paste in the following script tag after the Bread & Butter initialization script tag:

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    BreadButter.ui.addProfileWidget('bb-profile-widget');
});
</script>

Note: If you have other Bread & Butter feature snippets, just add this snippet below them.

Step 8

Click Save Changes.
Publish your website, when ready.

Additional Steps:

If you're adding the 'Sign up / Sign in' tool, you may want to disable the signed in state of the 'Continue with' tool, as these elements may overlap in the signed in state. You can do this by adding the show_logged_in_profile parameter to your 'Continue with' code snippets:

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    BreadButter.ui.continueWith({
        show_logged_in_profile: false
    });
});</script>