​
Preact Integration

Our Preact SDK provides a simple way to embed a signing experience within your Preact application. It supports both direct link templates and signing tokens.

​
Installation

To install the SDK, run the following command:

npm install @documenso/embed-preact

​
Usage

To embed a signing experience, you’ll need to provide the token for the document you want to embed. This can be done in a few different ways, depending on your use case.

If you have a direct link template, you can simply provide the token for the template to the EmbedDirectTemplate component.

import { EmbedDirectTemplate } from '@documenso/embed-preact';

const MyEmbeddingComponent = () => {
  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token

  return <EmbedDirectTemplate token={token} />;
};

​
Props

PropTypeDescription
tokenstringThe token for the document you want to embed
hoststring (optional)The host to be used for the signing experience, relevant for self-hosters
namestring (optional)The name the signer that will be used by default for signing
lockNameboolean (optional)Whether or not the name field should be locked disallowing modifications
emailstring (optional)The email the signer that will be used by default for signing
lockEmailboolean (optional)Whether or not the email field should be locked disallowing modifications
externalIdstring (optional)The external ID to be used for the document that will be created upon completion
cssstring (optional)Custom CSS to style the embedded component (Platform Plan only)
cssVarsobject (optional)CSS variables for customizing colors, spacing, etc. (Platform Plan only)
darkModeDisabledboolean (optional)Disable dark mode functionality (Platform Plan only)
onDocumentReadyfunction (optional)A callback function that will be called when the document is loaded and ready to be signed
onDocumentCompletedfunction (optional)A callback function that will be called when the document has been completed
onDocumentErrorfunction (optional)A callback function that will be called when an error occurs with the document
onFieldSignedfunction (optional)A callback function that will be called when a field has been signed
onFieldUnsignedfunction (optional)A callback function that will be called when a field has been unsigned

​
Signing Token

If you have a signing token, you can provide it to the EmbedSignDocument component.

import { EmbedSignDocument } from '@documenso/embed-preact';

const MyEmbeddingComponent = () => {
  const token = 'YOUR_TOKEN_HERE'; // Replace with the actual token

  return <EmbedSignDocument token={token} />;
};

​
Props

PropTypeDescription
tokenstringThe token for the document you want to embed
hoststring (optional)The host to be used for the signing experience, relevant for self-hosters
namestring (optional)The name the signer that will be used by default for signing
lockNameboolean (optional)Whether or not the name field should be locked disallowing modifications
onDocumentReadyfunction (optional)A callback function that will be called when the document is loaded and ready to be signed
onDocumentCompletedfunction (optional)A callback function that will be called when the document has been completed
onDocumentErrorfunction (optional)A callback function that will be called when an error occurs with the document

​
Styling and Theming (Platform Plan)

Platform customers have access to advanced styling options:

import { EmbedDirectTemplate } from '@documenso/embed-preact';

const MyEmbeddingComponent = () => {
  const token = 'your-token';
  const customCss = `
    .documenso-embed {
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  `;
  const cssVars = {
    colorPrimary: '#0000FF',
    colorBackground: '#F5F5F5',
    borderRadius: '8px',
  };

  return (
    <EmbedDirectTemplate token={token} css={customCss} cssVars={cssVars} darkModeDisabled={true} />
  );
};