Embeddable Signing Widget

Add SigPen signing to any website or application

Iframe
Simple embed
Widget
JavaScript API
Custom
Full control

Configuration

The ID of the document to sign (from API or dashboard)

Preview

Iframe Embed

Simple iframe embedding - works on any website

<iframe 
  src="https://sigpen.com/embed/sign?width=100%25&height=600px&buttonText=Sign+with+SigPen&buttonColor=%23ea580c&backgroundColor=%23ffffff&documentId=&autoOpen=false&hideSignPenBranding=false" 
  width="100%" 
  height="600px"
  frameborder="0"
  allow="camera; microphone; clipboard-write"
  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
></iframe>

JavaScript Widget

Dynamic widget with JavaScript API for advanced control

<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://sigpen.com/embed/widget.js";
    js.onload = function() {
      SigPen.init({
        documentId: "",
        buttonText: "Sign with SigPen",
        buttonColor: "#ea580c",
        autoOpen: false,
        hideSignPenBranding: false
      });
    };
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'sigpen-widget'));
</script>

<div id="sigpen-button"></div>

Integration Guide

1. Get Document ID

Upload a document via API or dashboard to get the document ID

2. Embed Code

Copy the generated code and paste it into your website

3. Customize

Adjust colors, text, and behavior to match your brand

4. Test

Test the signing flow to ensure everything works correctly

Note: Embeddable widgets require a Business plan subscription.