Using the Dropzone Modal with Ada Messaging

This article walks through how to configure the SendSafely Dropzone Modal to work with the Ada messaging Widget. This example allows the end-user to upload files at any time using a button that is displayed at the bottom of the chat window. 

Defining Logic to Render the Secure Link 

The TriggerAnswer function of the Ada Chatbot Web SDK will be used to render a success message including the Secure Link after the user submits files. For generative Ada, this function can be used to manually trigger a custom "Process" based on the Process id. 

At a high level, the steps to implement are:

• Define a custom metadata field (ie ss_secure_link)
• Create a Process that renders the secure link into the conversation
• Populate the custom metadata field from within the onUploadComplete callback
• Trigger the Procedure from within  the onUploadComplete callback after setting the link 

An example Process to render the secure link is shown below. Refer to the HTML code example later in this article for an example of how to populate the metadata field and trigger the procedure. 

Note: The Process ID is included in the address bar / URL (underlined in red). You will need this value for the next step. 

Installing and Initializing the Modal 

The Dropzone Modal javascript should be included on every page that runs the Ada widget where you want users to be able to upload files. 

<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 set the secure link variable using adaEmbed.setMetaFields and invoke the Ada adaEmbed.triggerAnswer function after files have been submitted. A brief one second pause is added to ensure there is adequate time for the variable update to succeed before showing the message. 

Note: You'll need to replace PUT_YOUR_PROCESS_ID_HERE in the code below with the ID of the Process you created in the previous step (obtained from the address bar / URL).  

let myDropzoneModal = null;

function createDropzoneModal() {
    return new SendSafelyDropzoneModal({
        dropzoneId: 'PUT_YOUR_DROPZONE_ID_HERE',
        url: 'https://PUT_YOUR_SENDSAFELY_HOSTNAME_HERE',
        buttonStyles: { //Custom CSS to position the button and match styling
            maxWidth: '375px',
            height: '48px',
            background: 'rgb(123, 82, 194)',
            bottom: '8px',
            right: '24px',
            boxShadow: 'rgba(0, 0, 0, 0.12) 0px 12px 48px 4px',
            borderRadius: '0 0 16px 16px',
            color: '#ffffff',
        },
        onUploadComplete: (url) => {
            window.adaEmbed.setMetaFields({
                ss_secure_link: url
            }).then(() => {
                setTimeout(() => {
                    window.adaEmbed.triggerAnswer('PUT_YOUR_ADA_PROCESS_ID_HERE');
                }, 1000);
            });
        },
        onUploadError: (errorType, errorMessage) => {
            //This should generally never happen. 
            alert('SendSafely upload failed: ' + (message || type) + ". Please notify the agent.");
        }
    });
}

To make the button appear more native, you'll want to shift the height of the Ada chat frame up slightly and remove the border radius from the bottom corners of the frame. 

<style>
    #ada-chat-frame {
        bottom: 52px !important;
        z-index: 990 !important;
        border-radius: 16px 16px 0 0 !important;
        height: calc(100% - 52px) !important;
    }
</style>

The last step is to add code that clears the ss_secure_link variable and the beginning and end of a session, along with logic to show/hide the upload button when the Ada widget is opened/closed using Ada's toggleCallback function. 

window.adaSettings = {
    onAdaEmbedLoaded: () => {
        window.adaEmbed.setMetaFields({ ss_secure_link: null });

        adaEmbed.subscribeEvent('ada:end_conversation', (data) => {
            window.adaEmbed.setMetaFields({ ss_secure_link: null });
        });
    },

    toggleCallback: function(isDrawerOpen) {
        if (isDrawerOpen) {
            if (myDropzoneModal) {
                //Reset the existing modal
                myDropzoneModal.resetDropzone();
            } 
            else
            {
                //Create a new one
                myDropzoneModal = createDropzoneModal();
            }              
            myDropzoneModal.showUploadButton();
        } else {
            myDropzoneModal.hideUploadButton();
        }
    }
};

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 button should appear automatically at the bottom of the chat Ada window with the text "Attach File". The text and icon shown on the button can be customized using the optional buttonText and buttonIcon configuration parameters when initializing the modal. 

Pressing the button at any point during a conversation will trigger the modal to open.

After pressing submit, the modal will close and the link is rendered within the conversation using the logic from the onUploadComplete callback function. 

Responsive Rendering for Mobile Devices

By default, the Ada widget uses fixed positioning based on the dimensions of the screen when the widget first loads. For cases where the screen is small (such as a mobile device) the widget renders in full screen mode. To adjust the Upload Button to account for this behavior, we recommend adding logic to detect when the widget renders in full screen mode and adjust the button sizing accordingly. 

The watchForElement function included with the Dropzone Modal allows you to asynchronously monitor the DOM for a specific element and returns a reference to the element once found. Using this function, you can dynamically check the height of the Ada chat frame and adjust your button's dimensions accordingly. 

toggleCallback: function(isDrawerOpen) {
    if (isDrawerOpen) {
        if (myDropzoneModal) {
            //Reset the existing modal
            myDropzoneModal.resetDropzone();
            myDropzoneModal.showUploadButton();
        } else {
            //Wait for the iFrame to appear and then create a new modal 
            SendSafelyDropzoneModal.watchForElement('ada-chat-frame', function(node) {
                myDropzoneModal = createDropzoneModal();
                myDropzoneModal.showUploadButton();
                //Adjust dimensions if the iFrame is in full screen mode 
                if (node.style.height === "100%") {
                    var button = document.querySelector('.sendsafely-upload-btn');
                    button.style.width = "100%";
                    button.style.maxWidth = "100%";
                    button.style.bottom = "4px";
                    button.style.right = "0px";
                }
            });
        }
    } else {
        myDropzoneModal.hideUploadButton();
    }
}

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 Ada Handle, SendSafely Dropzone ID, and Ada Process ID. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ada 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>
    <style>
        #ada-chat-frame {
            bottom: 52px !important;
            z-index: 990 !important;
            border-radius: 16px 16px 0 0 !important;
            height: calc(100% - 52px) !important;
        }
    </style>
  </head>
  <body>
    <script id="__ada" data-handle="PUT_YOUR_ADA_HANDLE_HERE" src="https://static.ada.support/embed2.js"></script>

    <script type="text/javascript">
    
        let myDropzoneModal = null;
        function createDropzoneModal() {
            return new SendSafelyDropzoneModal({
                dropzoneId: 'PUT_YOUR_DROPZONE_ID_HERE',
                url: 'https://PUT_YOUR_SENDSAFELY_HOSTNAME_HERE',
                uploadButtonStyle: {
                    maxWidth: '375px',
                    height: '48px',
                    background: 'rgb(123, 82, 194)',
                    bottom: '8px',
                    right: '24px',
                    boxShadow: 'rgba(0, 0, 0, 0.12) 0px 12px 48px 4px',
                    borderRadius: '0 0 16px 16px',
                    color: '#ffffff',
                },
                onUploadComplete: (url) => {
                    window.adaEmbed.setMetaFields({ ss_secure_link: url }).then(() => {
                        setTimeout(() => {
                            window.adaEmbed.triggerAnswer('PUT_YOUR_ADA_PROCESS_ID_HERE');
                        }, 1000);
                    });                    
                },
                onUploadError: (errorType, errorMessage) => {
                    //This should generally never happen. 
                    alert('SendSafely upload failed: ' + (message || type) + ". Please notify the agent.");                    
                }
            });
        }

        window.adaSettings = {
            onAdaEmbedLoaded: () => {
                window.adaEmbed.setMetaFields({ ss_secure_link: null });

                adaEmbed.subscribeEvent('ada:end_conversation', (data) => {
                    window.adaEmbed.setMetaFields({ ss_secure_link: null });
                });

                adaEmbed.subscribeEvent('ada:close_chat', (data) => {
                    myDropzoneModal.hideUploadButton();
                });
            },

            toggleCallback: function (isDrawerOpen) {
                if (isDrawerOpen) {
                    if (myDropzoneModal)
                    {
                        //Reset the existing one
                        myDropzoneModal.resetDropzone();    
                        myDropzoneModal.showUploadButton();
                    }
                    else
                    {
                        //Wait for the iFrame to appear and then create a new one 
                        SendSafelyDropzoneModal.watchForElement('ada-chat-frame',function(node) {
                            myDropzoneModal = createDropzoneModal();
                            myDropzoneModal.showUploadButton();
                            if (node.style.height === "100%")
                            {
                                //Iframe is in full screen mode
                                var button = document.querySelector('.sendsafely-upload-btn');
                                button.style.width = "100%";
                                button.style.maxWidth = "100%";
                                button.style.bottom = "4px";
                                button.style.right = "0px";
                            }
                        });
                    }
                } else {
                    myDropzoneModal.hideUploadButton();
                }
            }
        };

    </script>
  </body>
</html>