Checkout option: Popup frames

Enable visitors to shop on your webshop without leaving the catalog

Updated over a week ago

A popup frame is a smaller window that can be opened on top of your Flipbook. In the world of code, this is known as an iframe.

While iframes can be used to open any kind of web content, the most common way of using it in a Flipbook, is to enable visitors to shop directly in your webshop or open a store locator.

📖 This guide explains

Benefits of using popup frames

Popup frames can help you retain visitors by allowing them to shop directly in your webshop without leaving the catalog.

Traditional external links, while being easy to implement, move the user into another browser tab. This increases the risk of the visitor not coming back into the catalog after visiting a product page, wasting your effort of retaining the visitor and the resources allocated to creating the Flipbook.

Setting up a popup frame in your Flipbook

Now that you know what a popup frame is and what the benefits are, let's focus on getting you started. There are a few things to consider, first:

Branded domain

💡 We highly recommend setting up a branded domain, to avoid a cross-domain challenges.

CORS is an HTTP-header. Servers use this to recognize the origin of the domain and allow/deny loading resources.

When you attempt to open a popup which uses a different domain than that of your Flipbook, your website might not allow it. By using a subdomain that is part of your main domain, you'll get around most of these challenges. To achieve this, you'll need to set up and add any branded domains (domains that you own) in iPaper.

However, it is also possible to open different domains. Find more information on our technical documentation below.

If you don’t have a branded domain yet, find how to set it up here:

Enrichment Automation

While popup frames can be created within the Enrichment Editor, you can automate the process by using Enrichment Automation. Only available on select plans.

If you’re not using an Enrichment Automation yet, or want to know more, take a look at our guide, below:

Extra navigation options

Here are some suggestions if you want to further improve the experience when using popup frames.

Add an external basket URL

Consider adding a direct link to your website, so your customers can access the cart easily. You can do this by overriding the default iPaper shop behavior, in your Shop Configuration settings:

  1. Select your Flipbook, the click on the Settings pane.

  2. Select the Modules tab.

  3. Click on Shop configuration from the vertical menu on the left.

  4. You will see the Shop Configuration used for your Flipbook displayed here. To edit it, click on the Shopping cart icon beside your shop configuration.

  5. The shop configuration in use is highlighted in the popup window. Select the pencil icon to edit it.

  6. You'll now want to access the Advanced Shop settings. To do so, click on the cog icon to the right of the Shop settings section.

  7. Under the Checkout behavior section in the Advanced Shop settings, enter the URL of your external basket in the External basket URL field.

  8. Remember to Save your changes!

Implement a close function in the popup frame.

By implementing a close function on the popup frame, when a user adds a product to your cart, the popup can close by itself. This does require a small piece of JavaScript, which is easy to implement, and can be found in our technical documentation.

Implement a custom version of your website

When a customer opens a popup frame, your website is loaded in a simpler and optimized view for better experience. This can be achieved by using query strings.

For example:


You can read more in the technical documentation below.

Things to consider when using popup frames

While the idea of opening your webshop on top of the catalog is great, there are a few things to keep in mind when using popup frames.


Most websites today will block other websites from being iframed to avoid clickjacking. This is a basic security measure to avoid malicious techniques to trick users into revealing confidential information. While a useful security feature, this can prevent popup frames from delivering the result you wish.

The best precautions security-wise is to include both X-Frame Options and Content Security Policy for full browser support. Popup frames require a small but technical change on your websites' server, to allow us to iframe your website.

💡 You can read more about implementing X-Frame Options and a Content Security Policy, in our technical documentation.

Basket session

In some cases, the basket session will get lost when closing and opening the popup.

There are two main solutions for this:

  • Tweak the session cookie

  • Set up a branded domain to avoid cross-domain challenges.

Iframing responsive websites in a popup frame

Even though the popup frame supports displaying a custom width and height, it is, ideally, the website being iframed within it, that should handle any resizing.

Doing so means that the iframed website, when viewed on mobile or smaller screens, should resize accordingly to the display. We cannot guarantee optimal results when iframing external websites within a popup frame.

As such, we highly recommend that you check the website you are iframing is responsive, and displays correctly on a variety of screen sizes.

Using third-party payment gateways in popup frames

Popup frames support the use of third-party payment gateways that allow your users to pay for your goods and services. However, we cannot guarantee that the payment gateway of your choice allows for it to show in an iframe, namely for the security issues presented above.

We recommend that if you intend to use a third-party payment gateway in your popup frame, that you check that this functionality is supported, prior to implementing it.

Technical documentation for popup frames

Your implementation will highly vary depending on your website's current security measures. We recommend involving your IT department to determine what's the best way of achieving this. For this, you'll want to get acquainted with our technical documentation, which can be found, below:

Alternatives to popup frames

If you're looking for embedding your Flipbook in your website and enable shopping functionality, you might want to take a look at our JavaScript integration:

If you want your visitors to shop directly in the catalog with an iPaper basket and then redirect to your webshop, consider our Shop Export option:

Take your Flipbook from flat PDF to engaging digital shopping experience

Understand how this, and other tactics, can help you attract and inspire shoppers, while also capturing buying intent and converting to a sale, in our Success Framework.

Did this answer your question?