Last updated 05/05/2023
Before adding content preview make sure you have added the initialization script tag.
The 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.
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.
This guide explains how to add Content preview to any page on your site, and how to configure the text content you want it to display.
Find the initialization script you have added to your webpage (see initialization script if you have not added it already)
In the initialization script, find the line:
BreadButter.configure({app_id: "[APP_ID]"});
Add the following line under BreadButter.configure();
BreadButter.ui.contentPreview({ restricted_links: ["CONTENT_PREVIEW_PAGE"], locale: { POPUP: { TEXT_3: 'TEXT LINE 1', TEXT_3_2: 'TEXT LINE 1 EXPANDED', MORE: 'EXPAND LABEL', } }, });
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/*"]
The 3 remaining fields under POPUP allow you to customize the text that appears below the sign in options.
You should now see the content preview tool appear on the specified page, after the specified time period.
Add authentication & API event tracking to your website/app with a script tag & configuration