‘Continue with’ one-click conversions

Last updated 06/16/2022

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

This feature allows you to display the Bread & Butter IO ‘Continue with’ widget 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’ widget 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' widget to this page. If you want the 'Continue With' widget to appear on all pages, simply repeat the above for all pages.

Step 4

The ‘Continue with’ widget 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, and the continue with position to be 50 pixels in from the bottom left, the code would look like this:

    BreadButter.ui.continueWith({
        button_theme: "round-icons",
        expand_email_address: false,
        destination_url: "https://example.com/new_page/",
        continue_with_position: { 'bottom': '50px', 'left': '50px' }
    });