Member's Area

Building an app, a customer portal or a members-only area? The Member's Area gives your members one-click access, placed right inside your own page. It suggests the right option to each person, whether they're new or coming back.

In short: The Member's Area puts the Bread & Butter access panel directly on a page, such as your members or customer portal page, instead of floating above it. Members get in with an account they already have, such as Google, Microsoft or LinkedIn, an enterprise provider like Okta, a one-click link sent to their inbox, or a verified email address. Each new member 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 website you add it with a short script.

How it works

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

Why use the Member's Area

One-click access. Members get in with Google, Microsoft, LinkedIn and more. On WordPress, new members are added to your WordPress users automatically.
Suggests the right option. Returning members see the option they used last time first, so they don't have to remember it.
No passwords needed. Turn on one-click links and verified email so members never need a password.
Enterprise access. Require specific people or whole organizations to come in through an enterprise provider such as Okta.
Built for intranets. Limit access to your own company's email domain to keep internal resources private.

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 come back to the same page once they're in.

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

On any other website, you add the Member's Area 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.

Step 1: Add a placeholder where the Member's Area should appear

Add an empty element where you want it, 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 .

<div id="bb-signin-widget"></div>

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.