Why Create a Direct Download Link in Webflow?

Direct download links let users access files instantly, making the process easier. These links are useful for:

  • Downloadable PDFs (guides, eBooks, whitepapers)
  • Resource files (templates, datasets, images)
  • Direct access to documents without extra steps

Using direct download links in Webflow keeps things simple and efficient.

Step-by-Step Guide to Creating a Direct Download Link in Webflow

In this article, we aim to show how to create a download link for any file type including the ones that are unsupported by Webflow such as JSON, RAW and ZIP.

Step 1: Upload Your File to Webflow

You can add a supported file for download in the following way:

  1. Open Webflow’s Designer.
  2. Go to the Assets panel.
  3. Click Upload > choose your file (PDF, ZIP, image, or other.).
  4. Copy the file's url. There are two methods to do that:
    1. First one is by selecting the URL and pressing "Command" + "C" on mac, "CTRL" + "C" on windows.
    2. Second method is to right-click your mouse and select "Copy URL" option.

You can also host files externally using Google Drive, Dropbox, or Amazon S3 and copy the shareable link. We prefer using this method and hosting files in Google Drive as the tool allows you to host file types that are not supported by Webflow. We are going to use Google Drive as the file hosting tool as anexample for the article.

First thing's first—make sure that the sharable links are available to the public.

Copying Google Drive download link
When sharing the link from Google Drive you have to change the link settings from "Restricted" to "Anyone with the link."

Step 2: Generate the Direct Download Link

Once you have the file URL:

  • If hosted on Webflow, use the URL from the Asset Manager.
  • If using an external service, make sure the link allows direct downloads (e.g., for Google Drive, remove ending view?usp=sharing from the URL and add uc?export=download&id= after the first "/").

Step 3: Add the Download Link to Your Webflow Site

If you're looking to insert the direct download link on a static page, follow these steps:

  1. Select a Text Link or Link Block for the Download Link
    • If you want a text link, add a Text Link or Link Block.
    • If using an image, first wrap it inside a Link Block.
  2. Set the Download Link
    • Open the Settings panel on the link by clicking "D" on your keyboard and then clicking on the Gear icon.
    • In the Link field, paste the copied URL from Step 1.
  3. Adjust Settings for Better UX
    • Enable “Open in new tab” (optional but useful for PDFs).
    • Use a clear and descriptive label like “Download Now” if styling text links and button elements.
  4. Publish & Test
    • Click Publish in Webflow and test the download link on desktop and mobile.

If you're adding the direct download link to a dynamic (CMS) page, follow these steps:

  1. Add a text field in CMS
    • Name it something like “Link ID”.
  2. Insert an Embed Element Instead of a Text Link or Link Block
    • Drag an Embed element onto the CMS page where the download link should appear.
  3. Add the Following Code Into the Embed:
1‍<a href="https://drive.google.com/uc?export=download&id={{Link ID}}" class="button" target="_blank">Download Now</a>
  • Replace {{Link ID}} with the dynamic field from the CMS containing the unique file identifier.
  1. Insert the download link into the appropriate CMS field for each CMS item.
  2. Launch and Test
    • Click Publish and ensure the links work properly.

Best Practices:

  • Make sure your button or link is easy to find.
  • Keep file names clear and relevant.
Hosting file ID in CMS for direct download links

Our YouTube Guide on Download Links in Webflow

For a visual walkthrough, watch our YouTube tutorial:

Testing and Optimizing Your Download Links

Before publishing:

  • Click the link on desktop and mobile to confirm it works.
  • Check file permissions to ensure users can download it.
  • Use Google PageSpeed Insights to get insights to avoid slowdowns.
  • Protect sensitive files by hosting them securely.

Need Help with Webflow Development?

Want an easier way to add a direct download link? We’ve created a free Webflow clonable that you can use right away. It’s fully customizable and saves you time when setting up file downloads on your site.

And if your needs are surpassing a file management system with download link functionality, our Webflow Development Agency can help you implement and optimize solutions of any difficulty.