Webflow Content Gate Preview

Step 1

• On your Webflow Dashboard, click on the 3 dots at the bottom right of your project.
• Then, select Settings.

Step 2

Select the Custom Code from the left menu.

Step 3

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.contentPreview({
    restricted_links: ["CONTENT_PREVIEW_PAGE"],
    scroll_limit: 0,
    time_limit: 0,
    clickable_content: false,
    fixed_height: 0,
    locale: {
       POPUP: {
            TEXT_1: 'HEADER',    
            TEXT_2: 'SUB HEADER',
            TEXT_3: 'BOTTOM TEXT',
            TEXT_3_2: 'BOTTOM TEXT EXPANDED',
            MORE: 'EXPAND LABEL',
        }
    },
});
});
</script>

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

Step 4

Replace CONTENT_PREVIEW_PAGE with the page (or pages) you want to apply content gate preview to. Enter the URL like this:

["/work"]

Or like this for multiple pages:

["/work/project-1", "/work/project-2"]

You can also use a wildcard * to block all URLs under /work/, like /work/projects, but not including /work:

["/work/*"]

Step 5

• 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 gate preview to be triggered primarily through the scrolling action of the user.
• For time_limit, choose the number of seconds after page load until content gate preview is displayed.
• For clickable_content, set to true if you want the content above the content gate preview to be clickable, such as header links etc.
• For fixed_height, set the maximum percentage of screen space (from 0 to 100) that you want content gate preview to take up. If not explicitly set (or set to 0), the default behavior is to allocate sufficient space to accommodate all content.

Step 6

The remaining fields in the POPUP object allow you to customize the text that appears in the header, and below the sign in options. If you remove the POPUP part of the code snippet, default content will be used.

• Replace HEADER with custom header text to help your users understand what is happening.
• Replace SUB HEADER with additional content below the header, to further communicate with your users.
• Replace BOTTOM TEXT with a short line of text you'd like to display to your users below the sign in options. This could explain why it's important or valuable for the user to complete the sign in process.
• Replace BOTTOM TEXT EXPANDED with a more detailed or longer explanation of the value of signing in. This content will replace TEXT_3 when a user clicks the "MORE" option.
• Replace EXPAND LABEL with the label for the expand link. We recommend setting this to "more>>".

Step 7

• Click Save Changes.
• Publish your website, when ready.