How to use embedded signing from an LWC component

This tutorial shows an example on how to setup an LWC component that prepares a SIGN Request and forwards to a signing page.

Prerequities:

This is the Apex class

The Apex will create the PDF via PDF Butler and creates the SIGN Request, via SIGN Butler.
The code below has comments that will explain the setup.

                    
public class EmbeddedSign {

    @AuraEnabled
    public static String getUrl(String locale,String alternative,String recordId){
        System.debug('recordId: ' + recordId);
        
        //retrieve the DocConfig by the "View Customer DocConfig Id" field value.
        //  this field will have a unique identiefier for the DocConfig over all environments. So it is safe to use it in code.
        cadmus_core__Doc_Config__c dc = [SELECT Id FROM cadmus_core__Doc_Config__c 
                                        WHERE cadmus_core__View_Customer_DocConfig_Id__c = 'd506e037-a4f7-4db3-b3bf-0f38106291c4'];

        //Construct the ConvertDataModel. This holds the information to generate the PDF    
        cadmus_core.ConvertController.ConvertDataModel cdm = new cadmus_core.ConvertController.ConvertDataModel(); 
        cdm.docConfigId = dc.Id; 
        cdm.deliveryOverwrite = 'BASE64'; //I do not want to save the unsigned PDF to the record at this time.
        cdm.alternativeName = alternative;
        cdm.locale = locale;
        cdm.objectId = recordId; 
        
        //Call PDF Butler to generate the document
        cadmus_core.DocGenerationWrapper wrapper = cadmus_core.ConvertController.convertWithWrapper(cdm); 
        
        //Start prepping the information for generating the SIGN Request
        cadmus_sign2.SignButlerClientApi.SignRequestCLVo srInput = new cadmus_sign2.SignButlerClientApi.SignRequestCLVo(); 
        srInput.srTitle = 'Embedded launched SR'; //Choose your own 
        srInput.base64Pdf = EncodingUtil.base64Encode(wrapper.response.base64); 

        //retrieve the SIGN Request Template by the "Customer Template Id" field value.
        //  this field will have a unique identiefier over all environments. So it is safe to use it in code.
        cadmus_sign2__Sign_request_template__c srt = [SELECT Id FROM cadmus_sign2__Sign_request_template__c 
                                                        WHERE cadmus_sign2__Customer_Template_Id__c = '00D2p000000QL9s_a0P2p00000XgyEI'];

        srInput.srtId = srt.Id; 
        srInput.fileName = wrapper.response.metadata.targetName;
        srInput.recordId = recordId; 
        srInput.sendEmail = false; //Do you want to send out the first email? 
        
        //Add your own link here with parameters if required
        //   After the signing, the browser will redirect to this url. 
        //   This can be a confirmation page or the original record or ... you decide
        srInput.redirectUrl = 'https://pdfbutler-youtubetwo-dev-ed.my.site.com/dealers/s/detail/' + recordId; 
        
        //Get the url
        String url = cadmus_sign2.SignButlerClientApi.createAndLaunchSignRequest(srInput); 
        System.debug('url: ' + url);

        return url;
    }
}
                
                

The Lightning Web Component

LWC - HTML Template:

                
<template>

    <lightning-card title="Preparing your signing session...">
        <lightning-spinner if:true={spinner}></lightning-spinner>
        <lightning-button label="Start Signing" title="Start Signing" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    </lightning-card>

</template>
                
                

LWC - JavaScript:

                
import {api, LightningElement} from 'lwc';
import getUrl from "@salesforce/apex/EmbeddedSign.getUrl";

export default class BrowserRedirect extends NavigationMixin(LightningElement) {
    @api recordId;
    spinner = false;

    handleClick(){
        this.spinner = true;
        console.log('recordId: ' + this.recordId);

        //Call APEX to get the SIGN url
        getUrl({
            locale: 'en_US', alternative: 'default', recordId: this.recordId
        }).then(result => {
            window.location.replace(result);
            spinner = false;
        })
        .catch(error => {
            console.error('could not get URL',error);
        });
    }
}
                
                

LWC - MetaData:

                
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__FlowScreen</target>
		<target>lightning__RecordAction</target>
	</targets>

	<targetConfigs>
		<targetConfig targets="lightning__FlowScreen">
			<property name="recordId" type="String" label="Enter Record Id"/>
		</targetConfig>
	</targetConfigs>
</LightningComponentBundle>