Webflow Content Preview

Last updated 09/04/2023

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

Bread & Butter’s content preview 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 preview 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 text content at the bottom to meet your unique business needs. Once signed in, users can see the page content.

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

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 tab.

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: 75
    locale: {
       POPUP: {
            TEXT_3: 'TEXT LINE 1',
            TEXT_3_2: 'TEXT LINE 1 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 preview to. Enter the URL like this:

["/work"]

Or like this for multiple pages:

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

You can also user 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 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 preview is displayed.
For clickable_content, set to true if you want the content above the content preview to be clickable, such as header links etc.
For fixed_height, set the maximum amount of screen space percent (from 0 to 100) that you want content preview to take up. The default if not set is to take up as much space as it needs to fit all authentication content.

Step 6

The 3 remaining fields under POPUP allow you to customize the text that appears below the sign in options.

Replace TEXT LINE 1 with a short line of text you'd like to display to your users. This could explain why its important or valuable for the user to complete the sign in process.
Replace TEXT LINE 1 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.