v1.9.1-rc.5

The web components version of embedding was missing documentation. I've
added it here. Let me know if there's anything that should be
changed/updated.

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"
 }

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                                                                            |
+| Framework        | Package                                                                                      |
-| --------- | ---------------------------------------------------------------------------------- |
+| ---------        | ----------------------------------------------------------------------------------           |
-| React     | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react)     |
+| React            | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react)               |
-| Preact    | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact)   |
+| Preact           | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact)             |
-| Vue       | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue)         |
+| Vue              | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue)                   |
-| Svelte    | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte)   |
+| Svelte           | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte)             |
-| Solid     | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid)     |
+| Solid            | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid)               |
-| Angular   | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular) |
+| 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)

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
+<script src="YOUR_PATH_HERE"></script>
+```
+
+## 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
+<documenso-embed-direct-template
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-direct-template>
+```
+
+#### 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
+<documenso-embed-sign-document
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-sign-document>
+```
+
+#### 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);
+```

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.9.1-rc.4",
+  "version": "1.9.1-rc.5",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/web/src/app/embed/direct/[[...url]]/client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 
@@ -83,12 +83,15 @@ export const EmbedDirectTemplateClientPage = ({
   const [hasCompletedDocument, setHasCompletedDocument] = useState(false);
 
   const [isExpanded, setIsExpanded] = useState(false);
+  const [hasAutoExpanded, setHasAutoExpanded] = useState(false);
 
   const [isEmailLocked, setIsEmailLocked] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
 
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
 
+  const documentEndRef = useRef<HTMLDivElement>(null);
+
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
@@ -317,6 +320,43 @@ export const EmbedDirectTemplateClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
+  // Set up intersection observer to auto-expand widget when user reaches bottom of document
+  useEffect(() => {
+    if (!hasDocumentLoaded || !hasFinishedInit || hasAutoExpanded || isExpanded) {
+      return;
+    }
+
+    // Add a delay to ensure document has fully rendered and stabilized
+    const timeoutId = setTimeout(() => {
+      // Get the number of pages in the document
+      const pageCount = document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR).length;
+
+      // Only set up the observer if there's more than one page
+      if (pageCount <= 1) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const [entry] = entries;
+
+          if (entry.isIntersecting) {
+            setIsExpanded(true);
+            setHasAutoExpanded(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 1.0 },
+      );
+
+      if (documentEndRef.current) {
+        observer.observe(documentEndRef.current);
+      }
+    }, 1500); // 1.5 second delay
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [hasDocumentLoaded, hasFinishedInit, hasAutoExpanded, isExpanded]);
+
   if (hasCompletedDocument) {
     return (
       <EmbedDocumentCompleted
@@ -344,6 +384,8 @@ export const EmbedDirectTemplateClientPage = ({
             documentData={documentData}
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
+          {/* Observer target at the bottom of the document */}
+          <div ref={documentEndRef} className="h-4 w-full" />
         </div>
 
         {/* Widget */}
@@ -360,19 +402,34 @@ export const EmbedDirectTemplateClientPage = ({
                   <Trans>Sign document</Trans>
                 </h3>
 
-                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                {isExpanded ? (
-                  {isExpanded ? (
+                  <Button
-                    <LucideChevronDown
+                    variant="outline"
-                      className="text-muted-foreground h-5 w-5"
+                    className="h-8 w-8 p-0 md:hidden"
-                      onClick={() => setIsExpanded(false)}
+                    onClick={() => setIsExpanded(false)}
-                    />
+                  >
-                  ) : (
+                    <LucideChevronDown className="text-muted-foreground h-5 w-5" />
-                    <LucideChevronUp
+                  </Button>
-                      className="text-muted-foreground h-5 w-5"
+                ) : pendingFields.length > 0 ? (
-                      onClick={() => setIsExpanded(true)}
+                  <Button
-                    />
+                    variant="outline"
-                  )}
+                    className="h-8 w-8 p-0 md:hidden"
-                </Button>
+                    onClick={() => setIsExpanded(true)}
+                  >
+                    <LucideChevronUp className="text-muted-foreground h-5 w-5" />
+                  </Button>
+                ) : (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="md:hidden"
+                    disabled={isThrottled || (hasSignatureField && !signatureValid)}
+                    loading={isSubmitting}
+                    onClick={() => throttledOnCompleteClick()}
+                  >
+                    <Trans>Complete</Trans>
+                  </Button>
+                )}
               </div>
             </div>
 

apps/web/src/app/embed/sign/[[...url]]/client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useId, useLayoutEffect, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -91,11 +91,14 @@ export const EmbedSignDocumentClientPage = ({
   );
 
   const [isExpanded, setIsExpanded] = useState(false);
+  const [hasAutoExpanded, setHasAutoExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
 
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
 
+  const documentEndRef = useRef<HTMLDivElement>(null);
+
   const selectedSigner = allRecipients.find((r) => r.id === selectedSignerId);
   const isAssistantMode = recipient.role === RecipientRole.ASSISTANT;
 
@@ -241,6 +244,42 @@ export const EmbedSignDocumentClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
+  // Set up intersection observer to auto-expand widget when user reaches bottom of document
+  useEffect(() => {
+    if (!hasDocumentLoaded || !hasFinishedInit || hasAutoExpanded || isExpanded) {
+      return;
+    }
+
+    // Add a delay to ensure document has fully rendered and stabilized
+    const timeoutId = setTimeout(() => {
+      const pageCount = document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR).length;
+
+      // Only set up the observer if there's more than one page
+      if (pageCount <= 1) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const [entry] = entries;
+
+          if (entry.isIntersecting) {
+            setIsExpanded(true);
+            setHasAutoExpanded(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 1.0 },
+      );
+
+      if (documentEndRef.current) {
+        observer.observe(documentEndRef.current);
+      }
+    }, 1500); // 1.5 second delay
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [hasDocumentLoaded, hasFinishedInit, hasAutoExpanded, isExpanded]);
+
   if (hasRejectedDocument) {
     return <EmbedDocumentRejected name={fullName} />;
   }
@@ -283,6 +322,8 @@ export const EmbedSignDocumentClientPage = ({
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
+            {/* Observer target at the bottom of the document */}
+            <div ref={documentEndRef} className="h-4 w-full" />
           </div>
 
           {/* Widget */}
@@ -303,19 +344,36 @@ export const EmbedSignDocumentClientPage = ({
                     )}
                   </h3>
 
-                  <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                  {isExpanded ? (
-                    {isExpanded ? (
+                    <Button
-                      <LucideChevronDown
+                      variant="outline"
-                        className="text-muted-foreground h-5 w-5"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
-                        onClick={() => setIsExpanded(false)}
+                      onClick={() => setIsExpanded(false)}
-                      />
+                    >
-                    ) : (
+                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
-                      <LucideChevronUp
+                    </Button>
-                        className="text-muted-foreground h-5 w-5"
+                  ) : pendingFields.length > 0 ? (
-                        onClick={() => setIsExpanded(true)}
+                    <Button
-                      />
+                      variant="outline"
-                    )}
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
-                  </Button>
+                      onClick={() => setIsExpanded(true)}
+                    >
+                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="md:hidden"
+                      disabled={
+                        isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
+                      }
+                      loading={isSubmitting}
+                      onClick={() => throttledOnCompleteClick()}
+                    >
+                      <Trans>Complete</Trans>
+                    </Button>
+                  )}
                 </div>
               </div>
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.9.1-rc.4",
+  "version": "1.9.1-rc.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.9.1-rc.4",
+      "version": "1.9.1-rc.5",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -106,7 +106,7 @@
     },
     "apps/web": {
       "name": "@documenso/web",
-      "version": "1.9.1-rc.4",
+      "version": "1.9.1-rc.5",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/api": "*",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.1-rc.4",
+  "version": "1.9.1-rc.5",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",