How do I link to a file in Dropbox from our website?

You have two options:

  1. Simply include a link from the website to the file. The user clicks on the link and is switched across into Dropbox and the file is automatically opened for them.
  2. Have the content of the file displayed within the website. The Annual Reports are a good example of this. As the files can take time to load in the website, given their size, it is recommended that this is only used in special circumstances.

Simple link

  1. Login to the Dropbox account.
  2. Locate the file you wish to link to.
  3. Select the file and on the right, you should see a “Copy Link” button appear.
  4. Click on the link.
  5. Now switch to the place in the website where you want to include the link and open it in the editor.
  6. Select the text you want to act as the link.
  7. Click on the link icon at the top, which looks a bit like this (-). It’s supposed to be a link in a chain.
  8. In the pop-up provided, paste the link you copied from Dropbox
  9. Below you should see various options. You may need to scroll down in the pop-up window.
  10. Select the “Open in new tab” option.
  11. Click on the “submit” icon, a left and downward pointing arrow to save your link.

Display dropbox file content in the website

This process is a bit “Chicken and Egg”, so best to have a go and work out exactly which sequence works best for you.

Obtain the Dropbox link

  1. Login to the Dropbox account.
  2. Locate the file you wish to link to.
  3. Select the file and on the right, you should see a “Copy Link” button appear.
  4. Click on the link.

Create an Embedder document in the website

  1. Login to the website.
  2. Hover over the “+New” icon at the top of the page and select “Document Embedder”.
  3. Provide a title for the document you’re embedding, something that makes it clear what it is, but it won’t be displayed anywhere, unless you specifically set it to do so.
  4. Scroll down until you find a field called “Document”. Paste your link in this field.
  5. You now need to make two changes to the link you have just pasted:
    • Near the beginning, change: “www.dropbox.com” to “dl.dropboxusercontent.com”.
    • At the end, change: “dl=0” to “raw=1”.
  6. Scroll back to the top and click on the “Save” button.
  7. Just below the title, you’ll notice a box titled “Shortcode”. Copy the code below, which will be of the form: . Please ignore the fact that the image may be shown twice on your device. It is a glitch that we’re trying to sort out.

Embed your file in your website post or page

  1. Go to the post or page where you want to include the content of the file held on Dropbox.
  2. Create a new block and change the block type to Shortcode.
    • Click on the “+” sign.
    • Select “Shortcode” from the options presented. You may need to search for it.
  3. Paste the shortcode you copied from the previous step.
  4. Publich or Update your post or page and you’ll see the content from Dropbox included when you open the website at the relevant point.
Scroll to Top