Marketo - Dropzone Integration Guide

Follow

This article provides step by step instructions on how to get the SendSafely Dropzone widget installed in your Marketo Form, as well as some common issues and fixes.

How the Integration Works

When the SendSafely Dropzone Widget is integrated with a Marketo form, files that are attached get encrypted and uploaded directly to SendSafely. The files are not exposed to Marketo or the web server that hosts the Marketo form. When the form gets submitted, the SendSafely widget automatically populates a hidden field on the form with a direct link to the uploaded files in SendSafely. 

 

 marketo_how_it_works.png

 

The hidden field gets stored in a filed you define within your Marketo lead database, so that the link to the uploaded files is stored alongside the other data elements that your customer provides. The SendSafely link requires authentication, so only authorized users will be able to access the uploaded files.

marketo_record_with_link.png

Now that you understand the basics of how the integration works, lets get started with the implementation steps. 

 

Step 1 – Define a Custom Lead Database Field

The first step you’ll need to perform is to define a custom field to use within your Marketo lead database for storing the link to uploaded files. If you prefer, you can use any existing Marketo lead field as long as the data type is text. In the example below, we create an new field called SendSafelyLink.

marketo_define_custom_field.png

NOTE: By default, when you type the “Name” value the “API Name” will also automatically get populated. If your Name starts with a capital letter, the API Name will not (note the lower case  “s” at the beginning of sendSafelyLink below).

 

Step 2 – Add a Hidden Input to your Marketo Form

Next, you’ll need to add a hidden input on your Marketo form that can be used to populate the custom field you defined in Step 1.  Make sure that the “Form Pre-fill” option under the Behavior settings is set to “Disabled”.

marketo_add_hidden_field.png

 

Step 3: Obtain your SendSafely Dropzone ID

A Dropzone ID can be obtained from the Edit Profile screen while logged in to your SendSafely account. This screen is accessible from the Account menu in the top right corner of the screen. On the Edit Profile screen, you should see the Dropzone option on the left-hand side of the page. Once selected, your Dropzone configuration options will be shown. By default, the Dropzone is OFF so you will need to set the switch to ON to reveal your Dropzone ID, which is displayed in a yellow box once the Dropzone is enabled.

Dropzone_Configuration_Interface.png

Step 4: Configure Dropzone Options

Once the Dropzone is enabled, you can authorize other team members to view and download the secure files uploaded via SendSafely. The Dropzone owner must add each additional team member as a Dropzone recipient using the "Add Recipient" button as shown below. Also note the adjustable expiration setting, which is set to 90 days in the example below. That is the number of days after which files will get automatically deleted. 

Dropzone_Add_Recipients.png

 

Step 5 – Integrate the Widget into your Landing Page

The last step is to integrate the SendSafely Widget into your Marketo Landing Page. The steps for integrating the widget vary depending on whether you are using a hosted Marketo landing page, or using the Marketo Forms API to host the landing page on your own website. Steps for each are included below. 

Option #1: Integrate using the Marketo Forms JavaScript API

For this example we will assume you are starting with a bare-bones Marketo Form implementation that follows the same pattern as the examples on the Marketo Developers Site.  The initial code for the form without our integration is below.

<html>
 <body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
   <form id="mktoForm_1057"></form>

   <script>
   //Load the Marketo form using its form id
   MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057, function(form){

  });
   </script>
 </body>
</html>

Now we will look at the same implementation that has a SendSafely widget integrated into the form. Note that since Marketo forms are rendered dynamically with JavaScript, the widget is implemented programmatically using JavaScript that gets inserted within the MktoForms2.loadForm function. Note that you will need to edit the values assigned to ssInputName and ssDropzoneId in order to get the code working:

  • ssDropzone ID is your Dropzone Id, which can be found on the SendSafely Edit Profile page (from Step 3)
  • ssInputName is the “API Name” for the custom Marketo field defined in Step 1.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://app.sendsafely.com/js/external/SendSafelyDropzone.min.js"></script>

<script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1057"></form>

<script>
//Load the Marketo form using its form id
MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057, function(form){

// Populate the ssInputName and ssDropzoneId below
// ssInputName -> The name of the Hidden Field defined in your Marketo form for the SendSafely Link to be populated
// ssDropzoneId -> Your SendSafely Dropzone ID (obtained from the SendSafely "Edit Profile" screen)

var ssInputName = "sendSafelyLink";
var ssDropzoneId = "xxxxxxxxxxxxxxx";

//Add the SendSafely dropzone placeholder above the Marketo submit button
form.getFormElem().find(".mktoButtonRow").before("<div id='dropzone-placeholder-div'></div><br>");

//Initialize the SendSafely Dropzone using a Dropzone ID and the placeholder element
//Also set the disableAutoSubmit property to TRUE so we can submit using the Marketo events instead
var widget = new SendSafelyDropzone(ssDropzoneId, $('#dropzone-placeholder-div'));
widget.disableAutoSubmit = true;
widget.initialize();

//Add an onValidate handler to detect when the user presses submit
form.onValidate(function(success){
//Make sure the Marketo validation succeeds, otherwise do nothing
if (success)
{
//Disable the submit button while the SendSafely API is called to get a secure link
$(".mktoButton").attr('disabled','disabled').html("Please Wait");

//If the hidden link field is empty, we need to call finalizePackage to get the link
if($('input[name=' + ssInputName + ']').val() === "")
{
//Set the Marketo Form submittable property to FALSE to prevent it from being submitted
//until we populate the link (we will re-submit programmatically once finished)

//Make sure at least one file was uploaded, otherwise display an alert to the user
if(widget.nbrOfFilesAttached > 0)
{
form.submittable(false);
//Call FinalizePackage to get the secure link
widget.finalizePackage(function (url) {

//This is the success callback for finalizePackage
//Populate the hidden input using the url that is returned
$('input[name=' + ssInputName + ']').val(url);

//Change the submittable property to TRUE and submit programmatically
form.submittable(true);
form.submit();
},
function() {
//This is the error callback for finalizePackage
//The Dropzone will display the appropriate error to the user
$(".mktoButton").removeAttr('disabled').html("Submit");
});
}
else
{
//Comment out the next 2 lines if you don’t want to require a file upload
form.submittable(false);
alert("You must attach at least one file.");
$(".mktoButton").removeAttr('disabled').html("Submit");
}
}
}
else
{
$(".mktoButton").removeAttr('disabled').html("Submit");
}
});
});
</script>
</body>
</html>

 

Option #2: Integration using Marketo Hosted Landing Page (free-form)

The SendSafely widget can be integrated into a hosted Marketo free-form landing page by inserting an HTML element within the landing page that includes some custom Javascript code. The screenshot below shows how to add an HTML element to your free-form Marketo landing page using the Landing Page Editor.

marketo_free_form_screen_1.png

Once the HTML element has been added, use the “Edit” option (right click) to add the necessary custom JavaScript code as shown below.

marketo_free_form_screen_2.png

The full JavaScript code is included below. Note that you will need to edit the values assigned to ssInputName and ssDropzoneId in order to get the code working:

  • ssDropzone ID is your Dropzone Id, which can be found on the SendSafely Edit Profile page (from Step 3)
  • ssInputName is the “API Name” for the custom Marketo field defined in Step 1.

 

<script>
MktoForms2.whenReady(function (form) {
// Populate the ssInputName and ssPublicApiKey below
// ssInputName -> The name of the Hidden Field defined in your Marketo form for the SendSafely Link to be populated
//ssDropzoneId -> Your SendSafely Dropzone ID (obtained from the SendSafely "Edit Profile" screen)

var ssInputName = "sendSafelyLink";
var ssDropzoneId = "XXXXXXXXXXXXXX";

//Only continue if we find ssInputName on the form
if(form.getFormElem().find('input[name=' + ssInputName + ']').length)
{
form.submittable(false);
form.getFormElem().find(".mktoButtonRow").before("<div class=\"mktoFormRow\"><div id=\"dropzone-placeholder-div\"></div></div><br>");
//Initialize the SendSafely Dropzone using a Dropzone ID and the placeholder element

//Also set the disableAutoSubmit property to TRUE so we can submit using the Marketo events instead

var widget = new SendSafelyDropzone(ssDropzoneId, form.getFormElem().find('#dropzone-placeholder-div'));
widget.disableAutoSubmit = true;
widget.BACKGROUND_COLOR = "#FFFFFF";
widget.initialize();

//Hook into the click event on the form submit button
form.getFormElem().find(".mktoButton").click( function(e) {
 
//Make sure the form data is valid
var isValid = form.validate();
if (isValid)
{
//Disable the submit button while the SendSafely API is called to get a secure link
form.getFormElem().find(".mktoButton").attr('disabled','disabled').html("Please Wait");

//If the hidden link field is empty, we need to call finalizePackage to get the link
if(form.getFormElem().find('input[name=' + ssInputName + ']').val() === "")
{
//Make sure at least one file was uploaded, otherwise display an alertto the user
if(widget.nbrOfFilesAttached > 0)
{
//Call FinalizePackage to get the secure link
widget.finalizePackage(function (url) {
//This is the success callback for finalizePackage
//Populate the hidden input using the url that is returned
form.getFormElem().find('input[name=' + ssInputName + ']').val(url);
//Change the submittable property to TRUE and submit programmatically
form.submittable(true);
form.submit();
},
function() {
//This is the error callback for finalizePackage
//The Dropzone will display the appropriate error to the user
form.getFormElem().find(".mktoButton").removeAttr('disabled').html("Submit");
});
}
else
{
alert("You must attach at least one file.");
form.getFormElem().find(".mktoButton").removeAttr('disabled').html("Submit");
}
}
else
{
form.submittable(true);
form.submit();
}
}
});
}
});
</script>

 

Optional Code Modifications

Now that you have implemented the integration, you can optionally include the following code modifications.

 

Modification #1 - Allow the Form to be Submitted Without a File

The below code modification allows users to submit the form without the requirement of uploading a file. Identify the following block of code in the HTML source of the form, and comment out the 2 lines as shown below.

Code Change for Forms API Example

 //Comment out the next 2 lines if you don’t want to require a file upload 
//form.submittable(false);
//alert("You must attach at least one file.");
$(".mktoButton").removeAttr('disabled').html("Submit");

 

Code Change for Free Form Landing Page Example

Remove the following two lines:

alert("You must attach at least one file.");
form.getFormElem().find(".mktoButton").removeAttr('disabled').html("Submit");

and replace them with this:

form.submittable(true);
form.submit();

 

Modification #2 - Passing the Email Address of the Submitter to SendSafely

The SendSafely widget allows you to optionally capture the email address of the user that is submitting the form, assuming that one of the form fields on your form is capturing this information. Once you identify the name of the field used to capture the user’s email address (“Email” by default) you can pass this value to the SendSafely widget immediately BEFORE the line that invokes the finalizePackage function as shown below.

widget.setUnconfirmedSender($('#Email').val()).
widget.finalizePackage()…

 

Common Issues and Fixes

Below is a listing of common issues experienced when integrating the Dropzone Widget with Marketo forms, and how to fix them. 

 

ISSUE: Where do I find my Dropzone ID?

FIX: Your SendSafely Dropzone ID is displayed on the Dropzone page, under the Edit Profile menu on the SendSafely web portal. Please note the Dropzone ID is the string of characters displayed in clear text, and is NOT the Validation key, which is secret and should be treated like a password. 

 

ISSUE: Do all smart campaigns referencing a form work exactly the same as before with this added code?

FIX: Yes, your Marketo forms should work exactly the same way as before the code was added. The only thing to be aware of is the example alerts the user if a file was not attached and the form will not be submitted. If attaching a file is optional, you'll want to modify the example as shown in Optional Code Modifications  - Allowing the Form to be Submitted Without a File

 

ISSUE: The Dropzone Widget is being displayed, but the SendSafely secure link isn’t being generated or populating the hidden field

FIX: The form may be missing the hidden form field, or the form field name is incorrect. Double check the instructions in Step 2 and also check to make sure that the “API Name” value from Step 1 is properly specified in your custom JavaScript.

 

ISSUE: A user submits the form for first time with an attached a file, which populates the “hiddenField” with a SendSafely link. The second time the same user submits the form they do not attach a file, but the “hiddenField” is still populated with the initial link. Is there a way to set the “hiddenField” back to empty if upon the most recent form submission, they did not attach a file?

FIX: Make sure that the “Form Pre-fill” option for your hidden field is set to “Disabled” This option can be specified from the Behavior settings section of the form editor when the hidden field is highlighted (Refer to Step 2). 

 

ISSUE: Previously submitted files(SendSafely secure links) are re-submitted.

This occurs when the person who filled out the form is a repeat visitor, and depending on how the form is configured there may be a Marketo cookie that remembers the previously submitted form fields and re-populates them.

FIX: Make sure that the “Form Pre-fill” option for your hidden field is set to “Disabled” This option can be specified from the Behavior settings section of the form editor when the hidden field is highlighted (Refer to Step 2). 

 

ISSUE: Team members (with SendSafely accounts) are unable to access SendSafely items uploaded via Marketo.  When they click on the secure link and enter their email address they receive the message “The email address you entered is not allowed to access this item. Check with the person  who sent you this link to confirm you are a valid recipient”

FIX: The Dropzone owner must add each team member as a Dropzone recipient. The Dropzone owner is the account associated with the Dropzone ID used to initialize the Dropzone Widget in the Marketo Form. Dropzone recipients are added on the Dropzone page under the Edit Profile menu in the SendSafely webportal. The Dropzone owner should enter each team member’s email address into the text box and then press the "Add a Recipient" button.

 

Have more questions? Submit a request






Powered by Zendesk