How to add the User Profile Tool

Last updated 02/16/2024

Before adding the User Profile 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:

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

Find the initialization script you have added to your webpage (see initialization script if you have not added it already)

Step 2

In the initialization script, find the line:

BreadButter.configure();

Step 3

Add the following line under BreadButter.configure();

<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>

The continue_with_position parameter is used for positioning the User Profile tool. It accepts a top property and a right property for the offset from the top and right edge of the viewport respectively. Accepts 10, '10px' and '10%' for positioning..

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