Пропустить и перейти к основному содержимому
Элементы не найдены.
Логотип Dropbox Sign
Почему именно Dropbox Sign
Развернутый или свернутый графический элемент «Аккордеон»

Что вы можете сделать

Подписать документы онлайн
Создание электронных подписей
Выберите или создайте шаблоны
Заполнить и подписать документы PDF
Подготовить онлайн-контракты
Управление документами
Подробнее о функциях
Значок «Стрелка вправо»

Примеры использования

Продажи и развитие бизнеса
Отдел кадров
Стартапы
Финансовые технологии
Недвижимость
Услуги по запросу
Продукты
Развернутый или свернутый графический элемент «Аккордеон»
значок Dropbox
Sign
Легко и удобно отправляйте и подписывайте документы
значок Dropbox
Sign API
Интегрируйте электронные подписи в свой рабочий процесс
Значок Dropbox Fax
Fax
Отправляйте факсы без использования факсимильного аппарата.
Значок интеграций Dropbox
Интеграция
Мы всегда там, где вам это необходимо
Материалы
Развернутый или свернутый графический элемент «Аккордеон»
Блог
Организация процессов и новости о продукции
Истории наших клиентов
Реальные истории с реальными результатами
Справочный центр
Подробные руководства по нашим продуктам
Библиотека ресурсов
Отчеты, видеоролики и информационные документы
Разработчикам
Тарифы
Развернутый или свернутый графический элемент «Аккордеон»
Тарифы Dropbox Sign
Выберите подходящий для вас тарифный план
Тарифы Dropbox Sign API
Реальные истории с реальными результатами
Отдел продаж
Зарегистрироваться
Обратиться в отдел продаж
Войти
Развернутый или свернутый графический элемент «Аккордеон»
Dropbox Sign
Dropbox Forms
Dropbox Fax
Бесплатный ознакомительный период
Блог
/
Разработчикам

Building a Custom Branded eSignature Flow Using Vue.js

by 
Cory Shrecengost
13
мин. на чтение
значок подсказки

Обновленный внешний вид, тот же великолепный продукт! HelloSign теперь называется Dropbox Sign

значок «закрыть»

eSignatures are quickly becoming the primary way of signing important documents like non-disclosure agreements(NDAs), financial contracts, and onboarding documents digitally and remotely.

‍

The Dropbox Sign API is an advanced, customizable eSignature API service that makes implementing digital signatures in your app a breeze. To learn more about what Dropbox Sign (formerly known as HelloSign) can offer you, check out their Dropbox Sign developer portal.

‍

This article will show you how to use the Dropbox Sign API to implement an eSignature flow in your Vue.js app. If you want to, you can follow along with this GitHub repo.

‍

‍

Implementing a custom eSignature flow

If you’re running a software development company and want to hire remote employees or freelancers to grow the business, you’ll need a way for people to sign documents like NDAs and employment contracts. That’s where the Dropbox Sign API can help. With it, you can easily integrate eSignatures into your Vue.js frontend, creating a cohesive, centralized app for all your paperwork.

‍

Initial setup

To get started, make sure you have the most recent versions of Node.js (>=8) and a package manager like npm, Yarn, or pnpm installed. Then, create both backend and frontend folders to house your app.

‍

The backend for this eSignature flow is a simple Express app that uses the Dropbox Sign Node.js SDK. To install the necessary dependencies, go to the backend folder and run:

‍

‍

The frontend is powered by Vite and Vue.js. This means the resulting app will perform well and allow for fast development. In addition to that, you’ll use the HelloSign Embedded library to embed the HelloSign form.

‍

In the frontend folder, initiate a Vite project and install the necessary HelloSign dependency with the following commands:

‍

‍

Dropbox Sign API key

Before getting into the code, you’ll have to create your Dropbox Sign account and obtain your API key.

‍

If you don’t already have one, create a Dropbox Sign account and sign in.

‍

Inside the dashboard, go to the Integrations section > API tab to retrieve your API key. You’ll use it to connect to Dropbox Sign from the backend.

‍

‍

Integrating Dropbox Sign with the backend

With the API key available, you can start working on the backend.

‍

First, create an `index.js` file and initiate the Dropbox Sign Node.js SDK, providing your API key:

‍

‍

Using the SDK and its `signatureRequest.send()` method, you should be able to upload and send any document that needs to be signed.

‍

If you’re still in the testing phase, make sure to include the `test_mode: 1` property in the config object. It indicates that the integration is currently being tested (signing is not legally binding) and you can test all of the platform’s features freely before moving to production.

‍

‍

To test the code above, ensure you’ve got an example `nda.pdf` file in the backend folder and run it with the `node index.js` command. If the test was successful, the signature request would be sent to the provided email, and API response would be outputted to the console. Additionally, the document will appear in your Dropbox Sign dashboard in the Documents section.

‍

The `signatureRequest.send()` method sends the locally-stored document for signing to recipients’ emails with the provided details. This is the simplest approach to sending an eSignature request, however, it won’t scale well or look good. The document file will have to be uploaded every time a signature is requested and the signature area will be loosely added at the end of the document.

‍

To improve on that, you can use Dropbox Sign Templates.

‍

Dropbox Sign Templates

‍

Templates are reusable documents for multiple signings. Not only that, you can use them with the Dropbox Sign editor, which lets you set the location of the signature as well as other fields.

‍

To create a template, from the side menu, go to the Templates section and click Create template.

‍

Upload your document and go through the template setup process. Pay close attention to the Who needs to sign? panel, as the provided role(s) will be used later with the API.

‍

When you’re done, return to the dashboard and retrieve the template ID:

‍

With the template ready, return to the backend and adjust the code:

‍

‍

To send a signature request using a template, you’ll have to use the `signatureRequest.sendWithTemplate()` method. Also, inside the config object, make sure to include the `template_id` and `signers.role` properties from the Dropbox Sign dashboard. The `files` property is no longer needed, since this time you don’t upload any files.

‍

With this change, your signature requests are now more scalable and reusable. They’re also much cleaner, thanks to the modifications made with the Dropbox Sign editor.

‍

However, the backend still only uses Dropbox Sign to send signature requests via email. While it’s easy and secure, it’s inherently separate to your frontend. For a more seamless, unified experience for your new employees, you should embed the eSignature form on your frontend with the HelloSign Embedded library.

‍

‍

The frontend

For this example, the frontend won’t be anything fancy. All the UI and frontend logic will fit into the `src/App.vue` file:

‍

‍

The above code sets up the app’s UI and state. Refs like `signed` are used to indicate the app’s current state, allowing for the conditional rendering of related UI elements. On top of that, to make things look prettier, some CSS was added.

‍

To run the Vite development server, in the frontend folder run:

‍

‍

The result should look like the following:

‍

Now it’s time to use the HelloSign Embedded library to implement embedded signing. This will require some configuration on both the backend and the frontend, as well as in your Dropbox Sign dashboard.

‍

Configuring the Vite Proxy

‍

First, you’ll have to connect the frontend with the backend to be able to access them both from a single host. For development purposes, it’s recommended to use Vite’s built-in proxy to avoid any issues with CORS. You can enable it from the `vite.config.js` file:

‍

‍

The above configuration proxies all requests to `/api/` path from your frontend to `/` path on your backend.

‍

Creating the Express Server

‍

Now, get back to your backend and start implementing the Express server:

‍

‍

Currently, all that’s needed is the `/callback` route. It’ll be provided in the Dropbox Sign dashboard as the URL to be called for every event that occurs during the signing process. In this example, the endpoint won’t be used much and it simply responds with `“Hello API Event Received”`. The Dropbox Sign API requires this string to confirm that the callback URL works correctly.

‍

You can now start the backend and the frontend with `node index.js` and `npm run dev` commands from their respective folders.

‍


Creating a Dropbox Sign API app

To use the HelloSign Embedded library and related API endpoints, you’ll have to create a Dropbox Sign API App and retrieve its Client ID. To do so, go back to the Integrations > API page in the Dropbox Sign dashboard. From there, click the Create button next to API apps to start configuring your app.

‍

To create an API app, you’ll need a domain or subdomain and a publically accessible event callback URL. Thanks to Vite proxy, your backend and frontend are already available under a single host. However, it’s more than likely that your localhost isn’t publically available.

‍

In this case, the best solution is to use a localhost tunnel like Ngrok. Follow Ngrok’s official setup guide and tunnel the port your Vite development server is running on. With binary downloaded, the whole process comes down to just two commands:

‍

‍

The first command above authenticates you with your Ngrok account, while the second one tunnels the selected port(`3000` being the default port for Vite).

‍

With the tunnel running, enter its address followed by /api/callback/ subpath in the Event callback field.

‍

Customize other aspects of your API app like branding or the app’s name and click Create Application. The app should now be listed on the API page, with its Client ID next to it.

‍

‍

Apply branding to the API app
‍

Retrieving the embed URL

With Client ID ready, you can now get back to your backend.

‍

First, for the embedded signing to work, you have to initialize it on the backend and retrieve the embedded sign URL. That procedure is similar to sending a signature request through email, as you did before, with only a few changes. The method to use here is `signatureRequest.createEmbeddedWithTemplate()`:

‍

‍

The method receives a config object but with the required `clientId` property. Next up, the signature ID is extracted from the response. While there’s only one in the example, there will always be as many signature IDs as there are signers.

‍

Then, the signature ID is passed on to the `embedded.getSignUrl()` method, the response of which contains the embed URL. Finally, the endpoint responds with a JSON object containing the URL.

‍


Embedding the signature request on the frontend

Having everything set up, you can now return to the frontend to finish the integration process. In the `src/App.vue` file, import the HelloSign Embedded library and create a helper function for fetching the embed URL from the backend:

‍

‍

Inside `setup()`, initialize the library client with your client ID. If you’re in the development stage, set the `testMode` property to `true` to skip domain verification:

‍

‍

To open the embedded form, call the `open()` method on the client, passing the embed URL. The client instance also has event-emitter methods like `on()`, `once()`, and `off()`. In the example above, the `once()` method callback updates the UI when an error happens, or the signing process is completed.

‍

The app is now integrated with the Dropbox Sign API, and you can start accepting new employees.

‍

Keep in mind that for production use you’ll need a paid Dropbox Sign plan. On top of that, if you decide to implement an embedded eSignature flow, you’ll have to adhere to certain regulations and security guidelines. To ensure that you do so, Dropbox Sign requires you to go through an app review process before going to production.

‍

‍

Conclusion

In this article, you’ve learned how to implement a complete eSignature flow inside your Vue app with Dropbox Sign. You’ve explored the Dropbox Sign API and laid the groundwork for future expansion of the eSignature feature inside your app.

‍

Dropbox Sign is a full-fledged solution for all your eSignature needs. With its API, you can implement various eSignature flows with emails, or embedded on your custom frontend, in just a couple lines of code. Try Dropbox Sign for free and explore more with the Dropbox Sign developer portal.

‍

Будьте в курсе всего

Готово. Проверьте входящую почту.

Thank you!
Thank you for subscribing!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum
Значок «Стрелка вправо»
значок «закрыть»

Up next:

Изображение крупным планом рукописной подписи, представляющее современные решения для цифровой подписи.
Разработчикам
15
мин. на чтение

Интеграция Dropbox Sign с Ruby on Rails: пошаговое руководство

Изображение крупным планом рукописной подписи, представляющее современные решения для цифровой подписи.
Разработчикам
15
мин. на чтение

Dropbox Sign vs. SignNow for developers

Интерактивное содержимое

Инструмент улучшения рабочего процесса в отделе продаж

Продукты
Dropbox SignDropbox Sign APIDropbox FaxИнтеграция
Почему именно Dropbox Sign
Электронные подписиПодписать документыЗаполнение и подписание PDFКонтракты в электронной формеСоздание электронных подписейРедактор подписиПодписать документы Word
Поддержка
Справочный центрОтдел продажОбратитесь в службу поддержкиУправление файлами cookieНачало работы с Dropbox SignНачало работы с Dropbox Sign API
Материалы
БлогИстории наших клиентовРесурсный центрРуководство по соблюдению законовЦентр управления безопасностью
Партнеры
Стратегические партнерыПоиск партнеров
Компания
ВакансииУсловияПолитика конфиденциальности
значок Facebookзначок Youtube

Принимаемые способы оплаты

Логотип MastercardЛоготип VisaЛоготип American ExpressЛоготип Discover
Значок соответствия требованиям CPAЗначок, соответствующий требованиям закона HIPAAЗначок Sky High Enterprise ReadyЗначок, сертифицированный по стандарту ISO 9001

Электронные подписи Dropbox Sign являются юридически обязывающими в США, Европейском Союзе, Великобритании и во многих странах мира.
Более подробную информацию вы найдете в наших Условиях и Политике конфиденциальности