Webflow Conversions: Blur Screen Prompt from a Button Click

Last updated 06/13/2024

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

This feature allows you to trigger the ‘Continue with’ along with with the Blur Screen Prompt text 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, or to redirect users to another page or content.

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 Settings 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 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", {
       destination_url: 'URL',
       show_login_focus: true,
       locale: {
           "POPUP": {
               "TEXT_1": "TEXT_1",
               "TEXT_2": "TEXT_2",
               "TEXT_3": "TEXT_3",
               "TEXT_3_2": "TEXT_3_2",
               "MORE": "MORE",
        }
    }
});
});
</script>

Step 6

Replace BUTTON_ID with the ID you set in Step 2.

Step 7

OPTIONAL: Add a destination URL, if you want the user to return to a different page or content asset. If you want the user to stay on the same page after signing in, remove this line.

Step 8

There are 5 parameters to set for the Blur Screen Prompt text:

TEXT_1 is the header text.
TEXT_2 is the sub-header text.
TEXT_3 is the 3rd paragraph of text. This would be any additional information you want to convey.
MORE is the expand label, shown after the 3rd paragraph. Clicking this will expand to replace TEXT_3 with TEXT_3_2.
TEXT_3_2 is the content that appears after clicking the MORE/expand button.

Note: If you prefer to use the default content, remove locale from the code snippet.

Step 9

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 10

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

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