mirror of
https://github.com/documenso/documenso.git
synced 2026-07-10 21:15:15 +10:00
ephraimduncan
138d663c25
Merge origin/main into feat/external-2fa-codes. Resolve formatting conflicts caused by biome rollout; preserve both feature streams: PR's external 2FA token + signing-session 2FA proof additions plus main's RateLimit/RecipientExpired/signingReminders/date-auto-insert. In complete-document-with-token.ts, drop the duplicate early field-fetching block introduced when main moved that logic later with date auto-insert support; keep the EXTERNAL_TWO_FACTOR_AUTH check using derivedRecipientActionAuth.
97 lines
2.1 KiB
Plaintext
97 lines
2.1 KiB
Plaintext
---
|
|
title: Preact
|
|
description: Embed Documenso signing in your Preact application using the official SDK.
|
|
---
|
|
|
|
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
|
|
|
## Installation
|
|
|
|
<Tabs items={['npm', 'yarn', 'pnpm']}>
|
|
<Tab value="npm">``` npm install @documenso/embed-preact ```</Tab>
|
|
<Tab value="yarn">``` yarn add @documenso/embed-preact ```</Tab>
|
|
<Tab value="pnpm">``` pnpm add @documenso/embed-preact ```</Tab>
|
|
</Tabs>
|
|
|
|
---
|
|
|
|
## Direct Template
|
|
|
|
```tsx
|
|
import { EmbedDirectTemplate } from '@documenso/embed-preact';
|
|
|
|
const SigningPage = () => {
|
|
return (
|
|
<EmbedDirectTemplate
|
|
token="your-template-token"
|
|
name="John Doe"
|
|
email="john@example.com"
|
|
lockEmail={true}
|
|
externalId="order-12345"
|
|
onDocumentReady={() => console.log('Ready')}
|
|
onDocumentCompleted={(data) => {
|
|
console.log('Signed:', data.documentId);
|
|
}}
|
|
onDocumentError={() => console.error('Error')}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Signing Token
|
|
|
|
```tsx
|
|
import { EmbedSignDocument } from '@documenso/embed-preact';
|
|
|
|
const SigningPage = ({ token }: { token: string }) => {
|
|
return (
|
|
<EmbedSignDocument
|
|
token={token}
|
|
onDocumentCompleted={(data) => {
|
|
console.log('Signed:', data.documentId);
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Styling (Platform Plan)
|
|
|
|
```tsx
|
|
import { EmbedDirectTemplate } from '@documenso/embed-preact';
|
|
|
|
const StyledEmbed = () => {
|
|
return (
|
|
<EmbedDirectTemplate
|
|
token="your-token"
|
|
css={`
|
|
.documenso-embed {
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
`}
|
|
cssVars={{
|
|
primary: '#0000FF',
|
|
background: '#F5F5F5',
|
|
radius: '8px',
|
|
}}
|
|
darkModeDisabled={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
See [CSS Variables](/docs/developers/embedding/css-variables) for all available variables.
|
|
|
|
---
|
|
|
|
## See Also
|
|
|
|
- [Embedding Overview](/docs/developers/embedding) - Props reference and concepts
|
|
- [CSS Variables](/docs/developers/embedding/css-variables) - Customize appearance
|
|
- [Authoring](/docs/developers/embedding/authoring) - Embed document creation
|