How to add the User Profile Tool

Last updated 09/04/2023

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:

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

Note:You may need to adjust the position parameters.