How to open Dropbox PDF files in a Squarespace lightbox popup

You can use Lightbox Studio to display PDF files in a lightbox on Squarespace, by default it support PDF files uploaded to your Squarespace website, but can it supports PDF files hosted on Dropbox?

Dropbox URLs, such as https://www.dropbox.com, don’t support CORS, preventing PDFs hosted on Dropbox from displaying on Squarespace. However, Dropbox provides a https://dl.dropboxusercontent.com domain that supports CORS by default. This tutorial will guide you through the steps to display Dropbox-hosted PDFs in a Squarespace lightbox.

This tutorial will guide you how to open a PDF file in a lightbox popup in your Squarespace website. Below are the steps in this tutorial:

  • Step 1 - Install Lightbox Studio

  • Step 2 - Upload the PDF to Dropbox.

  • Step 3 - Copy the Dropbox share link and change the domain from https://www.dropbox.com to https://dl.dropboxusercontent.com.
    Pro tip: Use this free dev tool to quickly convert your PDF link to a downloadable link.

  • Step 4 - Create a text or button link to the PDF, ensuring β€œOpen link in new tab” is unchecked.

  • Step 5 - Your Dropbox PDF will now open in a lightbox.

A demo created with above tutorial is as below:

πŸ“‘ Open a Dropbox PDF Popup

Previous
Previous

How to embed PDF on Squarespace: A complete tutorial

Next
Next

Enable easy image downloads with Lightbox Studio