Content Gate Preview (Most Powerful)

Content Gate Preview shows visitors the start of a page, then asks them to raise a hand to read the rest, the way many news websites do. Search engines and AI assistants still read every word, so the page keeps showing up in search and in AI answers.

In short: Content Gate Preview lets visitors read the start of a page, then fades out the rest and shows a panel asking them to continue with Google, Microsoft, LinkedIn, Apple or a verified email address. You choose when the panel appears: as soon as the page opens, after a set number of seconds, or once the visitor has scrolled part of the way. You can gate single pages, whole post categories or every page in a folder. One click unlocks every gated page on your website, and everyone who says yes becomes an Engaged Lead in your CRM. On WordPress you set it up in the Bread & Butter plugin. On any other website you add it with a short script.

How it works

Instead of covering the whole page, Content Gate Preview gives the reader a taste first. When the visitor reaches the point you set, by time or by scroll, the rest of the page fades out and the panel appears below what they've read. They continue with an account they already have, or a verified email address, and read on.

Why use Content Gate Preview

  • Still found in search. Google, ChatGPT, Perplexity and other search engines and AI assistants can read, index and recommend every word, while people are asked to raise a hand before reading the rest.
  • Gate a lot at once. Gate single pages, whole post categories or every page in a folder.
  • One click unlocks everything. Once a visitor has raised a hand, they have a secure session across your whole website, so every gated page is open to them and they aren't asked again.
  • Real people, real addresses. Social accounts are verified by the provider, and email addresses are checked, so made-up addresses stay out of your list. Every new lead arrives with a researched profile, ready for your Nurture Action Queue.

Customize Content Gate Preview

You can gate whole folders or categories at once and write your own messaging. You also choose what visitors are asked for: an email address only, their first and last name as well, a verified email address with a password and PIN, a one-click link sent to their inbox (shown as Sign in link in the settings), or social login.

Set up Content Gate Preview on WordPress

These settings apply across your whole website.

  1. Open the settings. In your WordPress admin, click Bread and Butter in the left menu.
  2. Choose your pages. Click Content Gate Preview, then scroll down to the setup section. Start typing the pages or post categories you want to gate, and pick them from the list. You can choose one or many.
  3. Write your messaging (optional). Leave any field blank to use our default text, which is translated into every language we support.
    • Header: the main message at the top of the panel, above the options.
    • Sub header: a supporting line just below the header.
    • Bottom paragraph: a short line below the options, for example why the content is worth it.
    • Expanded bottom paragraph: a longer explanation that shows when the visitor clicks to expand, for anyone who wants more detail before saying yes.
    • Expand label: the text the visitor clicks to see the expanded paragraph. We suggest starting with "Read More >>".
  4. Choose when the panel appears. Immediately on page load, after a scroll percentage you set, or after a time delay in seconds.
  5. Destination (optional). If you've set a global destination URL in your app settings and don't want it to apply to these pages, turn on Override Registration Destination URL. If you haven't set one, leave this off.
  6. Click Save. Your pages now show a preview, then ask visitors to raise a hand to read the rest.

Set custom rules for a single page

Any page can have its own messaging and timing, different from your website-wide settings.

  1. Open the WordPress editor for the page or post.
  2. Click the Bread and Butter logo at the top right, or click the Options button and select Bread and Butter under Plugins.
  3. Expand the Content gating section in the right-hand panel.
  4. Click Enable Content Gating and make your changes.
  5. Publish or update the page.

Not on WordPress? Add Content Gate Preview with a script

On any other website, you add Content Gate Preview with a short script instead of the plugin. The Bread & Butter snippet must already be installed (see JavaScript Snippet, or Install Bread & Butter on Webflow).

Step 1: Open your site's head code

Open the place where your site adds custom code to the head of every page. On Webflow, open your project's Settings (the three dots on your project in the dashboard), then click Custom Code in the left menu and use the Head Code field.

Step 2: Paste the script

Paste this script below the Bread & Butter snippet. If you already have other Bread & Butter scripts there, add it below them.

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

Step 3: Choose the pages to gate

Replace CONTENT_PREVIEW_PAGE   with the path of the page you want to gate.

To gate Enter
One page ["/work"]  
Several pages ["/work/project-1", "/work/project-2"]  
Every page inside a folder, such as /work/projects  , but not /work   itself ["/work/*"]  

Step 4: Set when the panel appears

Every setting is optional. Remove any you don't need and the default is used.

Setting What it does
scroll_limit   How far down the page the visitor scrolls before the panel appears, from 0   to 1  . 0   shows it as soon as the page loads, 0.5   halfway down. If you want scrolling to be the trigger, set time_limit   very high.
time_limit   The number of seconds after the page loads before the panel appears.
clickable_content   Set to true   to keep the content above the panel clickable, such as links in your header.
fixed_height   The most screen space the panel can take up, as a percentage from 0   to 100  . Leave it at 0   to let the panel take the space its content needs.

Step 5: Write your messaging

The POPUP   settings control the panel's text. Remove the whole locale   block to use the default text, which is translated into every language we support.

Replace With
HEADER   The main message at the top of the panel
SUB HEADER   A supporting line below the header
BOTTOM TEXT   A short line below the options, for example why the content is worth it
BOTTOM TEXT EXPANDED   A longer explanation that replaces the bottom text when the visitor clicks the expand link
EXPAND LABEL   The text of the expand link, for example "Read more >>"

Step 6: Save and publish

Save your changes and publish your site. On Webflow, click Save Changes, then publish.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.