SignlyPdf React Components

📙 Documentation | 💻 Examples | 🚀 Demo App

This package provides a convenient way to embed SignlyPdf into React apps. Sign documents and create document forms directly in your apps.

Embedded Signing Form

Embedded Form Builder

Installation

npm install @signlypdf/react

Documentation

For detailed documentation, please click here.

Usage

Signing Form

Copy public SignlyPdf form URL from https://signlypdf.com and use it in the src component prop:

import React from "react";
import { SignlyPdfForm } from "@signlypdf/react";

export function App() {
  return (
    <div className="app">
      <SignlyPdfForm
        src="https://signlypdf.com/d/LEVGR9rhZYf86M"
        email="signer@example.com"
      />
    </div>
  );
}

Form Builder

React Client Render

import React, { useEffect, useState } from "react";
import { SignlyPdfBuilder } from "@signlypdf/react";

export function App() {
  const [token, setToken] = useState();

  useEffect(() => {
    fetch("/api/signlypdf/builder_token", {
      method: "POST",
    }).then(async (resp) => {
      const data = await resp.json();

      setToken(data.token);
    });
  }, []);

  return (
    <div className="app">{token && <SignlyPdfBuilder token={token} />}</div>
  );
}

To protect the template builder from unathorized access a secure token (JWT) should be generated on the back-end:

const express = require("express");
const jwt = require("jsonwebtoken");

const app = express();

app.post("/api/signlypdf/builder_token", (req, res) => {
  const token = jwt.sign(
    {
      user_email: "your-signlypdf-user-email@company.com",
      integration_email: "customer@example.com", // replace with current user email
      name: "Integration W-9 Test Form",
      document_urls: ["https://www.irs.gov/pub/irs-pdf/fw9.pdf"],
    },
    process.env.SIGNLYPDF_TOKEN
  );

  res.json({ token });
});

app.listen(8080, () => {
  console.log(`Server is running`);
});

Obtain secret API token (SIGNLYPDF_TOKEN env variable) to sign JWT from https://console.signlypdf.com/api.

Find Express.js example project here.

Next.js SSR

import jwt from "jsonwebtoken";
import { SignlyPdfBuilder } from "@signlypdf/react";

export default function Home() {
  const token = jwt.sign(
    {
      user_email: process.env.SIGNLYPDF_USER_EMAIL,
      integration_email: "test@example.com",
      name: "Integration W-9 Test Form",
      document_urls: ["https://www.irs.gov/pub/irs-pdf/fw9.pdf"],
    },
    process.env.SIGNLYPDF_TOKEN
  );

  return (
    <div>
      <h1>SignlyPdf Builder</h1>
      <SignlyPdfBuilder token={token} />
    </div>
  );
}

Find Next.js example project here.

License

MIT

signlypdf-react