Installing the SendSafely Dropzone Widget on a Salesforce Community / Experience Cloud Site [Legacy]

Please note that while this legacy article may still apply to organizations that lack a Digital Experience Site (e.g., a Customer Portal or Partner Portal), organizations that have a Digital Experience site should use our Dropzone Widget instead.

This article outlines the steps needed for installing and configuring our JavaScript SendSafely Dropzone widget into a Salesforce Experience Cloud (formerly Salesforce Community) site. All of the files referenced below can be obtained from our public code examples repository. 

Note that this article uses an example web form that is included in the published code example,  however the widget can be easily integrated with any custom Lightning Component using the process outlined below.

Create Static Resources

You will need to setup the following Static Resources. Both files are included in the "Static Resources" folder in the published code example. 

• SendSafelyDropzone.native.js - this is the required native JavaScript SendSafely Dropzone widget code. This is a specific version of the Dropzone JavaScript that does not use JQuery. 
• bootstrap.min.css - this is a Bootstrap CSS file used by the example SendSafelyDropzoneNative Lightning Component web form.

You can create Static Resources logged into your Salesforce organization using the following menu path:

Setup -> Custom Code -> Static Resources -> click New

Create two new Static Resources, one for SendSafelyDropzone.native.js named sendsafely and the other bootstrap.min.css named bootstrap. It's important to use these specific names since this is how they are referenced from the provided SendSafelyDropzoneNative.cmp Lightning Component.

Create the Lightning Component

The SendSafelyDropzoneNative.cmp and SendSafelyDropzoneNativeController.js files are included in the "SampleLightningComponent" folder of the published code example. These files have the SendSafely Dropzone widget integrated into a basic web form. The setup assumes use of the built-in Salesforce Developer Console (an IDE such as Visual Studio Code with Salesforce Extensions installed could also be used).

Setup -> Developer Console -> click File -> New -> Lightning Component

1. Type SendSafelyDropzoneNative for name and check Lightning Page checkbox -> click Submit 
2. Copy code from SendSafelyDropzoneNative.cmp and SendSafelyDropzoneNativeController.js to the appropriate locations in the Developer Console. 
3. In SendSafelyDropzoneNativeController.js update dropzoneId, organizationId, and widget.url to appropriate values.
   • dropzoneId = SendSafely Dropzone ID obtained from the Edit Profile page of the SendSafely portal. Follow the instructions outlined here to turn on your SendSafely Dropzone and obtain your Dropzone ID.
   • organizationId = Salesforce Organization Id (Setup -> Company Setup -> Company Information -> Organization Detail screen -> Salesforce.com Organization ID)
   • widget.url = Your SendSafely portal URL (i.e. https://exampleabc.sendsafely.com)

Update Salesforce Content Security Policy

Due to Salesforce default Strict CSP policy, you need to configure the policy to allow your SendSafely portal and the Web-to-Case URL, used by the example SendSafelyDropzoneNative Lightning Component.

Setup -> Security -> CSP Trusted Sites

Add Trusted Sites for the following (replace exampleabc with the hostname for your SendSafely portal)

• https://webto.salesforce.com (img-src and frame-src)
• https://exampleabc.sendsafely.com (img-src and frame-src)
• https://static-exampleabc.sendsafely.com (img-src and frame-src)
• https://app-static.sendsafely.com (img-src) 

Configure SendSafely in Salesforce Community Site Builder

Next, add the example SendSafelyDropzoneNative Lightning Component to a Salesforce Community Site. While logged into your Salesforce organization, use the following menu path:

Setup -> Feature Settings -> Digital Experiences -> All Sites -> click Builder to modify existing Community Site (or New Community to setup a new site)

1. Once in Community Builder, click on the Lightning Component icon and scroll down to Custom Components. 
2. Drag and drop the newly created SendSafelyDropzoneNative Lightning Component to your help center form and click publish. 

Note: The community site URL can be found from All Sites page

Enable Salesforce Web-to-Case

The example SendSafelyDropzoneNative Lightning Component uses Salesforce Web-to-Case functionality, so you will need that feature enabled.

Setup -> Feature Settings -> Service -> Web-to-Case -> ensure Enable Web-to-Case checked under Basic Settings

At this point, the form should be published and working in your community site. If you are unable to publish or integrate your form using the steps above, you can contact [e-mail] for assistance.