Installing the Portal Widget for Freshdesk

The SendSafely Freshdesk Portal Widget is a wrapper for the SendSafely Dropzone Widget that is specifically tailored to work with the default Freshdesk user ticketing interface. The Freshdesk Widget replaces the native Freshdesk "Attach a file" interface with one that allows files to be uploaded using SendSafely (rather than stored on the Freshdesk servers). This adds not only file-level encryption to uploaded items, but also eliminates the file size limits imposed by Freshdesk.

How it Works

The Freshdesk 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 Freshdesk 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 Freshdesk Widget

In order to enable the Freshdesk Widget you must have an existing Freshdesk administrator login, or an account with access to the Support Channels Portals feature. In most cases, the widget can be integrated in three steps:

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

1. Obtain a Dropzone ID

If you have not already done so, follow the instructions outlined here to turn on your SendSafely Dropzone and obtain your Dropzone ID. We recommend that you configure your Dropzone under a Service, or Alias account such as [e-mail] and then add each agent's named user account as a Dropzone Recipient.  This article provides instructions on managing Dropzones configured under service accounts as a SendSafely Administrator. 

2. Add a Reference to the Freshdesk Widget

The preferred method for loading our Freshdesk JavaScript code is to have your website reference the code directly from your SendSafely hosted portal 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="text/javascript" src="https://app.sendsafely.com/js/external/SendSafelyFreshdesk.min.js"></script>

Replace https://app.sendsafely.com with your SendSafely organization's hostname.

Include our JavaScript in the Head section of Portal Layout as shown in the screenshots below rather than on specific Portal pages. This will ensure that the widget gets loaded on all pages that allow file uploads.

1. In the Admin tab, navigate to Channels and select Portals.
2. Hover over the target portal and click the Edit button that appears. 
3. Click the Appearance tab.
4. Click the Edit theme button on the Current theme.
5. Under Pages, open the Layout dropdown and click Head. Paste the script tag above at the bottom of the code.

3. Initialize the Freshdesk Widget

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

• Add a hidden "helpdesk_ticket_email_reply" DIV element that includes the user's email address
• Create a new Freshdesk instance
• Initialize the Widget

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

<div style="display:none" id="helpdesk_ticket_email_reply">{{ portal.user.email }}</div>
<script>
window.addEventListener("load", () => {
   if (typeof SendSafelyFreshdesk === 'function') {
      var dropzoneId = 'your-dropzone-id';

      //Create a new instance.
      var sendsafely = new SendSafelyFreshdesk(dropzoneId);
      sendsafely.api.url = 'https://demo.sendsafely.com';
      sendsafely.initialize();
   }
});
</script>

The Freshdesk Page layout section of the Portal Layout is generally the easiest place to add this code, as shown in the screenshot below. Once the JavaScript is added, make sure you click the Save and Publish button.

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 Freshdesk 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.

Refer to the Widget Documentation for a complete list of customization options.