If you deal with Contracts, I think the one app which you must have heard frequently is DocuSign. DocuSign is a popular app which facilitates Agreements in the form of electronic signatures from any device. With this, it saves a lot of time and cost by eliminating the need for sending and processing paperwork. This results in Up to 10x faster deal closures in some cases.
For Salesforce environment, DocuSign provides an Appexchange package:
This package makes life easier for Salesforce Administrators to implement the contract signing solution. After installation, it’s just about setting up login details (for DocuSign) and buttons using DocuSign Admin tab. As far as sending the document to email and getting it signed by customer, there is no pain. But, when it comes to making the DocuSign form (envelope) available as embedded part of the form and getting it signed on web its starts becoming tricky and needs some custom development.
In this article, I am going to explain all the process and tools necessary for implementing the embed signing features of Docusign (in Salesforce). We need developer account of DocuSign to start with. Similar to Salesforce Sandbox and Production, DocuSign also has two different kinds of environments. Dev (Similar to Sandbox) and Live (Production). The only difference being Salesforce Sandbox and Production are related but in DocuSign they are not.
To initiate this, create dev account using this link: https://secure.docusign.com/signup/developer
Once it gets created, we are good to start coding. To get the overall feel, we can follow cookbook recipe:
Above one explains all the steps needed in greater detail but has some extra information as well, as it teaches you how to integrate embed signing into an app. But if you want to get to the point right away, follow these:
– Create a remote site setting with URL as https://demo.docusign.net (This is for DocuSign Devaccount and would be changed when we move this into production as https://docusign.net).
– Create 3 classes using below WSDL:
– After above classes are in place, use this:
https://github.com/docusign/docusign-soap-sdk/tree/master/Salesforce/EmbedToDocusign to create a basic page and embedded DocuSign functionality and from there, change it based on your need.
– In class, you will see following parameters which you need to set for using DocuSign API:
envelopeId (Create a Template in DocuSign which you want to embed in form)
webServiceUrl (For DocuSign Dev: https://demo.docusign.net/api/3.0/dsapi.asmx and For DocuSign Production: https://docusign.net/api/3.0/dsapi.asmx)
Above four, you can get under API and keys section. accountId, userId and password must be already present. integratorsKey is something which you need to generate using Add integrator Key button.
TIP: Instead of hard coding these parameters value in code, we can keep these values in custom setting (or custom metadata Type) and use them in class.
Now, in both of these examples, you will see that Iframe has been used to embed the DocuSign envelope. Though it works well for Desktop and Tablet, it doesn’t work for Mobile devices (Android & Iphone). And it’s a known issue:
So now, if you are building a responsive web form with DocuSign embed signing and if it is expected to work on mobile devices as well, you need to tweak a bit in the referred code as follow:
– Identify you are on mobile using Jquery plugins or any other way you want to.
– If on a mobile, do not create iframe in dom. Instead, open a new window with the tokenURL which you get from DocuSign API. Once user signed, using parent-child window concept, get back to parent window from where its opened. This is the place where we have to be bit creative to give a seamless feel.
Now, once tested across all devices and browsers, this is the time to lift the curtains. Now before you plan to move the solution to DocuSign Production, you should be knowing, *You can’t create Integrator key in DocuSign production account.* There is a process for it, here is the link which can help:
In short, we need to log a case with DocuSign to migrate our integrator key from Developer account into Production one.
Once all set, we need to update the parameters in class (envelopeId, webServiceUrl, accountId, userId, password, integratorsKey) and see the output.
After doing all this and testing it multiple times with DocuSign developer account, you may get bummer *One or both of Username and Password are invalid.*
This is again a kind of known issue and could be there because of some setting in DocuSign production environment, these links can help to resolve:
I hope, after reading this and following it, your life won’t be as miserable as mine while implementing and getting roadblocks one after the other
Thanks and Happy Embed signing with DocuSign and Salesforce!
Contributed by: Hemant Shukla