Dropbox button

The Dropbox download button is a widget that allows the user to offer a file from their Dropbox account as a downloadable file. This can be dragged onto the page via the Editor and added into the template using the code documented below.


Basic usage

To include a Dropbox widget in your template you will need to add the following line:

{{widget('dropbox', 'downloadbutton', {})|raw}}

Example usage

{{widget('dropbox', 'downloadbutton', {
  'align': 'widget-align-left',
  'showFileName': true

Resulting HTML:

<div id="page-zones__main-widgets__dropboxWidget" data-name="dropbox" class="widget  widget--zone-widget">
  <div class="bk-dropbox  dropbox  widget__dropbox">
    <button class="button  icon  icon--dropbox  dropbox__button  js-link-btn" data-link="">Download</button>
    <span class="label  dropbox__label">test.file</span>

Widget options

You can change the following options for the dropbox button widget:

  • showFileName: Show the file name next to the download button Show the file name. true to show the file name, or false to hide it. It is hidden by default.

  • align: Sets the download button alignment using classes on the surround div element. The following options are available:

    • widget-align-left: To align the download button to the left.
    • widget-align-center: To align the download button to centre.
    • widget-align-right: To align the download button to the right.