mirror of
https://github.com/documenso/documenso.git
synced 2025-11-12 15:53:02 +10:00
chore: add docs for authoring
This commit is contained in:
@ -6,5 +6,6 @@
|
|||||||
"solid": "Solid Integration",
|
"solid": "Solid Integration",
|
||||||
"preact": "Preact Integration",
|
"preact": "Preact Integration",
|
||||||
"angular": "Angular Integration",
|
"angular": "Angular Integration",
|
||||||
"css-variables": "CSS Variables"
|
"css-variables": "CSS Variables",
|
||||||
}
|
"authoring": "Authoring"
|
||||||
|
}
|
||||||
167
apps/documentation/pages/developers/embedding/authoring.mdx
Normal file
167
apps/documentation/pages/developers/embedding/authoring.mdx
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
---
|
||||||
|
title: Authoring
|
||||||
|
description: Learn how to use embedded authoring to create documents and templates in your application
|
||||||
|
---
|
||||||
|
|
||||||
|
# Embedded Authoring
|
||||||
|
|
||||||
|
In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation directly within your application.
|
||||||
|
|
||||||
|
## How Embedded Authoring Works
|
||||||
|
|
||||||
|
The embedded authoring feature enables your users to create new documents without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions.
|
||||||
|
|
||||||
|
## Creating Documents with Embedded Authoring
|
||||||
|
|
||||||
|
To implement document creation in your application, use the `EmbedCreateDocument` component from our SDK:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
|
||||||
|
|
||||||
|
const DocumentCreator = () => {
|
||||||
|
// You'll need to obtain a presign token using your API key
|
||||||
|
const presignToken = 'YOUR_PRESIGN_TOKEN';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ height: '800px', width: '100%' }}>
|
||||||
|
<EmbedCreateDocument
|
||||||
|
presignToken={presignToken}
|
||||||
|
externalId="order-12345"
|
||||||
|
onDocumentCreated={(data) => {
|
||||||
|
console.log('Document created with ID:', data.documentId);
|
||||||
|
console.log('External reference ID:', data.externalId);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Obtaining a Presign Token
|
||||||
|
|
||||||
|
Before using the `EmbedCreateDocument` component, you'll need to obtain a presign token from your backend. This token authorizes the embedding session.
|
||||||
|
|
||||||
|
You can create a presign token by making a request to:
|
||||||
|
|
||||||
|
```
|
||||||
|
POST /api/v2-beta/embedding/create-presign-token
|
||||||
|
```
|
||||||
|
|
||||||
|
This API endpoint requires authentication with your Documenso API key. The token has a default expiration of 1 hour, but you can customize this duration based on your security requirements.
|
||||||
|
|
||||||
|
You can find more details on this request at our [API Documentation](https://openapi.documenso.com/reference#tag/embedding)
|
||||||
|
|
||||||
|
## Configuration Options
|
||||||
|
|
||||||
|
The `EmbedCreateDocument` component accepts several configuration options:
|
||||||
|
|
||||||
|
| Option | Type | Description |
|
||||||
|
| ------------------ | ------- | ------------------------------------------------------------------ |
|
||||||
|
| `presignToken` | string | **Required**. The authentication token for the embedding session. |
|
||||||
|
| `externalId` | string | Optional reference ID from your system to link with the document. |
|
||||||
|
| `host` | string | Optional custom host URL. Defaults to `https://app.documenso.com`. |
|
||||||
|
| `css` | string | Optional custom CSS to style the embedded component. |
|
||||||
|
| `cssVars` | object | Optional CSS variables for colors, spacing, and more. |
|
||||||
|
| `darkModeDisabled` | boolean | Optional flag to disable dark mode. |
|
||||||
|
| `className` | string | Optional CSS class name for the iframe. |
|
||||||
|
|
||||||
|
## Feature Toggles
|
||||||
|
|
||||||
|
You can customize the authoring experience by enabling or disabling specific features:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<EmbedCreateDocument
|
||||||
|
presignToken="YOUR_PRESIGN_TOKEN"
|
||||||
|
features={{
|
||||||
|
allowConfigureSignatureTypes: true,
|
||||||
|
allowConfigureLanguage: true,
|
||||||
|
allowConfigureDateFormat: true,
|
||||||
|
allowConfigureTimezone: true,
|
||||||
|
allowConfigureRedirectUrl: true,
|
||||||
|
allowConfigureCommunication: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Handling Document Creation Events
|
||||||
|
|
||||||
|
The `onDocumentCreated` callback is triggered when a document is successfully created, providing both the document ID and your external reference ID:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<EmbedCreateDocument
|
||||||
|
presignToken="YOUR_PRESIGN_TOKEN"
|
||||||
|
externalId="order-12345"
|
||||||
|
onDocumentCreated={(data) => {
|
||||||
|
// Navigate to a success page
|
||||||
|
navigate(`/documents/success?id=${data.documentId}`);
|
||||||
|
|
||||||
|
// Or update your database with the document ID
|
||||||
|
updateOrderDocument(data.externalId, data.documentId);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Styling the Embedded Component
|
||||||
|
|
||||||
|
You can customize the appearance of the embedded component using standard CSS classes:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<EmbedCreateDocument
|
||||||
|
className="h-screen w-full rounded-lg border-none shadow-md"
|
||||||
|
presignToken="YOUR_PRESIGN_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',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Complete Integration Example
|
||||||
|
|
||||||
|
Here's a complete example of integrating document creation in a React application:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react';
|
||||||
|
|
||||||
|
function DocumentCreator() {
|
||||||
|
// In a real application, you would fetch this token from your backend
|
||||||
|
// using your API key at /api/v2-beta/embedding/create-presign-token
|
||||||
|
const presignToken = 'YOUR_PRESIGN_TOKEN';
|
||||||
|
const [documentId, setDocumentId] = useState<number | null>(null);
|
||||||
|
|
||||||
|
if (documentId) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Document Created Successfully!</h2>
|
||||||
|
<p>Document ID: {documentId}</p>
|
||||||
|
<button onClick={() => setDocumentId(null)}>Create Another Document</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ height: '800px', width: '100%' }}>
|
||||||
|
<EmbedCreateDocument
|
||||||
|
presignToken={presignToken}
|
||||||
|
externalId="order-12345"
|
||||||
|
onDocumentCreated={(data) => {
|
||||||
|
setDocumentId(data.documentId);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DocumentCreator;
|
||||||
|
```
|
||||||
|
|
||||||
|
With embedded authoring, your users can seamlessly create documents within your application, enhancing the overall user experience and streamlining document workflows.
|
||||||
@ -169,6 +169,19 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
|
|||||||
|
|
||||||
If you're using **web components**, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases.
|
If you're using **web components**, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases.
|
||||||
|
|
||||||
|
## Embedded Authoring
|
||||||
|
|
||||||
|
In addition to embedding signing experiences, Documenso now supports **embedded authoring**, allowing your users to create documents and templates directly within your application.
|
||||||
|
|
||||||
|
With embedded authoring, you can:
|
||||||
|
|
||||||
|
- Create new documents with custom fields
|
||||||
|
- Configure document properties and settings
|
||||||
|
- Set up recipients and signing workflows
|
||||||
|
- Customize the authoring experience
|
||||||
|
|
||||||
|
For detailed implementation instructions and code examples, see our [Embedded Authoring](/developers/embedding/authoring) guide.
|
||||||
|
|
||||||
## Related
|
## Related
|
||||||
|
|
||||||
- [React Integration](/developers/embedding/react)
|
- [React Integration](/developers/embedding/react)
|
||||||
@ -178,3 +191,4 @@ If you're using **web components**, the integration process is slightly differen
|
|||||||
- [Preact Integration](/developers/embedding/preact)
|
- [Preact Integration](/developers/embedding/preact)
|
||||||
- [Angular Integration](/developers/embedding/angular)
|
- [Angular Integration](/developers/embedding/angular)
|
||||||
- [CSS Variables](/developers/embedding/css-variables)
|
- [CSS Variables](/developers/embedding/css-variables)
|
||||||
|
- [Embedded Authoring](/developers/embedding/authoring)
|
||||||
|
|||||||
@ -116,9 +116,6 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum
|
|||||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||||
accept: {
|
accept: {
|
||||||
'application/pdf': ['.pdf'],
|
'application/pdf': ['.pdf'],
|
||||||
'application/msword': ['.doc'],
|
|
||||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
|
|
||||||
'text/plain': ['.txt'],
|
|
||||||
},
|
},
|
||||||
maxSize: APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024,
|
maxSize: APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user