Webflow Opt-in Popup Tool

Last updated 11/20/2023

Before adding a Opt-in popup (Newsletter) tool make sure you have added the initialization script tag.

Add the Opt-in popup (Newsletter) tool to any page on your site. The Opt-in popup dialog will pop up after a specified number of seconds, prompting to user to authenticate with the provider of their choice to sign up or subscribe.

Bread & Butter remembers who has signed up, and won’t prompt them again.

This guide explains how to add the Opt-in popup tool to any page on your site, and how to configure the content you want it to display, including header image.

Note: You don’t need to add the ‘Continue with’ snippet for the Opt-in popup tool to work. The ‘Continue with’ pop up will be launched on its own.

Step 1

In Designer, open Pages in the left nav.
Hover over Home, or whichever page you want the Opt-in popup to appear on.
Click the gear icon to open the page settings.

Step 2

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

Step 3

In the Head Code field, paste in the following 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.addNewsletterWidget({
    custom_event_code: 'CUSTOM_EVENT_NAME',
    delay_seconds: DELAY_TIME_SECONDS,
    header_text: 'HEADER_TEXT',
    main_text: 'BODY_TEXT',
    success_header: 'SUCCESS_HEADER',
    success_text: 'SUCCESS_TEXT',
    image_source: 'IMAGE_URL'
});
});
</script>

Step 4

Replace CUSTOM_EVENT_NAME with the user event code that you want to trigger when a user signs up. Don't have an user event or Integration and Rule set up yet? Check out Integration Setup.

Step 5

Replace DELAY_TIME_SECONDS with the amount of time after page load that the Opt-in popup tool appears. Important: don't include ' ' around the time value. See above example data.
Replace HEADER_TEXT with the header text you want. This will appear at the top of the dialog.
Replace BODY_TEXT with the main body of text that you want to appear for logged out users.
Replace SUCCESS_HEADER with the header text that you want to appear after a user successfully authenticates and signs up.
Replace SUCCESS_TEXT with the success message that you want to appear after a user successfully authenticates and signs up.

Step 6

IMAGE_URL is optional. If you want to add your own custom image, replace IMAGE_URL with the source URL of the image you want to use. Recommended size: 200 x 100 px.

Step 7

Click Save Changes.
Publish your website, when ready.