Documentation & FAQ

Embed your first PDF

Open a document in your archive, copy its embed code, and paste it into an HTML block on your website.

Use the public link from the document page. The private preview address is only for your account.

Basic embed

<script
  src="https://browse.pub/embed-script"
  data-src="https://browse.pub/embed/YOUR_DOCUMENT_TOKEN"
  data-title="PDF reader">
</script>

Replace YOUR_DOCUMENT_TOKEN with the token in your public link, or simply use the ready-made code from your document page.

The viewer fills the width of its container. Its default height is 60% of the viewport, with a minimum of 320 px.

Authorize your website before testing the embed. In a CMS, use a Custom HTML or Embed block that allows scripts.

Make it your own

Set a consistent style for your archive, or adjust one viewer for a specific website.

  1. Global settingsYour starting point for every document: page proportions, background, highlights, center shadow, and title visibility.
  2. Document settingsOverride the global style for one PDF. Leave a field on its global setting to keep inheriting changes.
  3. Embed attributesValues written into the embed code take priority over saved settings, for that embed only.

An example with custom settings

<script
  src="https://browse.pub/embed-script"
  data-src="https://browse.pub/embed/YOUR_DOCUMENT_TOKEN"
  data-title="PDF reader"
  data-height="600px"
  data-background="#f4f4f1"
  data-highlight="auto"
  data-show-title="false"
  data-language="en">
</script>

The basic code follows future changes to saved settings. The configured code from the document page fixes the values it includes; copy it again to update those values.

All embed options

Add these attributes to the script tag. Only data-src is required; omit any styling option to use the saved document settings.

Use true or false for switches, and six-digit hex colors such as #30383c.

data-srcRequired
The document’s public URL, copied from its page. Keep the full address, including https://.
data-title
An accessible label for the iframe, such as “Annual report”. It does not rename the PDF or change the title inside the viewer.Default: Lettore PDF
data-width
Viewer width: a CSS value such as 100% or 900px. Keep 100% for a responsive embed.Default: 100%
data-height
Viewer height: a CSS value such as 600px or 75dvh. Setting it also removes the default minimum height.Default: 60dvh (60vh fallback), minimum 320px
data-force-aspect-ratio
auto — let the viewer decide; true — force uniform page proportions; false — keep the original proportions.
data-background
Viewer background color, for example #30383c or #f4f4f1. Controls adapt to the background contrast.
data-highlight
auto — adapt search highlights to the page color; or a fixed color such as #ffd144.
data-shadow
true / false — show or hide the center shadow between facing pages.
data-show-title
true / false — show or hide the document title inside the viewer.
data-language
it / en — choose the viewer interface language for this embed.Default: the document owner’s interface language

Choose your authorized sites

Add sites in global settings for the whole archive, or on a document page for that PDF only. The two lists are combined.

Enter one domain per line, without https://, www, paths, or wildcards.

example.com
archive.example.com
localhost:8080

example.com also permits www.example.com, over HTTP and HTTPS. Other subdomains must be added separately; specify the port when your site uses a non-standard port.

An empty list blocks embedding on external websites. The public link still opens directly: the allowlist controls where the viewer is embedded, not who can read the public link.

Something not working?

Start with these quick checks.

The domain is not authorized

Add the domain of the page containing the embed, not browse.pub. For a CMS preview, authorize the preview domain too. Check the port and any subdomain.

The hosting site cannot be verified

The embed needs the browser’s Referer header to verify the hosting site. Avoid a no-referrer policy; strict-origin-when-cross-origin allows the origin to be checked.

Nothing appears, or the style does not update

Check that your CMS keeps the script tag, the data-src URL is complete, and the document is not in the trash. For old styles, remove explicit attributes to inherit saved settings, or copy the configured code again.

Need a hand? ciao@iperstudio.net