Webflow Conversions: Continue with from a Button Click

Last updated 04/18/2022

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

This feature allows you to trigger the ‘Continue with’ when a user clicks a button on a page.

You can use this feature in conjunction with the Content Gating features to have users unlock content on a page via a button click.

Step 1

Find the button that you want to trigger the 'Continue with'.

Select it by clicking on it on the page, or by finding it in the Navigator in the left menu.


Step 2

In the right pane, click on the gear icon to go to Element Settings.

Then, set the ID to a unique value of your choice.


Step 3

  • In Designer, open Pages in the left nav.
  • Hover over Home (or any other page).
  • Click the gear icon to open the page settings.

Step 4

Scroll down to the Custom Code section, for the Head tag.

Step 4

Step 5

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.applyContinueWithTrigger("BUTTON_ID")
});
</script>

Step 6

Replace BUTTON_ID with the ID you set in Step 2.


Step 7

Repeat the above steps for any other buttons you want to set up. You can add as many as you want into any page using the head code section.


Step 8

  • Click Save at the top of the menu.
  • Publish your website, when ready.