diff --git a/apps/documentation/pages/developers/embedding/_meta.json b/apps/documentation/pages/developers/embedding/_meta.json
index 96806de3e..58bcdf546 100644
--- a/apps/documentation/pages/developers/embedding/_meta.json
+++ b/apps/documentation/pages/developers/embedding/_meta.json
@@ -6,5 +6,6 @@
"solid": "Solid Integration",
"preact": "Preact Integration",
"angular": "Angular Integration",
- "css-variables": "CSS Variables"
+ "css-variables": "CSS Variables",
+ "web-components": "Web Components"
}
diff --git a/apps/documentation/pages/developers/embedding/index.mdx b/apps/documentation/pages/developers/embedding/index.mdx
index 27d6f6f8f..2e93941ae 100644
--- a/apps/documentation/pages/developers/embedding/index.mdx
+++ b/apps/documentation/pages/developers/embedding/index.mdx
@@ -73,14 +73,15 @@ These customization options are available for both Direct Templates and Signing
We support embedding across a range of popular JavaScript frameworks, including:
-| Framework | Package |
-| --------- | ---------------------------------------------------------------------------------- |
-| React | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react) |
-| Preact | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact) |
-| Vue | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue) |
-| Svelte | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte) |
-| Solid | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid) |
-| Angular | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular) |
+| Framework | Package |
+| --------- | ---------------------------------------------------------------------------------- |
+| React | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react) |
+| Preact | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact) |
+| Vue | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue) |
+| Svelte | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte) |
+| Solid | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid) |
+| Angular | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular) |
+| Web Components | [@documenso/embed-webcomponent](https://www.npmjs.com/package/@documenso/embed-webcomponent) |
Additionally, we provide **web components** for more generalized use. However, please note that web components are still in their early stages and haven't been extensively tested.
@@ -166,6 +167,7 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
- [Svelte](/developers/embedding/svelte)
- [Solid](/developers/embedding/solid)
- [Angular](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
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.
@@ -177,4 +179,5 @@ If you're using **web components**, the integration process is slightly differen
- [Solid Integration](/developers/embedding/solid)
- [Preact Integration](/developers/embedding/preact)
- [Angular Integration](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
- [CSS Variables](/developers/embedding/css-variables)
diff --git a/apps/documentation/pages/developers/embedding/web-components.mdx b/apps/documentation/pages/developers/embedding/web-components.mdx
new file mode 100644
index 000000000..43ea08788
--- /dev/null
+++ b/apps/documentation/pages/developers/embedding/web-components.mdx
@@ -0,0 +1,89 @@
+---
+title: Web Components Integration
+description: Learn how to use our embedding SDK via Web Components on a framework-less web application.
+---
+
+# Web Components Integration
+
+Our Web Components SDK provides a simple way to embed a signing experience within your framework-less web application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-webcomponent
+```
+
+Then in your html file, add the following to add the script, replacing the path with the proper path to the web component script.
+
+```html
+
+```
+
+## 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 `documenso-embed-direct-template` tag.
+
+```html
+
+```
+
+#### Attributes
+
+| Attribute | 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 |
+| 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 is signed |
+| onFieldUnsigned | function (optional) | A callback function that will be called when a field is unsigned |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `documenso-embed-sign-document` tag.
+
+```html
+
+```
+
+#### Attributes
+
+| Attribute | 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 |
+
+### Creating via JavaScript
+
+You can also create the tag element using javascript, for dynamic generation of either modes. For example, this would add the sign document embed to the DOM.
+
+```javascript
+document.getElementById('my-wrapper-here').innerHTML = '';
+
+const tag = document.createElement('documenso-embed-sign-document');
+tag.setAttribute('token', data.token);
+tag.style.width = '100%';
+tag.style.height = '100%';
+
+document.getElementById('my-wrapper-here').appendChild(tag);
+```