Our Community is in read-only mode until April 8th, learn more here. You can still search existing threads or get help via Dropbox Support, the Dropbox Help Center, or Learn.
Forum Discussion
rostyslavpopov
1 year agoExplorer | Level 4
Missing parameter: client_id for lwc
Im working on a lwc where id like to embed a signing process in iframe, I was able to successfully retrieve sign URL, but when I try to use it on iframe I got following error, at which step do I need to set my client id?
So far I used this with client id in request body
String apiUrl = 'https://api.hellosign.com/v3/signature_request/create_embedded_with_template';
and
request.setEndpoint('https://api.hellosign.com/v3/embedded/sign_url/' + signatureId);
with just signature id in request body
Also I have a problem setting body for my request, I used this class to generate json string, but when I use this approach I get error({"error":{"error_msg":"No template_id or template_ids specified","error_path":"template_id","error_name":"bad_request"}})
HelloSignJSON.Signing_options so = new HelloSignJSON.Signing_options();
so.default_type = 'draw';
so.draw = true;
so.phone = true;
so.type = true;
so.upload = true;
HelloSignJSON.Signers signer = new HelloSignJSON.Signers();
signer.role = 'Lead.Customer';
signer.name = 'Rostyslav';
signer.email_address = 'popov.rst@gmail.com';
List<HelloSignJSON.Signers> signers = new List<HelloSignJSON.Signers>{signer};
HelloSignJSON hsj = new HelloSignJSON();
hsj.template_ids = new List<String>{'90c43afee504f24a2dcd67ab7991f8f3f5900ef3'};
hsj.client_id = 'CLIENT_ID';
hsj.subject = 'Embedded Subject';
hsj.message = 'Embedded message';
hsj.signing_options = so;
hsj.test_mode = true;
hsj.signers = signers;
String requestBody = JSON.serialize(hsj);
17 Replies
Replies have been turned off for this discussion
- rostyslavpopov1 year agoExplorer | Level 4
iframe didnt work for me, because when you open this in frame, you cant check for events like sign, close etc and you cant close a modal or smth when user signs, it n seeds to be a separate button but native close button is still present and this confuses user
- eappsiadvancenow1231 year agoNew member | Level 1
rostyslavpopovI'm able to figure out why it was not opening the embedded signature. because in my Import alias, i have given "HelloSign" name and there is same class being called so it might be creating confusion for the system.
I wrote:
import HelloSign from '@salesforce/resourceUrl/DropBoxSign';
and then i was initiating like:
const client = new HelloSign({ clientId: this.clientId, });
Once again, thank you very much for your help in this. You're truly generous. I can't thank enough for helping me out in this.
- eappsiadvancenow1231 year agoNew member | Level 1
I think in my code, the line of code which is creating the problem is this:
const client = new HelloSign({ clientId: this.clientId, });
When I'm checking in the console, it gives me an error: d.default is not a constructor.
I think its not understanding when I'm creating the instance of HelloSign class.
rostyslavpopovIn your code, you are also assigning iframeURL, are you trying with iframe as well? If yes, does that work for you?
- rostyslavpopov1 year agoExplorer | Level 4
submitApplication() { const client = new HelloSign({ clientId: this.clientId, }); // Logic for submitting the application // console.log('submit'); if(this.hasError == false){ generateEmbeddedSignUrl({recordId: this.recordId, leadJson: this.getLeadData()}) .then(result => { // console.log('result: ' + result); this.iframeUrl = result; client.open(result, { skipDomainVerification: true }) }) .catch(error => { console.log('error: ' + JSON.stringify(error)); }) client.on('sign', (data) =>{ // console.log('signed!'); this.signed = true; this.sendDataToEverflow('4') }) client.on('close', () => { // console.log('closed'); if(this.signed == true){ let event = new CustomEvent('leadsigned', {detail: this.recordId}) this.dispatchEvent(event); updateSigned({recordId: this.recordId}) } }) } }i see that in this example you used 'this.signUrl' for client.open() but in new HelloSign() you used a text, and not a variable with clientId value, if its just a sample code and in actual code that is replaced with client id value then Im not sure whats wrong, I can share my piece that's called when a button is pressed:
if this doesn't help id advise you opening an another thread and ask a dropbox developer to help with their library usage! - eappsiadvancenow1231 year agoNew member | Level 1
Thank you very much for your swift responses!
I'm not sure what I'm doing wrong in the above mentioned steps but the embedded window is not opening. Here is the steps i followed:
- I went to this site(attached screenshot) and copied the content and saved it as JS file.
- Uploaded this file as Public static resource(the only file)
- Imported this file into LWC by
import HelloSign from '@salesforce/resourceUrl/DropBoxSign';
- Loaded this static resource in connected callback
Promise.all([
loadScript(this, HelloSign)
]).then(() => {
console.log('JS and Style Resources loaded successfully');
}).catch((error)=>{
console.log('Error occurred while loading JS resources'+ error);
I have a button "E-sign" on the site, when clicking on that button, I'm calling a function and this is function body:
createEmbeddedSignatureRequest is apex method which will return sign url.createEmbeddedSignatureRequest({leadId: this.leadId}).then(result=>{
this.signUrl = result;
console.log('Success createEmbeddedSignatureRequest:'+ this.signUrl);
}).catch(error=>{
console.log('Error occurred in createEmbeddedSignature'+ JSON.stringify(error));
})
setTimeout(()=>{
try{
const client = new HelloSign({ clientId: 'myClientId' });
client.open(this.signUrl, { skipDomainVerification: true });
}
catch(e){
console.log('Error occurred while opening embedded:'+ JSON.stringify(e));
}
},5000);
rostyslavpopovDo you see any missing item here? Thank you soooooooo much for helping me in this.
- rostyslavpopov1 year agoExplorer | Level 4
okay so for this you need to do the js lib part.
Go to https://www.jsdelivr.com/package/npm/hellosign-embedded , there will be an URL in source, go to that URL, copy its content and create a JS file. Upload this file(one file only, no folders) as public Static resource with a name DropboxSign. Then import and load it in your JS file:import dropboxSign from '@salesforce/resourceUrl/DropboxSign'; loadScript(this, dropboxSign) .then(() => { // console.log('dropbox sign loaded'); }) .catch(error => { console.error('Error loading dropbox sign:' , error) })Loading can be put into connected callback. Then when its time for a sign you need to do a following:
const client = new HelloSign({ clientId: this.clientId, }); client.open(result, { skipDomainVerification: true }) - eappsiadvancenow1231 year agoNew member | Level 1
I have created a site in salesforce and i want to open embedded signature window on my site. I tried to import JS file available on github in my LWC component but that doesn't work so I'm trying to use iframe and under the iframe, my URL is (sign URL + client_id + skip_domain_verification=1) but its not working.
It gives me invalid URL when i open in iframe but same URL works in incognito window or any other window.
Your help is very much appreciated!
- rostyslavpopov1 year agoExplorer | Level 4
can you provide more details on what are you trying to achieve please?
- eappsiadvancenow1231 year agoNew member | Level 1
rostyslavpopovThank you so much for your help here! I was able to get the sign url successfully.
Probably one last question, how are you opening embedded window on your site? When I'm trying to open it in incognito window by appending client_id in url, it gives me this error(attached screenshot).
I have provided "my.salesforce-sites.com" under Domain in my App.
Your help in this is very much appreciated!
- rostyslavpopov1 year agoExplorer | Level 4
ur not passing the email template
if your endpoint is:String apiUrl = 'https://api.hellosign.com/v3/signature_request/create_embedded_with_template';Then you should paste your template id which you can get on hellosign.
I wasn't able to use an apex class that I can later serialize and use as request body, It would throw same error as you shown for me, not sure why because template id was in there, here's what i used:String requestBody = 'client_id=' + EncodingUtil.urlEncode(clientId, 'UTF-8') + '&template_ids[]=' + EncodingUtil.urlEncode(templateId, 'UTF-8') + '&subject=' + EncodingUtil.urlEncode('Purchase Order', 'UTF-8') + '&message=' + EncodingUtil.urlEncode('Glad we could come to an agreement.', 'UTF-8') + '&signers[0][role]=' + EncodingUtil.urlEncode('Lead.Customer', 'UTF-8') + '&signers[0][name]=' + EncodingUtil.urlEncode(Lead.Name, 'UTF-8') + '&signers[0][email_address]=' + EncodingUtil.urlEncode(email, 'UTF-8');This is annoying to add new fields into, as it would be in form of:
if (!String.isEmpty(lead.Email)) { requestBody += '&custom_fields[0][name]=Lead.Email&custom_fields[0][value]=' + EncodingUtil.urlEncode(lead.Email, 'UTF-8'); } if (!String.isEmpty(lead.Company)) { requestBody += '&custom_fields[1][name]=Lead.Company&custom_fields[1][value]=' + EncodingUtil.urlEncode(lead.Company, 'UTF-8'); }etc, but i believe you can try to use another class for your custom fields and then add its serialized part to the body from previous sample, i think it would be a more convenient approach although i didn't try it.
Are you implementing this for apex lwc? If so you can reach out to me through email and ill be able to provide answers with more details!
About Dropbox Sign API
The Dropbox Community team is active from Monday to Friday. We try to respond to you as soon as we can, usually within 2 hours.
If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X, Facebook or Instagram.
For more info on available support options for your Dropbox plan, see this article.
If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!