Embeddable Dropzone Widget Overview

The Embeddable Dropzone Widget provides a way to integrate SendSafely file upload capabilities into a custom web form running on any website. Once integrated, the Dropzone Widget allows website users to upload files to a pre-designated list of recipients. A complete list of all available configuration options can be found here.

How it Works

The SendSafely Dropzone Widget works by injecting an IFrame into your web form that lets users upload files anonymously to SendSafely. When the web form is submitted, the Dropzone Widget appends the SendSafely secure link to a web form input you designate, allowing you to access the files when viewing the form submission.

A Dropzone ID is necessary to use the Dropzone Widget, which can be obtained by enabling your Dropzone from the Edit Profile screen while logged in to your SendSafely account (Edit Profile -> Dropzone).

A prerequisite for integrating the Dropzone Widget into your website is that the web form must include an form input value that the SendSafely link can be appended to. This input value must be stored or transmitted via email so that the back-end recipient of the form submission can view the secure link needed to access the files.

Integrating the Dropzone Widget

In most cases, the Dropzone Widget can be integrated into your website in three steps:

1. Obtain a Dropzone ID
2. Add a reference to the Dropzone JavaScript
3. Initialize the Dropzone Widget

1. Obtain a Dropzone ID

A Dropzone ID can be obtained from the Edit Profile screen while logged in to your SendSafely account. This screen is accessible from the Account menu in the top right corner of the screen. On the Edit Profile screen, you should see the Dropzone option on the left-hand side of the page. Once selected, your Dropzone configuration options will be shown. By default, the Dropzone is OFF so you will need to set the switch to ON to reveal your Dropzone ID, which is displayed in a yellow box once the Dropzone is enabled.

2. Add a Reference to the Dropzone JavaScript

The preferred method for loading our Dropzone JavaScript code is to have your website reference the code directly from our website. By doing that you will ensure that you are always using the most up-to-date version of our Widget. The code can be referenced by adding the following line to your HTML page:

<script type="module">
import { SendSafelyWidget } from 'https://yourcompany.sendsafely.com/js/external/SendSafelyDropzone.v2.min.js'
window.SendSafelyWidget = SendSafelyWidget;
</script>

3. Initialize the Dropzone Widget

Once the Dropzone JavaScript file is loaded into the page, you will need to initialize the Widget. There are three steps required to initialize the Widget:

• Create a new Dropzone instance
• Specify optional configuration parameters
• Initialize the Widget

The following code example shows how to load and initialize the Dropzone Widget:

var dropzoneId = 'my-dropzone-id';
var placeholderElement = document.querySelector("#dropzone-replacement-div");
var formField = document.querySelector("#hidden-secure-link-field");

//Create a new instance.
var SendSafelyWidget = window.SendSafelyWidget;
var widget = new SendSafelyWidget(dropzoneId, placeholderElement, formField);

//Once created, we can specify any optional configurations here.
widget.BACKGROUND_COLOR = '#ffffff';

//Set the URL for your SendSafely portal. 
//If you are a PRO TRIAL user, you should use https://www.sendsafely.com. 
widget.url ='https://yourcompany.sendsafely.com';

//Finally we are ready to initialize the Dropzone Widget.
widget.initialize();

When creating a new Dropzone instance, you will need to pass in three parameters:

• Dropzone ID - A Dropzone ID obtained from the SendSafely website (see above)
• Reference to a Placeholder Element - A reference to the placeholder element in the web page where the widget should be rendered. The Dropzone will always assume 100% width of the placeholder element. You can manually override this behavior so that any percentage or pixel width can be used. Refer to the Dropzone Documentation for more information on how to do this.
• Reference to a Web Form Input - A reference to a web form input where the SendSafely secure link should be appended to. This is typically a text area or a hidden field available in your form, which is either stored in your database when the form is submitted or transmitted via email to recipients of the web form data. This parameter is not required if the disableAutoSubmit flag is set to "true" (see below).

Before the Dropzone has been initialized, you can change certain style properties. In the example above, the background color is changed to white (#FFFFFF) but there are many more options available. Refer to the Dropzone Documentation.

Once the Dropzone is initialized, you should see the widget displayed on the page. The widget should look similar to what is shown below:

By default, the Dropzone Widget will append a secure link to web form input you specify when the Dropzone instance is created. This will happen automatically when any form on the page is submitted. If you do not want this to happen automatically on the form submit (if you have multiple forms on the page, for example) then you should set the disableAutoSubmit property to "true" and call the widget.finalizePackage method programmatically as shown below. 

//if you use this option, please set the disableAutoSubmit to true before initializing the Dropzone Widget
widget.finalizePackage(function (url) {
    //url will contain the secure link.
    console.log(url);
});

Calling the finalizePackage function will return the secure link, which should then be appended to the appropriate web form parameter before submitting the form.

You must manually append the secure link to your web form parameter when disableAutoSubmit is set to "true". The third parameter passed to the Dropzone constructor (the reference to a web form input) is ignored when disableAutoSubmit is set to "true".

Optionally Set Unconfirmed Sender

Prior to finalizing the package, you can optionally set the email address of the user performing the upload on the package using the setUnconfirmedSender function. This will result in the email address of the file sender to display when viewing / downloading Received Items in the SendSafely web portal.

//Set the user's email address using the setUnconfirmedSender function
widget.setUnconfirmedSender(document.querySelector("#email-address"));
widget.finalizePackage(function (url) {
    //url will contain the secure link.
    console.log(url);
});

To utilize this feature the upload form should have an input field for the user to enter their email address.

The sender's email address appears "(Unconfirmed)" in SendSafely because email address verification was not performed.

Based on this article, you should now be able to integrate the SendSafely Dropzone Widget into your own web form.