Webflow User Profile Tool

Last updated 02/16/2024

Before adding the User Profile Tool tool make sure you have added the initialization script tag.

The User Profile Tool allows you to add a Profile button to any or all pages for signed in users:

When clicked, it expands to show the user’s profile information, and provides an option to sign out of your site:

This tool only appears when a user is authenticated with your site. It can be considered the “signed in” version of the ‘Continue with’ Tool, and is often added in the same location as the ‘Continue with’ tool on a page by users.

Step 1

On your Webflow Dashboard, click on the 3 dots at the bottom right of your project.
Then, select Settings.

Step 2

Select the Custom Code from the left menu.

Step 3

In the Head Code field, paste in the following script tag after the Bread & Butter initialization script tag. You may need to adjust the position parameters:

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    BreadButter.ui.profileWidget({
    continue_with_position: {
        top: '20px',        
        right: '20px',    
    }
});
});
</script>

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

Step 4

Click Save Changes.
Publish your website, when ready.

Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data

BOOK A DEMO