mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-20 22:52:39 +02:00
149 lines
33 KiB
HTML
149 lines
33 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-help/Templates/embed-template" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.7.0">
|
||
<title data-rh="true">Embedding OpenSign templates | OpenSign™</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docs.opensignlabs.com/img/docusaurus-social-card.png"><meta data-rh="true" name="twitter:image" content="https://docs.opensignlabs.com/img/docusaurus-social-card.png"><meta data-rh="true" property="og:url" content="https://docs.opensignlabs.com/docs/help/Templates/embed-template"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Embedding OpenSign templates | OpenSign™"><meta data-rh="true" name="description" content="OpenSign Template Embedding allows users to seamlessly integrate public document templates into their websites or applications. By embedding templates, you can provide a direct and interactive signing experience for your users without requiring them to leave your platform. This feature supports various technologies like React, Next.js, HTML, JavaScript, and Angular, making it easy to add signing capabilities to different web projects."><meta data-rh="true" property="og:description" content="OpenSign Template Embedding allows users to seamlessly integrate public document templates into their websites or applications. By embedding templates, you can provide a direct and interactive signing experience for your users without requiring them to leave your platform. This feature supports various technologies like React, Next.js, HTML, JavaScript, and Angular, making it easy to add signing capabilities to different web projects."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.opensignlabs.com/docs/help/Templates/embed-template"><link data-rh="true" rel="alternate" href="https://docs.opensignlabs.com/docs/help/Templates/embed-template" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.opensignlabs.com/docs/help/Templates/embed-template" hreflang="x-default"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="OpenSign™ RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="OpenSign™ Atom Feed"><link rel="stylesheet" href="/assets/css/styles.6bed5790.css">
|
||
<script src="/assets/js/runtime~main.0c68f589.js" defer="defer"></script>
|
||
<script src="/assets/js/main.fbed2f27.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_mb4j" style="background-color:#cae4fa;color:#091E42" role="banner"><div class="content_knG7 announcementBarContent_xLdY">Help use spread the word - ⭐ OpenSign on <a target="_blank" rel="noopener" href="https://github.com/opensignlabs/opensign">GitHub</a></div></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.png" alt="OpenSign™ Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.png" alt="OpenSign™ Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">OpenSign™</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/help/intro">Help</a><a class="navbar__item navbar__link" href="/docs/API-docs/v1.1">APIs</a><a class="navbar__item navbar__link" href="/docs/contribute/CODE_OF_CONDUCT">Contribute</a><a href="https://www.opensignlabs.com/plans-pricing" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Cloud Pricing<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a class="navbar__item navbar__link" href="/docs/self-host/intro">Self-host</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/opensignlabs/opensign" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/help/intro">Intro</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/create-new-opensign-document">Create New OpenSign Document</a><button aria-label="Expand sidebar category 'Create New OpenSign Document'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/manage-docs-using-opensign-drive">Manage Docs using OpenSign™ Drive</a><button aria-label="Expand sidebar category 'Manage Docs using OpenSign™ Drive'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/documents">Documents</a><button aria-label="Expand sidebar category 'Documents'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/docs/category/templates">Templates</a><button aria-label="Collapse sidebar category 'Templates'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/Templates/create-template">Create Templates</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/Templates/manage-templates">Manage Templates</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/Templates/use-template">Use template to create documents</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/Templates/quick-send">Quickly Send the Document for Signature Using Template</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/help/Templates/publicTemplate">Setting up an OpenSign template for public signing</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/help/Templates/embed-template">Embedding OpenSign templates</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/settings">Settings</a><button aria-label="Expand sidebar category 'Settings'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/user-menu">User Menu</a><button aria-label="Expand sidebar category 'User Menu'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/category/faqs">FAQs</a><button aria-label="Expand sidebar category 'FAQs'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_xLCN"><div class="docItemContainer_jfFK"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/category/templates"><span itemprop="name">Templates</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Embedding OpenSign templates</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><div class="row"><div class="col col--12 markdown"><header><h1>What is OpenSign Template Embedding?</h1></header>
|
||
<p>OpenSign Template Embedding allows users to seamlessly integrate public document templates into their websites or applications. By embedding templates, you can provide a direct and interactive signing experience for your users without requiring them to leave your platform. This feature supports various technologies like React, Next.js, HTML, JavaScript, and Angular, making it easy to add signing capabilities to different web projects.
|
||
With OpenSign Template Embedding, businesses can offer a streamlined and professional document signing process, enhancing user experience and workflow efficiency.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="how-to-set-up-a-public-profile-design-templates-and-embed-a-template">How to set up a Public profile, Design templates, and Embed a template?<a href="#how-to-set-up-a-public-profile-design-templates-and-embed-a-template" class="hash-link" aria-label="Direct link to How to set up a Public profile, Design templates, and Embed a template?" title="Direct link to How to set up a Public profile, Design templates, and Embed a template?"></a></h2>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-1-set-up-your-public-profile-username--tagline">Step 1: Set up your Public profile (Username & Tagline)<a href="#step-1-set-up-your-public-profile-username--tagline" class="hash-link" aria-label="Direct link to Step 1: Set up your Public profile (Username & Tagline)" title="Direct link to Step 1: Set up your Public profile (Username & Tagline)"></a></h3>
|
||
<ul>
|
||
<li><strong>Navigate to your profile</strong>: On the top right, click your profile icon, select "Edit profile," and enter a public username (e.g., "OpenSignPublicProfile").</li>
|
||
<li><strong>Add a tagline</strong>(Optional): Enter a custom tagline (e.g., "Seal the deal openly") and save the changes.</li>
|
||
</ul>
|
||
<img width="828" alt="Set up Public Profile" src="https://github.com/user-attachments/assets/6c9cbd4b-eb1a-4a5b-bb0a-21777621555c">
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-2-create-a-new-template">Step 2: Create a new template<a href="#step-2-create-a-new-template" class="hash-link" aria-label="Direct link to Step 2: Create a new template" title="Direct link to Step 2: Create a new template"></a></h3>
|
||
<ul>
|
||
<li><strong>Navigate to Templates</strong>: On the left sidebar, click "Templates" and select "Create template."</li>
|
||
</ul>
|
||
<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/95ee5c26-4284-46aa-9de7-3f492ad34feb">
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="upload-your-document-and-fill-in-the-template-details">Upload your document and fill in the template details:<a href="#upload-your-document-and-fill-in-the-template-details" class="hash-link" aria-label="Direct link to Upload your document and fill in the template details:" title="Direct link to Upload your document and fill in the template details:"></a></h3>
|
||
<ul>
|
||
<li><strong>[1] Choose file</strong>: Select the document to upload (supported formats: PDF, PNG, JPG, JPEG, DOCX).</li>
|
||
<li><strong>[2] Choose file from Dropbox</strong>: Click the dropbox icon to select the document file from your dropbox account.</li>
|
||
<li><strong>[3] Title</strong> <em>(Required)</em>: Provide a title for your template.</li>
|
||
<li><strong>[4] Description</strong>: Optionally add a description to give context or instructions regarding the template.</li>
|
||
<li><strong>[5] Note</strong>: Add additional notes or instructions.</li>
|
||
<li><strong>[6] Send in Order</strong>: Choose "Yes" or "No" for sending in a specific order.</li>
|
||
<li><strong>[7] Auto reminder</strong>: Set up automatic email reminders for signers.</li>
|
||
<li><strong>[8] Enable OTP verification</strong> : Choose "Yes" or "No" for requiring email verification via OTP.</li>
|
||
<li><strong>[9] Enable tour</strong>: Select "Yes" or "No" for enabling the tour feature.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="proceed-to-template-creation-panel">Proceed to template creation panel<a href="#proceed-to-template-creation-panel" class="hash-link" aria-label="Direct link to Proceed to template creation panel" title="Direct link to Proceed to template creation panel"></a></h3>
|
||
<ul>
|
||
<li><strong>Next</strong>: Click the "Next" button to proceed to the next stage of template creation, where you can add widgets and finalize the template.</li>
|
||
<li><strong>Cancel</strong>: If you need to start over or make changes, click Cancel button to clear the form.</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-3-template-creation">Step 3: Template creation<a href="#step-3-template-creation" class="hash-link" aria-label="Direct link to Step 3: Template creation" title="Direct link to Step 3: Template creation"></a></h3>
|
||
<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/36a269fb-179b-462e-abc0-f436ec195a4a">
|
||
<ul>
|
||
<li><strong>[1] Define roles</strong>:<!-- -->
|
||
<ul>
|
||
<li>
|
||
<p><strong>Add Roles</strong>: In the roles section on the right, click "+ Add role" to specify the roles involved in the document, such as Candidate, HR, and Manager.</p>
|
||
<p><strong>Note</strong>: Make sure the public role is positioned at the top if 'Send in Order' is set to Yes; Otherwise, you will not be able to make the template public.</p>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>[2] Assign widgets to roles</strong>: Click on each role to highlight it, then drag and drop the widget to assign it to that role. The widgets will appear in the same colour as the role name once you drop it on the document.<!-- -->
|
||
<ul>
|
||
<li><strong>[1] Assign signature widget</strong>: Select the Role from the right side panel, click on the signature widget, and position it where the signature is required. You can place multiple signature widgets for each Role, as required.</li>
|
||
<li><strong>[2] Add other widgets</strong>: Depending on your needs, you can include additional widgets such as:
|
||
Stamps, Initials, Name, Date, Text, Checkbox, and more.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p><strong>Important</strong>: Before proceeding, ensure that all roles have assigned signers, except for the public role, since we are making this template public.</p>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="save-template">Save template<a href="#save-template" class="hash-link" aria-label="Direct link to Save template" title="Direct link to Save template"></a></h3>
|
||
<ul>
|
||
<li>
|
||
<p><strong>Next button</strong>: Once you’ve organized your widgets and set their properties, simply click the “Next” button to save your template.</p>
|
||
</li>
|
||
<li>
|
||
<p>After doing so, a “Create document” popup will appear, prompting you with the question: “Do you want to create a document using the template you just created?” You’ll have the option to choose either “Yes” or “No.”</p>
|
||
</li>
|
||
<li>
|
||
<p>Choose "No" you will be redirected to the Manage templates screen.</p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-4-managing-and-embedding-the-template">Step 4: Managing and Embedding the template<a href="#step-4-managing-and-embedding-the-template" class="hash-link" aria-label="Direct link to Step 4: Managing and Embedding the template" title="Direct link to Step 4: Managing and Embedding the template"></a></h3>
|
||
<img width="828" alt="Manage Template" src="https://github.com/user-attachments/assets/4fd68285-d489-4998-bcf1-1cf40eada723">
|
||
<p>On the Manage templates page, you'll see a list of templates you've created or have access to. This list provides details such as the template title, file, owner, signers, and whether the template is public.</p>
|
||
<ul>
|
||
<li>
|
||
<p>To embed a template, you first need to make it public by clicking the toggle button in the public column of the template.</p>
|
||
</li>
|
||
<li>
|
||
<p>A confirmation popup will appear with the message, 'Are you sure you want to make this template public?' You can choose either Yes or No. Select Yes to make the template public.</p>
|
||
</li>
|
||
<li>
|
||
<p>A public profile popup will appear, displaying the code to embed the template.</p>
|
||
</li>
|
||
<li>
|
||
<p>We support embedding the template in React/Next.js, HTML/JavaScript, and Angular application.</p>
|
||
</li>
|
||
</ul>
|
||
<p>After making the template public, you’ll have an additional option to view the template embedding code.
|
||
To access it:</p>
|
||
<ul>
|
||
<li>
|
||
<p>Click on the three dots (options menu) next to the template.</p>
|
||
</li>
|
||
<li>
|
||
<p>Select the Embed option from the dropdown menu.</p>
|
||
</li>
|
||
</ul>
|
||
<p><strong>Embed the template in a React or Next.js application</strong></p>
|
||
<ul>
|
||
<li>Copy the code and paste it into your React or Next.js application.</li>
|
||
<li>Install the required OpenSign dependencies and run your project.</li>
|
||
</ul>
|
||
<p>Watch the video below to see how to embed the template in a React or Next.js application.</p>
|
||
<div><div style="width:640px;height:360px"></div></div>
|
||
<p><strong>Embed the template in an HTML or JavaScript project</strong></p>
|
||
<ul>
|
||
<li>Copy the code and paste it into your HTML or JavaScript application.</li>
|
||
</ul>
|
||
<p>Watch the video below to see how to embed the template in HTML or JavaScript application.</p>
|
||
<div><div style="width:640px;height:360px"></div></div>
|
||
<p><strong>Embed the template in an Angular project</strong></p>
|
||
<ul>
|
||
<li>Copy the code and paste it into your an Angular application.</li>
|
||
<li>Install the required OpenSign dependencies and run your project.</li>
|
||
</ul>
|
||
<p>Watch the video below to see how to embed the template in an Angular application.</p>
|
||
<div><div style="width:640px;height:360px"></div></div>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-5-sign-the-document-through-the-embed-public-template">Step 5: Sign the document through the Embed public template.<a href="#step-5-sign-the-document-through-the-embed-public-template" class="hash-link" aria-label="Direct link to Step 5: Sign the document through the Embed public template." title="Direct link to Step 5: Sign the document through the Embed public template."></a></h3>
|
||
<ul>
|
||
<li>
|
||
<p>Once the document loads, click Sign Now in the top right corner. A popup will appear asking for signer details such as Name, Email, and Phone Number.</p>
|
||
</li>
|
||
<li>
|
||
<p>Enter the required details and click Submit.</p>
|
||
</li>
|
||
<li>
|
||
<p>You can now fill in the necessary fields within the document's widgets and sign it.</p>
|
||
</li>
|
||
<li>
|
||
<p>After you finish signing, the document will be completed and automatically sent to the next signer for their signature.</p>
|
||
</li>
|
||
</ul>
|
||
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="step-6-print-document-download-completion-certificate-and-download-document">Step 6: Print document, Download completion certificate, and Download Document<a href="#step-6-print-document-download-completion-certificate-and-download-document" class="hash-link" aria-label="Direct link to Step 6: Print document, Download completion certificate, and Download Document" title="Direct link to Step 6: Print document, Download completion certificate, and Download Document"></a></h3>
|
||
<p>You’ll see options to Print or Download the signed document for your records.</p>
|
||
<p>If you are the only signer, the signing process is finished, and you will have the options to Print document, Download completion certificate, and Download document.</p>
|
||
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="additional-information">Additional Information<a href="#additional-information" class="hash-link" aria-label="Direct link to Additional Information" title="Direct link to Additional Information"></a></h2>
|
||
<ul>
|
||
<li>All fields marked with an asterisk (*) must be completed before the document can be submitted.</li>
|
||
<li>Ensure that the document format is supported by OpenSign before uploading.</li>
|
||
</ul>
|
||
<p>If you require more help, feel free to reach out to our customer support on <a href="mailto:support@opensignlabs.com" target="_blank" rel="noopener noreferrer">support@opensignlabs.com</a>.</p>
|
||
<p>Happy signing with OpenSign™!write</p></div></div></div><div class="row"><div class="col col--12"><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/opensignlabs/opensign/tree/feat-docs/docs/docs/help/Templates/embed-template.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></div></div></article><div class="row"><div class="col col--12"><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/help/Templates/publicTemplate"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Setting up an OpenSign template for public signing</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/category/settings"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Settings</div></a></nav></div></div></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#how-to-set-up-a-public-profile-design-templates-and-embed-a-template" class="table-of-contents__link toc-highlight">How to set up a Public profile, Design templates, and Embed a template?</a><ul><li><a href="#step-1-set-up-your-public-profile-username--tagline" class="table-of-contents__link toc-highlight">Step 1: Set up your Public profile (Username & Tagline)</a></li><li><a href="#step-2-create-a-new-template" class="table-of-contents__link toc-highlight">Step 2: Create a new template</a></li><li><a href="#upload-your-document-and-fill-in-the-template-details" class="table-of-contents__link toc-highlight">Upload your document and fill in the template details:</a></li><li><a href="#proceed-to-template-creation-panel" class="table-of-contents__link toc-highlight">Proceed to template creation panel</a></li><li><a href="#step-3-template-creation" class="table-of-contents__link toc-highlight">Step 3: Template creation</a></li><li><a href="#save-template" class="table-of-contents__link toc-highlight">Save template</a></li><li><a href="#step-4-managing-and-embedding-the-template" class="table-of-contents__link toc-highlight">Step 4: Managing and Embedding the template</a></li><li><a href="#step-5-sign-the-document-through-the-embed-public-template" class="table-of-contents__link toc-highlight">Step 5: Sign the document through the Embed public template.</a></li><li><a href="#step-6-print-document-download-completion-certificate-and-download-document" class="table-of-contents__link toc-highlight">Step 6: Print document, Download completion certificate, and Download Document</a></li></ul></li><li><a href="#additional-information" class="table-of-contents__link toc-highlight">Additional Information</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/help/intro">Help</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/API-docs/v1.1">APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/contribute/intro">Contribute</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/self-host/intro">Self-host</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://discord.com/invite/xe9TDuyAyj" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.linkedin.com/company/opensign%E2%84%A2/" target="_blank" rel="noopener noreferrer" class="footer__link-item">LinkedIn<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.twitter.com/opensignhq" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.facebook.com/profile.php?id=61551030403669" target="_blank" rel="noopener noreferrer" class="footer__link-item">Facebook<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://www.opensignlabs.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Official Website<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/opensignlabs/opensign" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 OpenSign™. <br>The best Open Source DocuSign alternative.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |