Webflow Conversions: Continue With Widget on All Pages

Last updated 11/03/2021

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

This feature allows you to display Bread & Butter’s ‘Continue with’ widget on all pages your website:

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. This data can then be exported to your favorite CRM such as Mailchimp.

Note: By default, the ‘Continue with’ widget appears at the top right corner of the browser window. You can update the position of the widget in the browser window by following the instructions below. The widget is also enabled with the five most common social accounts, in sandbox mode so that you can get started right away. You can manage the sandbox accounts, along with other settings in the Bread & Butter app.

Step 1

On your Webflow Dashboard, click on the 3 dots at the bottom right of your project.
Then, select Settings.

Step 2

Select the Custom Code tab.

Step 3

In the Head Code field, paste in the following script tag after the Bread & Butter initialization script tag.

<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();
});
</script>

Note: If you have other Bread & Butter feature snippets, just add this snippet below them.

Step 4

Click Save Changes.
Publish your website, when ready.

Step 5

OPTIONAL:

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:

<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/",
        continue_with_position: { 'bottom': '50px', 'left': '50px' }
    });
});</script>