Solid.js Integration

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

Installation

To install the SDK, run the following command:

npm install @documenso/embed-solid

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.

Direct Link Template

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-solid';

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

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

Props

Prop	Type	Description
token	string	The token for the document you want to embed
host	string (optional)	The host to be used for the signing experience, relevant for self-hosters
name	string (optional)	The name the signer that will be used by default for signing
lockName	boolean (optional)	Whether or not the name field should be locked disallowing modifications
email	string (optional)	The email the signer that will be used by default for signing
lockEmail	boolean (optional)	Whether or not the email field should be locked disallowing modifications
externalId	string (optional)	The external ID to be used for the document that will be created upon completion
css	string (optional)	Custom CSS to style the embedded component (Platform Plan only)
cssVars	object (optional)	CSS variables for customizing colors, spacing, etc. (Platform Plan only)
darkModeDisabled	boolean (optional)	Disable dark mode functionality (Platform Plan only)
onDocumentReady	function (optional)	A callback function that will be called when the document is loaded and ready to be signed
onDocumentCompleted	function (optional)	A callback function that will be called when the document has been completed
onDocumentError	function (optional)	A callback function that will be called when an error occurs with the document
onFieldSigned	function (optional)	A callback function that will be called when a field has been signed
onFieldUnsigned	function (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-solid';

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

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

Props

Prop	Type	Description
token	string	The token for the document you want to embed
host	string (optional)	The host to be used for the signing experience, relevant for self-hosters
name	string (optional)	The name the signer that will be used by default for signing
lockName	boolean (optional)	Whether or not the name field should be locked disallowing modifications
onDocumentReady	function (optional)	A callback function that will be called when the document is loaded and ready to be signed
onDocumentCompleted	function (optional)	A callback function that will be called when the document has been completed
onDocumentError	function (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-solid';

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} />
  );
};

Introduction

User Guide

Developer Guide

Solid.js Integration

Solid.js Integration

Installation

Usage

Direct Link Template

Props

Signing Token

Props

Styling and Theming (Platform Plan)

​Solid.js Integration

​Installation

​Usage

​Direct Link Template

​Props

​Signing Token

​Props

​Styling and Theming (Platform Plan)

Solid.js Integration

Installation

Usage

Direct Link Template

Props

Signing Token

Props

Styling and Theming (Platform Plan)