Note that this article uses an example web form that is included in the example components zip file, 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 of the example components zip file.
- 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 example components zip file. 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
- Type SendSafelyDropzoneNative for name and check Lightning Communities Page checkbox -> click Submit
- Copy code from SendSafelyDropzoneNative.cmp and SendSafelyDropzoneNativeController.js to the appropriate locations in the Developer Console.
- 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 enterprise portal URL (i.e. https://exampleabc.sendsafely.com)
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)
- Once in Community Builder, click on the Lightning Component icon and scroll down to Custom Components.
- 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
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)
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 email@example.com for assistance.