Webflow Content Gating

Last updated 09/04/2023

Before adding content gating, make sure you have added the initialization script tag.

Bread & Butter’s content gating feature allows you to limit access to specific web pages on your website to visitors that have authenticated. When the user goes to the page, the content is partially hidden by the content gate sign in section. It can be configured to appear immediately, after a period of time, or when a user scrolls past a certain percent of the page.

You can also customize the header text to meet your unique business needs. Once signed in, users can see the page content.

You can now add the Content Gating feature to your website by following these steps:

Step 1

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 2

Select the Custom Code tab.

Step 3

In the Head tag 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.contentGating({
    locale: {
        CONTENT_GATING: {
            TITLE: "Your header goes here"
        }
    },
    scroll_limit: 0,
    time_limit: 0
});
});
</script>

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

Step 4

Set any time or scroll delays.

For scroll_limit, choose a value between 0 and 1. Setting it to 0 will load immediately, 0.5 after half of the page is scrolled through, etc. Make sure to set the time value very high if you want content gating to be triggered primarily through the scrolling action of the user.
For time_limit, choose the number of seconds after page load until content gating is displayed.

Step 5

Set the TITLE text. This is the content that appears at the top of the Content Gating tool.

Step 6

Click Save Changes.
Publish your website, when ready.