Embed Widget Quick Start

Add interactive flipbook publications to any website with a single script tag. Covers basic embedding, data attributes, and troubleshooting common issues.

On this page

Embed Widget Quick Start

The ZenFlip embed widget lets you add interactive flipbook publications to any website with minimal code. The widget creates a responsive iframe that loads the ZenFlip viewer with your publication.

Method 1: Script Tag (Simplest)

Add a single script tag wherever you want the flipbook to appear. The widget renders the publication directly after the script element.

That is all you need. The embed widget automatically initializes when the page loads and inserts an iframe containing your publication.

Method 2: Div Container

For more control over placement, use a div element with the zenflip-embed class and include the embed script separately. This is the recommended approach when you have multiple publications on one page.

The script scans the page for all elements with the zenflip-embed class and initializes each one.

Data Attributes

Configure the embed using HTML data attributes:

Attribute

Default

Description

data-pub

Required

Publication slug (from the publication URL)

data-width

100%

Width of the embed (CSS value: 100%, 800px, 50vw)

data-height

600

Height of the embed (number in pixels or CSS value)

data-auto-flip

false

Auto-flip pages at a timed interval

data-start-page

1

Page number to open on initial load

data-base-url

Auto

Override the base URL for the viewer (advanced)

Numeric height values are treated as pixels. You can also use CSS units like 80vh or 500px.

Common Examples

Blog Post Embed

A compact embed suitable for within article content:

Full-Page Embed

Fill the entire viewport with the flipbook:

Responsive Embed

Create a responsive embed that adapts to the container width:

The embed widget always sets max-width: 100% on its wrapper, so it naturally fits within any container without horizontal overflow.

Auto-Flip Presentation

Start on a specific page with auto-flipping enabled (useful for kiosk displays or presentations):

Multiple Publications on One Page

Use the div method when embedding more than one publication:

Finding Your Publication Slug

The publication slug is the URL-friendly identifier visible in the publication URL. You can find it in two places:

  1. Dashboard: Open the publication and look at the URL in your browser: https://app.zenflip.io/publications/your-slug-here

  2. API: The slug field in the publication object returned by GET /publications

Troubleshooting

The embed does not appear

  • Verify the data-pub attribute matches an existing, published publication slug.

  • Check the browser console for errors. A missing slug produces the warning: [ZenFlip] Missing data-pub attribute. Skipping embed.

  • Confirm the publication status is published (draft publications are not accessible via the public viewer).

CORS errors in the console

If you see Cross-Origin Resource Sharing (CORS) errors, the issue is usually with your Content Security Policy (CSP) headers. Add the ZenFlip domain to your CSP frame-src directive:

Content Security Policy (CSP) blocking the script

If your site uses strict CSP headers, you need to allow the embed script:

The embed appears but pages do not load

  • The publication may still be converting. PDF conversion runs asynchronously after upload and can take a few seconds to a few minutes depending on page count.

  • If the publication uses private access or is password-protected, the public viewer endpoint will not return page data. Set visibility to public for embeds.

Embed height does not match content

The embed widget uses a fixed height based on the data-height attribute. If pages appear cut off, increase the height value. For a more dynamic approach, use CSS viewport units like 80vh to make the height relative to the browser window.

Next Steps

Next →
Advanced Embed Options