Installing the Portal Widget for Zendesk

The Zendesk Widget is a wrapper for the Dropzone Widget that is specifically tailored to work with the default Zendesk user ticketing interface. The Widget adds not only file-level encryption to uploaded items, but also eliminates the file size limits imposed by Zendesk. The Zendesk Widget replaces the native Zendesk "Attach File" interface with one that allows files to be uploaded using SendSafely (rather than stored on the Zendesk servers). Additionally, if you are using the rich-text editor option on your Zendesk form, the Widget also removes the inline image button in the editor tool bar. 

How it Works

The Zendesk Widget works by injecting an IFrame into the ticket interface so that users can upload files anonymously through SendSafely. When the ticket is submitted, the widget appends the SendSafely secure link to the bottom of the ticket message.

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

Integrating the Zendesk Widget

In order to enable the Zendesk Widget you must have an existing Zendesk administrator login, or an account with permission to edit your Help Center HTML template. In most cases, the widget can be integrated in three steps:

1. Obtain a Dropzone ID
2. Add a reference to the Zendesk JavaScript
3. Initialize the Zendesk 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 Zendesk Widget

The preferred method for loading our Zendesk 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 latest version of the widget is v2, which does not rely on jQuery and is compatible with Zendesk Help Center templating API v3 & v4. If you wish to use the legacy version of our Zendesk Widget, which requires jQuery, please proceed to the Appendix of this article.

The code can be referenced by adding the following lines to your HTML page:

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

Replace yourcompany.sendsafely.com with the URL for your SendSafely Portal. 

Screen 1:

 

---

Screen 2: 

 

---

  

Screen 3:

 

---

Screen 4:  

 

We recommend that you include our JavaScript in your HTML header or footer template as shown in the screenshots below rather than on specific Help Center pages. This will ensure that the widget gets loaded on all pages that allow file uploads.

 

3. Initialize the Zendesk Widget

Once the Zendesk 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 Zendesk instance
• Initialize the Widget

The code example below shows how to load and initialize the Zendesk Widget. Note that the sendsafely.api.url property should be set to your SendSafely organization's hostname.

document.addEventListener("DOMContentLoaded", function () {
  var SendSafelyZendesk = window.SendSafelyZendesk;
  if (typeof SendSafelyZendesk === 'function')
  {
    var dropzoneId = 'my-dropzone-id';
    // Create a new instance.
    var sendsafely = new SendSafelyZendesk(dropzoneId);
    // The following line should reflect the URL for your SendSafely portal. 
    // If you are a PRO TRIAL user, you should use https://www.sendsafely.com. 
    sendsafely.api.url = 'https://yourcompany.sendsafely.com'; 
    // Post the SendSafely secure link as a formatted hyperlink if Rich Text Editor is enabled.
    sendsafely.formattedLink=true;
    sendsafely.initialize();
  }
  else
  {
    // Stop the native Zendesk attachment box from showing if SendSafely is unable to load 
    document.querySelector("#upload-dropzone").parentNode.style.display = "none";
  }
});

The Zendesk Theme Editor is generally the easiest place to add this code, as shown in the screenshot below. You can insert the new code at the very top of the script.js file. 

If initialized properly, you should see the widget displayed on the page. The widget should look similar to what is shown below (note the orange padlock logo):

Since the Zendesk Widget is a wrapper for the Dropzone Widget, all custom Dropzone properties are also accessible using the internal api variable. You should set these properties on the widget instance before calling the initialize() method.

---

Appendix - Legacy jQuery Portal Widget

You may wish to use the legacy version of the portal widget if you are using Zendesk Help Center templating API v1 or v2. This version of the widget requires jQuery.

Widget Version:                                                 Compatible with:

                 SendSafelyZendesk.v2.min.js                      Zendesk  Help Center templating API v3 & v4

                     SendSafelyZendesk.min.js (Legacy)           Zendesk Help Center templating API v1, v2 & v3

The code can be referenced by adding the following lines to your header.hbs file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://yourcompany.sendsafely.com/js/external/SendSafelyZendesk.min.js"></script>

You can then initialize the widget by adding the following lines to your script.js file:

$(document).ready(function() {
  if (typeof SendSafelyZendesk === 'function')
  {
    var dropzoneId = 'my-dropzone-id';

    //Create a new instance.
    var sendsafely = new SendSafelyZendesk(dropzoneId);
    //The following line should reflect the URL for your SendSafely portal. 
    //If you are a PRO TRIAL user, you should use https://www.sendsafely.com. 
    sendsafely.api.url = 'https://yourcompany.sendsafely.com'; 
    //Post the SendSafely secure link as a formatted hyperlink if Rich Text Editor is enabled.
    sendsafely.formattedLink=true;
    sendsafely.initialize();
  }
  else
  {
    //Stop the native Zendesk attachment box from showing if SendSafely is unable to load 
    $('#upload-dropzone').parent().hide();
  }
});