Using Zendesk Tags with Dropzones

SendSafely Dropzones can be used with Zendesk tags to create workflows tailored to specific customer groups (who are labelled with Zendesk tags). The most common way to leverage this integration is to enable user and organization tagging, which requires a Zendesk Admin to set up.

This article outlines the steps needed to enable these tags and configure the SendSafely Help Center widget to conditionally load based on these tags. 

1. Create Zendesk Tags

Zendesk tags are words (or combinations of words) that you can use to add more context to tickets and topics. You can use Zendesk tags to label entire groups of customers and apply different rules to these groups from within Zendesk.

For example, you could create a tag "VIP" and automatically add it to all customers with a certain email domain, e.g. [e-mail]. You can read more about creating and using Zendesk tags in this Zendesk Help Center article.

2. Create Specific Dropzone (or use an existing one)

For your VIP customer workflow, either create a new Dropzone (using a service account) or re-use an existing Dropzone. A service account Dropzone is recommended, rather than someone's personal Dropzone, since personal accounts are deactivated if the person leaves your organization: this break any custom workflows you have set up under that personal account.

Service accounts exist as long as your portal exists, unless a SendSafely Admin deliberately delete them. The SendSafely Help Center has further instructions on:

1. How to create a service account.
2. Setting up a hosted Dropzone.

Once your Dropzone is ready, you will need to copy the Dropzone ID for the next step: adding custom JavaScript to your Zendesk portal page.

3. Add Custom Portal Widget Code

The preferred method for loading our Zendesk JavaScript widget is to have your website reference the code directly from our website. The code can be referenced by adding the following lines to your Help Center template within the header.hbs file. 

<script type="module">
// change "yourcompany.sendsafely.com" to your actual portal URL 
import { SendSafelyZendesk } from 'https://yourcompany.sendsafely.com/js/external/SendSafelyZendesk.v2.js'
window.SendSafelyZendesk = SendSafelyZendesk;
</script>

The header.hbs file can be edited from the Guide Admin settings as shown below:

Once the SendSafely Zendesk JavaScript file is loaded into the page, you will need to add JavaScript that creates a new instance of the widget and initializes it. A code example of how to do that is shown below. 

Note that the sendsafely.api.url property should be set to your SendSafely organization's hostname. This code also checks both the user and the user's organization for the "vip" tag.

(function() {
  document.addEventListener("DOMContentLoaded", function () {
    var SendSafelyZendesk = window.SendSafelyZendesk;
    if (typeof SendSafelyZendesk === 'function') {
      // set a default dropzone here
      let dropzoneId = 'default-dropzone-id', sendsafely;
      const tagToCheck = "vip"; // case sensitive!
      let matchForTag = HelpCenter.user.tags.includes(tagToCheck);
      const userOrgs = HelpCenter.user.organizations || [];
      if(!matchForTag && userOrgs) {
        for(let org, i = 0; i < userOrgs.length; i++) {
          org = userOrgs[i];
          if(org.tags.includes(tagToCheck)) {
            matchForTag = true;
            i = userOrgs.length;
          }
        } 
      }
      if(matchForTag) {
        // enter the ID of the VIP dropzone here
        dropzoneId = "vip-dropzone-id";
      }
      // Create a new instance.
      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://demo.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 tag ("vip") can be set at either the user or organization level in Zendesk, and when present, will cause the dedicated "VIP" Dropzone to be loaded. This process can be easily extended to include multiple tags and their associated Dropzones, e.g. "US" and "Rest of World" Dropzones etc.

Once everything is configured, submissions from your end-users will be automatically routed to the correct SendSafely Dropzone when they are logged into the Zendesk Help Center.