Member's Area

Building an app or a members-only area? The Member's Area gives you a complete sign-up and sign-in experience that you place on your own page. It suggests the right sign-in option to each visitor, whether they're new or coming back.

In short: The Member's Area puts the Bread & Butter sign-in tool directly on a page, such as your Login or Sign in page, instead of floating above it. Visitors can sign up or sign in with a social account, an enterprise provider like Okta, a sign-in link or a verified email address, and each one lands in your Engaged Leads tab. It works like Instant Lead Capture, just placed inside the page. On WordPress you add it with a shortcode. On any other site you add it with a short script.

Why use the Member's Area

One-click access. Visitors sign in with Google, Facebook, LinkedIn and more. On WordPress, new members are added to your WordPress users automatically.
Suggests the right option. Bread & Butter shows returning visitors the sign-in option they used last time, so they don't have to remember it.
No passwords needed. Turn on sign-in links and verified email sign-up so members don't need a password at all.
Enterprise sign-in. Require specific people or whole organizations to sign in through an enterprise provider such as Okta.
Built for intranets. Limit sign-in to your own company's email domain to keep internal resources private.

How it works

Add the Member's Area to the page where you want people to sign in. When a visitor arrives, Bread & Butter suggests the sign-in option that suits them best, and they sign up or sign in without filling in a form. Their verified profile goes to your Engaged Leads tab, and they get access to your protected content.

Add the Member's Area on WordPress

Open the page or post where you want the Member's Area in the WordPress editor.
Place your cursor where you want it to appear.
Click the Toggle block inserter button, search for Shortcode and select that block.
In the block, enter [breadbutter-signin]
Click Update to save the page.

The Member's Area uses your global and page settings. For example, if your Destination URL is set to the current page, members return to the same page after they sign in.

Not on WordPress? Add the Member's Area with a script

On any other website, you add the sign-in tool with a short script. The Bread & Butter snippet must already be installed (see JavaScript Snippet, or Install Bread & Butter on Webflow). You don't need the Instant Lead Capture snippet for it to work.

Add an empty element where you want the sign-in tool, on the page or in your header, and give it the ID bb-signin-widget . On Webflow, drag a Div Block from the Add element menu to that spot, select it, click the gear icon in the right pane to open Element Settings, and set the ID to bb-signin-widget .

The ID is what connects the script to the element. You can use a different ID, as long as you change it in both places: on the element and in the script.

Step 2: Add the script to the page

Add this script to the head of the page, below the Bread & Butter snippet. If you already have other Bread & Butter scripts there, add it below them. On Webflow, open Pages in the left menu, hover over the page, click the gear icon, scroll down to Custom Code and paste it into the Head Code field.

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

Step 3: Save and publish

Save your changes and publish your site. On Webflow, click Save Changes, then publish.