Webflow Content Gating: Gating content on a Page

Last updated 11/01/2023

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

Bread & Butter’s content gate feature allows you to display different content on a webpage to visitors who have authenticated.

You can choose what content is available when the user is logged in or not by showing a different Div Block based on this state. Follow these steps below to add this feature to a page on your Webflow website:

Step 1

Find the location on your page where you want your content that will appear when logged out, and the content that will appear when logged in.

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 3

Select the Div Block by clicking on it on the page, or by finding it in the Navigator in the left menu.
In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to unauthenticated-content

Note: The element ID is what links the Bread & Butter code to the Div Block element, so it knows what to show when the user is authenticated or unauthenticated.

To the Div Block, add the content that you want users to see when not authenticated.

Step 4

Repeat the above steps for the content you want the user to see when authenticated. Set the ID to authenticated-content

Step 5

Open Pages in the left nav.
Hover over the page you want to gate content.
Click the gear icon to open the page settings.

Step 6

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

Step 7

In the Head Code field, paste in the following 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.gateSection('unauthenticated-content', 'authenticated-content', 'bb-hidden');
});
</script>

Step 8

Click Save Changes

Step 9

Add the bb-hidden class to the unauthenticated Div Block:

Select the unauthenticated Div Block you created in Step 3. You can find it by selecting it on the page, or by finding it in the Navigator in the left menu.
In the right pane, click on the paintbrush icon to go to Style.
Under Selector, type in bb-hidden.
Click Create under New Class, to create the new class.
Under Layout > Display, click the "hide" button.

Step 10

Add the bb-hidden class to the authenticated Div Block:

Select the authenticated Div Block you created in Step 4. You can find it by selecting it on the page, or by finding it in the Navigator in the left menu.
In the right pane, click on the paintbrush icon to go to Style.
Under Selector, type in bb-hidden.
bb-hidden should be returned as an existing class. Click on it to add it to this Div Block.
Under Layout > Display, ensure that the "hide" button is selected.

Step 11

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

BOOK A DEMO