Account Widget
Want visitors to stay signed in across visits? The Account Widget adds a Sign up / Sign in button to your site. Once a visitor has signed in, it shows their profile picture and name, with the option to sign out.
In short: The Account Widget is a profile button for your site. Visitors who haven't signed in can click it to open Instant Lead Capture. Visitors who have see their profile, with a Sign out option. It remembers how each visitor signed in last time, so returning is quick. On WordPress you turn it on in the plugin, for every page or page by page, and choose where it docks on the screen. On any other site you add it with one line of script, anywhere on the page, such as your header.
Why use the Account Widget
- Fits your navigation. Add a sign-in button to your existing website or app header.
- One click in or out. Visitors sign in or sign out with a single click, so they stay in control of their session.
- Remembers how they signed in. The widget remembers the sign-in option each visitor used before, so returning visits are quick.
- Your layout. On WordPress, dock the widget to a corner of the screen and set its exact distance from the edge in pixels.
How it works
The Account Widget adds a profile button to any or all pages of your site. Visitors who haven't signed in see a Sign up / Sign in button, which opens Instant Lead Capture when clicked. Once they've signed in, they stay signed in across visits, and the button shows their profile picture. Clicking it shows their profile details and a Sign out option.
Set up the Account Widget on WordPress
- In the left menu of your WordPress admin, click Bread and Butter.
- In the left menu, expand More Tools and select Account widget.
- Select Enable for all pages, then click Save. You can also use the position settings to choose where the widget docks on the screen.
Turn it on for specific pages only
If you'd rather show the Account Widget on certain pages only, set it up in the WordPress editor:
- Open the page or post in the WordPress editor.
- Click the Bread and Butter logo at the top right, or click the Options button and select Bread and Butter under Plugins.
- In the Account Widget section, enable the widget and set its position for that page.
- Publish the page to save your changes, and repeat for any other pages.
Not on WordPress? Add the Account Widget with a script
On any other website, you add the Account Widget by placing an empty element where you want it, such as in your header, and adding one line to the Bread & Butter snippet. The Bread & Butter snippet must already be installed (see JavaScript Snippet).
Step 1: Add a placeholder where the widget should appear
Add an empty element with the ID bb-profile-widget where you want the widget. Most sites put it in the header, so it appears on every page.
<div id="bb-profile-widget"></div>
On Webflow, drag a Div Block to that spot, click the gear icon in the right pane to open Element Settings, and set the ID to bb-profile-widget .
Step 2: Add the widget to the Bread & Butter snippet
In your Bread & Butter snippet, find this line:
BreadButter.configure({app_id: "[APP_ID]"});
Add this line directly below it:
BreadButter.ui.addProfileWidget('bb-profile-widget');
Step 3: Save and publish
Save your changes and publish your site. The Sign up / Sign in button now appears where you placed it, and shows each visitor's profile once they've signed in.