Webflow ‘Opt-in’ Tool

Last updated 05/05/2023

Before adding ‘Opt-in’ tool make sure you have added the initialization script tag.

The ‘Opt-in’ tool lets you easily add user validation and authentication directly onto any page, and have it fit seamlessly with the rest of the elements around it. It also returns your users back to the current page after authentication.

This guide explains how to add the ‘Opt-in’ tool to your site.

Note: You don’t need to add the ‘Continue with’ tool snippet for the ‘Opt-in’ tool to work.

Step 1

Find the location on your page or header where you want to add the 'Opt-in' Tool.


Step 2

In the Add element menu in the left pane in Webflow, drag a Div Block element to the location you chose in Step 1.

Step 2

Step 3

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

Step 3

Step 4

  • In the right pane, click on the gear icon to go to Element Settings.
  • Then, set the ID to: bb-optin-tool

Note: The element ID is what links the Bread & Butter code to the Div element, so it knows where to put the Opt-in tool.

Feel free to use anything other than bb-optin-tool. Just make sure to change it both in the Div Block ID, and in the Bread & Butter code snippet, so that they remain linked.

Step 4

Step 5

  • Next, open Pages in the left nav.
  • Hover over Home, or whichever page you want the 'Opt-in' tool to appear on.
  • Click the gear icon to open the page settings.
Step 5

Step 6

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

Step 6

Step 7

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.optIn('bb-optin-tool');
});
</script>
Step 7

Step 8

  • Click Save Changes.
  • 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