Building a signature capture widget with an Appsmith Iframe and SignaturePad.js
Tags: javascript, tutorial, lowcode, webdev
Published: 2023-12-14 15:22:28

Goal
----

*   Build a signature capture widget using custom code in an Appsmith Iframe widget srcDoc field
    
*   Capture signatures as images, then access the image outside of the iframe
    

Prerequisites
-------------

*   **An Appsmith Account**
    
*   **A new or existing app** - where you want to add the signature capture widget
    

Overview
--------

The iframe widget is like an escape hatch that leaves the low-code environment of Appsmith and allows you to write full web apps using any framework of your choice. If there's something you can't do with one of our 45+ widgets, you can probably do it in an iframe. 

For instance, although we don't have a native signature capture widget ([yet](https://github.com/appsmithorg/appsmith/issues/7960)), you can easily build one with just a few lines of JavaScript, and the signaturePad.js library. 
## Add an Iframe Widget
Add an iframe where you want the signature capture, and paste the following code in the srcDoc field:
    
```html
<canvas id="signature-pad" width="auto" height="auto"></canvas>
<button id="clear">Clear</button>
<button id="save">Save</button>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
  var canvas = document.getElementById("signature-pad");
  var signaturePad = new SignaturePad(canvas, {backgroundColor: 'rgb(250,250,250)'});
  document.getElementById("clear").addEventListener('click', function () {
    signaturePad.clear();
  });
  document.getElementById("save").addEventListener('click', function () {
    var dataURL = signaturePad.toDataURL();
    window.parent.postMessage({
      type: 'signature',
      data: dataURL
    }, '*');
  });
</script>
```

Note the event listener on the **SAVE** button that posts a message to the parent window.  
## Access the Signature Image    
Once the **SAVE** button is clicked, the image will be accessible at `Iframe1.message.data`. You can view it in a regular Image widget, or view the raw data in a Text widget. 
 
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07fgd31gm3xh728pegnv.png)   
## Trigger an Event when saving
You may want to save the image back to a database, or send it in an email after signing. The Iframe widget has an [onMessageReceived](https://docs.appsmith.com/reference/widgets/iframe#events) property, where you can select which Actions to run when a message is posted from the iframe. The Action selector also allows you to add callback functions, so you can chain together Actions, and do things like saving the image to Amazon S3, then saving the new URL back to a record in MySQL.  
    

Conclusion
----------

The Iframe widget can easily be used to create custom widgets, and new interfaces to capture and display data. By adding just a few lines of code, a Signature Capture widget can be built and integrated with the rest of your app. 

Additional Resources
--------------------

*   [cdn.jsdelivr.net/npm/signature\_pad@4.0.0](https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js)
    
*   [Iframe Docs](https://docs.appsmith.com/reference/widgets/iframe#docusaurus_skipToContent_fallback)
    
*   [Iframe Experiments: Extending Appsmith with custom iframe code](https://community.appsmith.com/content/guide/iframe-experiments-extending-appsmith-custom-iframe-code)