--- title: "Create Dynamic Documents" slug: "design-dynamic-documents" updated: 2026-06-24T14:59:06Z published: 2026-06-24T14:59:06Z canonical: "knowledge.lightico.com/design-dynamic-documents" --- > ## Documentation Index > Fetch the complete documentation index at: https://knowledge.lightico.com/llms.txt > Use this file to discover all available pages before exploring further. # Create Dynamic Documents The HTML Designer is a user-friendly tool that enables you to create dynamic HTML-based documents like a Dynamic Document without requiring any knowledge of HTML coding. This article explains the basics of creating a Dynamic Document. 🎦 Watch related video: [Workflow - Part 2: Creating a dynamic doc](/v1/docs/workflow-part-2) --- ## Create a new Dynamic Document **To create a new Dynamic Document:** 1. In the Admin Center, in the left navigation pane, click **HTML designer**. 2. In the top right corner of the HTML designer page, click **Create new**. 3. In the **Create New HTML** dialog box, select **Dynamic Document**, enter a unique name for your document, and click **Create**. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/add_dynamic_doc.PNG) The new Dynamic Document opens. 4. Use the HTML Designer tools to do any of the following (for more details, follow the links): ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/2026-06-18_15-58-05.png) - [Add and edit text](/v1/docs/design-dynamic-documents#add-and-edit-text) (E). - Add [sections (G) and sheets](/v1/docs/design-dynamic-documents#add-sections) (A) to your document. - Insert [Attributes](https://knowledge.lightico.com/docs/add-dynamic-elements-to-a-dynamic-document#add-attributes), [objects](https://knowledge.lightico.com/docs/add-conditional-elements-to-a-dynamic-document#add-objects) and [functions](/v1/docs/add-functions-to-a-dynamic-document) (D). - Insert images, videos, hyperlinks, and [tables](/v1/docs/design-dynamic-documents#add-and-edit-a-table1) (F). - Open the [participants](/v1/docs/add-multiple-participants-to-a-dynamic-document), [conditions](/v1/docs/add-conditional-elements-to-a-dynamic-document#add-conditions), or [objects](/v1/docs/add-conditional-elements-to-a-dynamic-document#add-objects) tabs(C). - Create a [document code](/v1/docs/document-handling#available-system-value) for this document (B). 5. Click **Save**. ## Import a Dynamic Document from a different profile If you have created a Dynamic Document and want to use it in a different profile, you can save it as a template and then import it to the new profile. > [!WARNING] > **Before you begin** > > If the Dynamic Document uses Attributes or linked Forms, make sure they exist in the target profile. If they do not, create them and relink the Forms after import. **To import a Dynamic Document from a different profile:** 1. In the source profile, go to the **HTML designer** page. 2. Search for the Dynamic Document that you want to export. 3. Click the options menu next to the Dynamic Document, then click **Export**. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_538dbdbe.png) A file browser appears. 4. Save the file on your computer. 5. In the target profile, go to the HTML designer page and click **Import**. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_539211b6.png) A file browser appears. 6. Select the file. The Import HTML dialog appears. 7. Select one of the following: 1. **Import as new** - Create a new Dynamic Document 2. **Replace existing document** - Select an existing Dynamic Document to change its underlying HTML > [!TIP] > Tip > > Use **Replace existing document** to keep the same GUID. This is useful when uploading a new version of a document that is already referenced by an API integration, so you don’t need to update the GUID in the integration. 8. Click **Next**. The builder opens with the imported HTML, either as a new Dynamic Document or as an updated version of an existing one. --- ## Add and edit text Create the body of your Dynamic Document by typing into the window and using the editing tools in the tool bar. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_8aa06674.png) --- ## Add and edit tables Add a table to your Dynamic Document to present structured information, such as a summary of values or a comparison the customer can scan at a glance. **To add a table:** 1. Place the cursor where you want the table to appear. 2. In the toolbar, click the **Insert Table** icon and select the number of rows and columns. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(470).png) The table is added to the document. **To edit a table:** 1. Click inside the table to open the table toolbar. 2. Use the toolbar icons to adjust the table β€” add or remove rows and columns, merge cells, set alignment, and more. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(471).png) ### Set the table width The table width is one of the settings available from the table toolbar. The same document is often viewed on both desktop and mobile, and the width unit you choose affects how the table displays across screen sizes. **To set the table width:** 1. Click inside the table to open the table toolbar. 2. Click the **Edit Table Style** icon. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(472).png) The **Table size** dialog opens. 3. From the **Unit** dropdown, select one of the following: - **Pixels** β€” fixed width. The table stays the width you set. If it is wider than the screen on mobile, the customer can scroll left and right to see the rest of it. This is the default for new tables. - **Percent** β€” relative to the page width. The table width scales with the screen size. 4. In the **Width** field, enter the width value. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(473).png) Use **Percent** only for tables with short content, such as a summary of a few values per row, where the table adapts well across screen sizes. Tables with longer text become cramped at higher percentages, especially at 100%, and can be difficult to read on smaller screens. For text-heavy tables, keep **Pixels**. Always preview the document on both desktop and mobile before publishing. --- ## Define the customer action The following explains setting the action or role for the primary participant. To add addional participants and define their roles, see [Add multiple participants to a Dynamic Document](/v1/docs/add-multiple-participants-to-a-dynamic-document). **To define what the customer is required to do with the document in the collaboration session:** 1. In the participants tab, hover over **Participant 1** to reveal the edit icon. 2. Click edit. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/image(460).png) The **Edit participant dialog** appears. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/2026-06-18_16-36-20.png) 3. Select the desired role: - **Signer (default)** - Customer digitally signs or initials the document. When you define the action as Sign, you'll be required to add a signature or initials field to the doc (see [below](/v1/docs/design-dynamic-documents#add-a-signature-element)). - **Approver** - Customer reviews the document on-screen and clicks an **Approve** button to approve the document - **Reviewer** - Customer reviews the document on-screen - **Download** - Customer can download the document only ### Add a signature element When you [define the customer action](/v1/docs/design-dynamic-documents#define-the-customer-action) as **Sign**, the signature and initial icons on the tool bar are enabled. You are required to add at least one of these before saving the Dynamic Document. **To add a signature or initials element to the Dynamic Document:** 1. Place your cursor in the location of the Dynamic Document in which you'd like to place the signature or initial field. 2. Click the signature or initials icon. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_336fcb91.png) The field appears in the selected location. 3. Select the field, click and drag to resize. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_33b7e554.png) 4. Set the following from the context menu: 1. Alignment - When the field is in **Break Text mode** (see next point), you can position it left, right, or center. 2. Display mode - Select **Inline** (same line as the text) or **Break Text** (on it's own line). 3. Signature properties - Check the **Line** box and choose the desired line style to display beneath the signature. Toggle to **Required** to ensure the Dynamic Document cannot be completed without a signature. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_33bb0e1b.png) 4. Delete - Remove the field from the document. --- ## Add sections Use sections to organize the information in your Dynamic Document. The customer does not see the division into sections. Although you can add a page break before a section in some cases (see below). You can also set conditions to determine if and how a section is displayed. For more information, see [Add conditions](https://knowledge.lightico.com/docs/add-conditional-elements-to-a-dynamic-document#add-conditions). **To add a new section:** 1. Click the add section (+) icon below the existing sections. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_8ae859e3.png) A new section appears below the existing ones. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_8aea0745.png) 2. Add more sections as needed. 3. Click and drag the section to change the order of the section. The section changes order and the section name changes to reflect the new order. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/2023-07-19_10-55-56.gif) > [!NOTE] > Note: > > Section names are not editable. **To delete a section:** Click the menu in the top right corner of the section and select **Delete Section**. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_8af01b5d.png) **To create a page break before this section:** Click the page break icon and turn in the toggle. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/Snag_1afc9d87.png) > [!NOTE] > Note: > > Page break can only be used on a sheet that contains only one section. --- ## Add sheets Adding sheets is another way to organize the information in your Dynamic Document. There will be no page break for a new sheet in the final PDF. You can also set conditions to determine if and how a sheet is displayed (see [Add conditions](https://knowledge.lightico.com/docs/add-conditional-elements-to-a-dynamic-document#add-conditions) below). **To add a new sheet:** 1. Click the **Add tab** button in the top left corner. ![](https://cdn.document360.io/473bb8c5-ff1b-4930-8109-2321ac6ab967/Images/Documentation/new_sheet.png) 2. Enter a name for the sheet, and click **Done**. The new sheet appears. --- ## Q and A ### What happened to the "Customer can" setting at the top of the document? The **Customer can** setting has been replaced by the role assigned to the primary participant in the Participants tab. To define what the primary participant is required to do with the document, hover over Participant 1 in the Participants tab, click the edit icon, and select the relevant role β€” Signer, Approver, Reviewer, or Download. --- ### What's the difference between the Reviewer and Approver roles? Both roles require the participant to read the document, but they differ in what happens next. An Approver actively confirms acceptance by clicking an Approve button. A Reviewer only needs to open and read the document β€” no action is required beyond that. --- ### Can I add a signature field for a participant whose role is set to Approver? No. Signature and initials fields are only available when the participant's role is set to Signer. If you want a participant to sign the document, make sure their role is set to Signer before placing signature or initials fields. Documents created entirely in the Lightico UI, displayed as dynamic HTML and converted to PDF after signing or approval. Area of the Lightico platform where you will find all settings, user management, and asset configuration pages. Access to this area is defined by a user's role and permissions. ## Related - [Workflow - Part 2: Dynamic documents](/workflow-part-2.md)