‘Continue with’ one-click conversions

Last updated 09/04/2023

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

This feature allows you to display the Bread & Butter IO ‘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, available in the Bread & Butter dashboard.

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)

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.

For example, if you want the button theme to be icons, the email address field collapsed by default, 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, and a delayed load time of 5 seconds, 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",
        expand_email_address: false,
        destination_url: "https://example.com/new_page/",
        delay_seconds: 5
        continue_with_position: { 'bottom': '50px', 'left': '50px' }
    });
});</script>