How to Natively Gate a Flipbook With An Embedded CTA

September 1, 2015 Yoav Schwartz

You may know already how to gate a Flipbook within a Hub. You simply pull your Flipbooks into a Stream, and apply any Form CTA to that Flipbook using the overlay/gate feature.

This works well when your Flipbooks are accessed within a Hub, but when they're accessed directly that CTA doesn't apply.

This article will demonstrate how to gate a Flipbook natively, even when accessed directly, using a CTA of your choice.

The ingredients are as follows:

We'll need a Form CTA from any Hub that shares the same custom domain (or subdomain) as your Flipbook
We'll apply the Form CTA embed in the Flipbook's Folder "Welcome Popup" Widget (along with some needed styling adjustments)
We'll use the Hub's Front-end Javascript API to close the Welcome Popup once the CTA is completed successfully.

Let's dive in...

from the edit screen of any Form CTA, grab the Embed Code (basically an iframe)

Next, navigate to your Flipbook's Folder edit screen and populate the following in the Welcome Popup Widget code set to 250px width and 330px height:

&lt;!-- CTA embed //--&gt;
&lt;iframe src="http://your.domain.com/hubsFront/embed_cta/12345" scroll="none" border="0" frameborder="0" width="250" height="330"&gt;&lt;/iframe&gt;

&lt;!-- styling to remove close button //--&gt;
&lt;style&gt;
#TB_window.widgetAd{border:0;background:transparent;}
#widget_ad_closer, .modal-close{display:none !important;}
.modal-container.type-content .modal-content{ margin:0 !important;}
.modal-overlay{ pointer-events: none;}
&lt;/style&gt;

The iframe is simply the CTA's embed code. The styling hides the 'close' button for the Popup Widget and removes the ability in Flipbook 4 to close the Popup by tapping the surrounding space. This essentially takes care of both Desktop and Mobile Flipbook experiences.

The final piece of the puzzle is, upon a successful CTA submission, close the Popup Widget in the parent frame (since it's being called from within an iframe). This is why your Hub and Flipbook must use the same domain or this code will not work (cross-domain policy). In your Hub > Appearance > Custom Code > JS editor, enter the following:
```
Hubs.onCtaFormSubmitSuccess = function(){   
        if( parent.closeWidgetAd ){
            parent.closeWidgetAd();
        } else if( parent.flipbookApp ){
            parent.flipbookApp.modal.hide(false);
        }
}
```
You may notice that none of the variables are being passed into the function - they're all optional and aren't needed for this to work. That said, if you're already making use of onCtaFormSubmitSuccess, you'll want to incorporate this into your existing function or it will get replaced with this. If you wanted you could check for a specific CTA by ID (in which case you'll want to pass the ID into the function) but since the code is checking for 'close ad widget' function in the parent, it's safe to leave as is. It simply won't do anything in the scope of a Hub.

The results

You'll now have a Flipbook that uses a CTA to gate its access. There are some differences to note from how a Flipbook (or any Item) would be gated within a Hub:

For one, the CTA will ALWAYS show - even if the user filled out the form, and you haven't instructed this CTA to 'always show'. It's dumber in this sense because you're instructing this iframe to always populate.
On mobile, where a Hub CTA normally expands to full-screen after the first field is engaged, this won't be the case as the iframe is set to a specific size and the CTA is already taking up the full width/height of the iframe.
The conversion will be attributed to the Hub as a whole, not a particular Item - when you view the CTA performance report in Metrics, you'll see the Hub's home as the 'placement' of any conversions on this embedded CTA.

I hope you've enjoyed this tutorial. Let me know if you've come up with other magical uses for CTA Embeds!

About the Author

Yoav's the CEO and Founder at Uberflip. When not busy driving the vision and mission behind the world's most marketer-friendly content management platform, he's busy tinkering with front-end code...
Follow on Twitter More Content by Yoav Schwartz