Create a File Download Link In Webflow (Trial Version)

Mayank
|
September 5, 2020

If you do not already know, Webflow has this facility that allows you to connect a file to a button, a link or a link block. Once connected, when you click on the button, link or the link block, the file either gets downloaded or gets open in the browser itself (depending on the file type of course). The file may be picked up from some where in your Webflow assets or from a file type field in your Webflow CMS. This is a pretty handy feature but is available only for premium members ( you need to pay to use it). Here is the source of this information.

Link Settings

Now that you cannot access this feature unless you have something more than the freemium plan, there's a small workaround that may get you moving. Before starting on that it must be understood that you cannot completely put back the inbuilt file link feature using this method. For example you can not add a direct download link to a file hosted in your Webflow assets or inside the CMS itself. Even though you can add a link that eventually opens up the document for a preview in the browser you cannot leverage the features (looping though the collection, pagination etc..) that only Webflow CMS can provide inside Webflow.

Use-case

So the method that is about to be described can be used to link a file hosted on an external network to a link or a button inside the Webflow project. For example: Let's say you want to add a link on your portfolio website, that enables the visitors to download your resume.

Now let's go about with the simple steps.

  • Upload your CV somewhere on the cloud. ( Google drive in the example)
  • Get a shareable link. Make sure the link has no restricted access. (Select "Anyone with the link" for files on google drive)
Google Drive Shareable Link

  • Now if you share this link with someone, they should be able to access the file with no restriction but to download the file, they will have to save the file manually to their machine.
  • To get a direct download link to the file, you need to get the shareable link converted to a download link and you can do it here. A direct link will immediately start downloading the file, rather than opening a preview of the file in Google Drive.
  • Next, create a button, a link or a link block in your Webflow page.
  • Open the link settings view and now change the Type to external URL (from the drop down)
  • Copy the complete download link into the URL field
  • Save the progress and publish.
External URL instead of inbuilt file attachment

written by
Mayank
Web Technology Enthusiast