Webflow ‘Sign up / Sign in’

Last updated 05/26/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 Project 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.