Using the Dropzone Modal with Forethought AI

This article walks through how to configure the SendSafely Dropzone Modal to work with the Forethought.ai Solve Chat Widget. This example prompts the user to upload files for certain workflows and launches the modal as needed. The example uses the Forethought Widget client-side functionality to update the conversation after the user submits files. No Dropzone Connector is needed for this example and it does not use the "Upload Files" button (users can only attach files when prompted). 

Defining the Trigger Event 

The Trigger Event Action feature of the Forethought widget can be used to launch the modal when a user needs to upload files. The first step in this setup is to define an intent that can be used to invoke the action as outlined below. 

In the example above, the user is asked if they want to attach any screenshots before being handed off to an agent. Choosing "Yes" invokes the Trigger Event block for our custom event (customer_sendsafely_attachment_upload). A context variable named $sendsafely_link is also created and updated when the action completes. 

After the action completes, the context variable is checked and if not empty, the link is rendered in the conversation with an "Upload Succeeded" message. This link will be used by the agent after handoff in order to access the files. 

Installing and Initializing the Modal 

The Drozpone Modal javascript should be included on every page that runs the Forethought widget where the trigger event can be invoked. 

<script src="https://files.sendsafely.com/js/SendSafelyDropzoneModal.js" type="module"></script>

The next step is to define a function to initialize the modal. This function includes onUploadComplete callback logic to complete the trigger event action after the user submits their files. We also include logic in the onCancel callback to handle cases where the user presses "Cancel" or closes the modal without submitting files. 

// Initialize upload widget
let myDropzoneModal = null;

function createDropzoneModal() {
    myDropzoneModal = new SendSafelyDropzoneModal({
        dropzoneId: 'put-your-dropzone-id-here',
        url: 'https://app.sendsafely.com',

        onUploadComplete: (url) => {
            // Trigger Forethought event
            myDropzoneModal.resetDropzone();
            window.Forethought('widget', 'triggerEventComplete', {
                identifier: 'customer_sendsafely_attachment_upload',
                payload: {
                    'sendsafely_link': url
                }
            });
        },
        onUploadError: (type, message) => {
            //This should generally never happen 
            alert('SendSafely upload failed: ' + (message || type) + ". Please notify the agent."); 
        },
        onCancel: () => {
            //User closed the modal without uploading...resume the workflow with no link
            window.Forethought('widget', 'triggerEventComplete', {
                identifier: 'customer_sendsafely_attachment_upload',
                payload: {
                    'sendsafely_link': ''
                } //blank means they cancelled 
            });
        }
    });
}

The last step is to add code that listens for the event and opens the modal when the event is triggered. As shown below, the forethoughtTriggerEventAction event invoked by the Forethought widget when our custom event gets triggered. 

window.addEventListener('message', (event) => {
    if (event.data.event === 'forethoughtTriggerEventAction') {
        switch (event.data.name) {
            case 'customer_sendsafely_attachment_upload':
                if (!myDropzoneModal) {
                    createDropzoneModal();
                }
                myDropzoneModal.showModal();
                break;
        }
    }
});

Using the Modal 

Now that the appropriate code has been added to the page, you are ready to invoke and test the modal. As shown below, the intent we defined in step one prompts the user if they want to attach files. 

Pressing yes triggers the event, which causes the modal to open.

After pressing submit, the event completes and the link is posted back to the conversation.

Complete Example Code 

The full HTML from the example above is included below for reference. You will need to update the example to use a valid Forethought API key and SendSafely Dropzone ID.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Forethought SendSafely Example</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://files.sendsafely.com/js/SendSafelyDropzoneModal.js" type="module"></script>
  </head>

  <body>
    <script>
        window.forethoughtSettings = {
            widget_id: "forethought-widget-embed-script",
            mode: "overlay",
            align: "right",
            showMinimized: true,
            emitTrackingEvents: true,
            autoOpen: false
        };

        const script = document.createElement('script');
        script.src = "https://solve-widget.forethought.ai/embed.js";
        script.id = "forethought-widget-embed-script";
        script.async = true;
        script.setAttribute("data-api-key", "put-your-forethought-api-key-here"); // Insert API key
        script.setAttribute("data-ft-Embed-Script-Language", "en");
        document.head.appendChild(script);

        // Initialize upload widget
        let myDropzoneModal = null;

        function createDropzoneModal() {
            myDropzoneModal = new SendSafelyDropzoneModal({
                dropzoneId: 'put-your-dropzone-id-here',
                url: 'https://app.sendsafely.com',

                onUploadComplete: (url) => {
                    // Trigger Forethought event
                    myDropzoneModal.resetDropzone();
                    window.Forethought('widget', 'triggerEventComplete', {
                        identifier: 'customer_sendsafely_attachment_upload',
                        payload: { 'sendsafely_link': url }
                    });
                    blockForethoughtEscape = false;
                },
                onUploadError: (type, message) => {
                    //This should generally never happen. 
                    alert('SendSafely upload failed: ' + (message || type) + ". Please notify the agent.");
                },
                onCancel: () => {
                    //User closed the modal without uploading...resume the workflow with no link
                    window.Forethought('widget', 'triggerEventComplete', {
                        identifier: 'customer_sendsafely_attachment_upload',
                        payload: { 'sendsafely_link': '' } //blank means they cancelled 
                    });
                }
            });
        }

        window.addEventListener('message', (event) => {
            if (event.data.event === "forethoughtWidgetOpened") {
                // Use this if you want to show the upload button on widget open
            } else if (event.data.event === "forethoughtWidgetClosed") {
                // Use this if you want to hide the upload button on widget close
            } else if (event.data.event === 'forethoughtTriggerEventAction') {
                switch (event.data.name) {
                    case 'customer_sendsafely_attachment_upload':
                        if (!myDropzoneModal) {
                            createDropzoneModal();
                        }
                        myDropzoneModal.showModal();
                        break;
                }
            }
        });
        
    </script>
  </body>
</html>