How to add the ‘Continue with’ tool

Last updated 07/09/2024

Before adding the ‘Continue with’ tool make sure you have added the initialization script tag or have the WordPress plugin installed.

This feature allows you to display the Bread & Butter ‘Continue with’ tool on your website homepage, or any other page:

Your visitors will now have the option to convert with one-click using the social accounts you make available to them. Once converted, the first and last name, along with the email address is recorded in the user journey of each visitor and made available in the Bread & Butter dashboard. Your visitors will also see a customizable success message after they have signed in.

To add the ‘Continue With’ tool to any page you just need to follow these few steps:

Step 1

Find the initialization script you have added to your webpage (see initialization script if you have not added it already). Skip to Step 3 if you already have the WordPress plugin installed.

Step 2

In the initialization script, find the line:

BreadButter.configure();

Step 3

Add the following line under BreadButter.configure();

BreadButter.ui.continueWith();

This will add the 'Continue With' tool to this page. If you want the 'Continue With' tool to appear on all pages, simply repeat the above for all pages.

Step 4

OPTIONAL:

The ‘Continue with’ tool also allows you to specify options, which you can review on our Github.

Supported Parameters:

Parameter	Description	Type
callback_url	The Callback URL is the URL that the user will be redirected to after they have authenticated with the provider. This will override the Callback URL set in the Advanced Settings of your Bread & Butter app. Note that "Enable Callback URL" will need to be set to ON in the app.	string
destination_url	The Destination URL is the final destination for the user to be redirected. Use this if you want the user to end up on the same page, or a specific different page after authentication.	string
client_data	Client data is used to allow you to pass parameters from the client side to your backend which processes the authentication.	object
button_theme	[VALUES: round-icons/tiles] [DEFAULT: 'tiles'] This parameter allows you to change the theme with which the provider buttons are displayed.	string
expand_email_address	[DEFAULT: true] This parameter sets whether the email address field is visible on page load, or must be expanded to be visible.	boolean
show_login_focus	[DEFAULT: false] Shows a full page, blurred background behind the login overlay to focus the user's attention.	boolean
continue_with_position	[Example: {'top': '10px', 'right': '10px'}] Used for positioning the 'continue with' tool. Will accept only 1 parameter for top/bottom and 1 parameter for left/right. Accepts 10, '10px', and '10%' for positioning.	object
success_event_code	When authentication is a success, a custom user event will be triggered with this custom event code. Event definition must be created in the Webapp first.	string
show_logged_in_profile	[DEFAULT: false] The 'Continue with' is replaced by the Profile tool, when a user is signed in. The Profile tool includes a sign out button.	boolean
hide_verified	[DEFAULT: true] Hide the 'Continue with' tool for returning users. Should be used when you don't want to keep prompting returning users to authenticate.	boolean
delay_seconds	The number of seconds after page load that the 'Continue with' appears.	int

For example, if you want the button theme to be icons, the page the user is returned to after login to be different, the continue with position to be 50 pixels in from the bottom left, a delayed load time of 5 seconds and custom success message content, the code would look like this:

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    BreadButter.ui.continueWith({
        button_theme: "round-icons",
        destination_url: "https://example.com/new_page/",
        delay_seconds: 5,
        continue_with_success_seconds: 5,
        continue_with_success_header: "Perfect, you're in!",
        continue_with_success_text: "You can now access our site and features",
        continue_with_position: { 'bottom': '50px', 'left': '50px' }
    });
});</script>

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