Skip to main content
Web Integration
Learn how to integrate the IgniSign signature interface into your web applications

Overview​

The web integration approach allows you to integrate IgniSign into your web applications using iframes for embedded integration or redirects for BySide integration. This page provides detailed implementation instructions for both methods.

Embedded Integration with iframe​

The embedded integration approach integrates the IgniSign signing interface directly into your application using an iframe, providing a seamless user experience.

Implementation Steps
1
Backend Creates Signature Request
Your backend uses the API to create a signature request and get the signature session token
2
Backend Provides Details to Frontend
Your backend provides the signature request ID, signer ID, session token, and signer auth secret to your frontend
3
Frontend Embeds Signature Interface
Your frontend adds an iframe that loads the signature interface with the required parameters
4
Set Up Communication
Implement event listeners to handle messages from the iframe
Flow
Basic Implementation

Here's a basic implementation of embedded signature using an iframe:

<!-- Container for the signature iframe -->
<div id="signature-container" style="width: 100%; height: 700px;">
<iframe 
  id="signature-iframe"
  src="https://client-sign.ignisign.io/signature-requests/{signatureRequestId}/signers/{signerId}/sign?token={signatureSessionToken}&signerSecret={signerAuthSecret}"
  style="width: 100%; height: 100%; border: none;"
  allowfullscreen
></iframe>
</div>
Using the JavaScript SDK

For a more convenient integration, you can use our JavaScript SDK:

<!-- Include the IgniSign JavaScript SDK -->
<script src="https://cdn.ignisign.io/ignisign-js/v2/ignisign.min.js"></script>

<!-- Container for the signature interface -->
<div id="signature-container" style="width: 100%; height: 700px;"></div>
Security Considerations

When implementing embedded signature, consider these security aspects:

  • Always verify the origin of messages from the iframe
  • Use HTTPS for all communications
  • Implement proper token handling and validation
  • Set appropriate Content Security Policy (CSP) headers

BySide Integration with Email Delivery​

The BySide integration approach relies on IgniSign sending an email with a signature link directly to the signer, who then completes the process on the IgniSign platform.

Implementation Steps
1
Backend Creates Signature Request
Your backend uses the API to create a signature request with the signer's email address
2
IgniSign Emails the Signer
IgniSign automatically sends an email with the signature link to the signer
3
Signer Completes Process on IgniSign
The signer clicks the link and completes the signature on the IgniSign platform
4
Configure Webhooks (Optional)
Set up webhooks to receive real-time notifications about signature status
Flow
Basic Implementation

Here's a basic implementation of BySide signature, focusing on creating the signature request:

// Server-side code to create a signature request
const { IgnisignSdk } = require('@ignisign/ignisign-sdk');

// Initialize the SDK
const ignisign = new IgnisignSdk({
appId: 'YOUR_APP_ID',
appEnv: 'DEVELOPMENT', // or 'STAGING', 'PRODUCTION'
appSecret: 'YOUR_APP_SECRET'
});
await ignisign.init();

// Create a signature request with a return URL
const createSignatureRequest = async () => {
try {
  // Create a signer (or use an existing one)
  const signerResponse = await ignisign.createSigner({
    email: '[email protected]',
    firstName: 'John',
    lastName: 'Doe'
  });
  
  // Create a signature request
  const signatureRequest = await ignisign.createSignatureRequest({
    title: 'Contract Signature',
    documents: [
      {
        documentId: 'YOUR_DOCUMENT_ID'
      }
    ],
    signers: [
      {
        signerId: signerResponse.signerId,
        role: 'SIGNER'
      }
    ],
    options: {
      redirectUrl: 'https://your-app.com/signature-complete',
      // The signer will be redirected to this URL after signing
    }
  });
  
  console.log('Signature request created. An email has been sent to the signer.');
  return signatureRequest;
} catch (error) {
  console.error('Error creating signature request:', error);
  throw error;
}
};
Using the JavaScript SDK for BySide Integration

You can also use our JavaScript SDK for BySide integration:

<!-- Include the IgniSign JavaScript SDK -->
<script src="https://cdn.ignisign.io/ignisign-js/v2/ignisign.min.js"></script>

<!-- Button to trigger signature -->
<button id="sign-button">Sign Document</button>

Advanced Customization​

The IgniSign signature interface offers several customization options for web integration:

Query Parameters

You can customize the signature interface by adding query parameters to the URL:

ParameterDescriptionExample
hideTitleHides the title barhideTitle=true
darkModeEnables dark modedarkMode=true
returnUrlURL to redirect to after completionreturnUrl=https://example.com/complete
langInterface languagelang=fr

Example URL with customizations:

https://client-sign.ignisign.io/signature-requests/{signatureRequestId}/signers/{signerId}/sign?hideTitle=true&darkMode=true&lang=fr&returnUrl=https://your-app.com/complete
Responsive Design Considerations

When embedding the signature interface in an iframe, consider these responsive design tips:

  • Dynamic Height: Allow the iframe to adjust its height based on content
  • Mobile Optimization: Test your integration on various screen sizes
  • Minimum Width: Ensure the container is at least 320px wide for mobile devices
  • Safe Height: Use a minimum height of 500px for the container

Framework Integration Examples​

React Integration
import React, { useEffect, useRef } from 'react';

function SignatureComponent({ signatureRequestId, signerId, signatureSessionToken, signerAuthSecret }) {
const containerRef = useRef(null);

useEffect(() => {
  // Load the IgniSign SDK
  const script = document.createElement('script');
  script.src = 'https://cdn.ignisign.io/ignisign-js/v2/ignisign.min.js';
  script.async = true;
  script.onload = () => {
    // Initialize IgniSign client
    const ignisign = new window.Ignisign.Client({
      container: containerRef.current,
      onComplete: (data) => {
        console.log('Signature completed successfully', data);
        // Handle successful signature
      },
      onError: (error) => {
        console.error('Error during signature process', error);
        // Handle error
      },
      onCancel: (data) => {
        console.log('Signature was canceled', data);
        // Handle cancellation
      }
    });
    
    // Load the signature interface
    ignisign.loadSignature({
      signatureRequestId,
      signerId,
      signatureSessionToken,
      signerAuthSecret
    });
  };
  document.body.appendChild(script);
  
  return () => {
    // Clean up
    document.body.removeChild(script);
  };
}, [signatureRequestId, signerId, signatureSessionToken, signerAuthSecret]);

return (
  <div className="signature-container" ref={containerRef} style={{ width: '100%', height: '700px' }}></div>
);
}

export default SignatureComponent;

Common Issues and Solutions​

IssueSolution
X-Frame-Options blocking iframeEnsure you're using the correct domain for embedding. The IgniSign signature interface is served from client-sign.ignisign.io which allows embedding.
Event messages not being receivedMake sure you're listening for messages correctly and verifying the origin. Check browser console for any errors.
Iframe not resizing properlyUse a container with appropriate CSS to ensure the iframe can resize properly. Consider using max-width and max-height with percentage values.
Return URL not workingMake sure your return URL is properly URL-encoded and includes the http:// or https:// prefix.

Next Steps​

Now that you understand how to integrate the IgniSign signature interface into your web applications, you might want to explore: