メイン コンテンツにスキップする
該当する項目はありません。
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
無料トライアル
公式ブログ
/
開発者向け情報

Dropbox Sign でセールス見積書を動的に生成

by 
Ravgeet Dhillon
January 12, 2023
9
分(記事閲覧時間)
Dropbox Sign でセールス見積書を動的に生成している様子のエディトリアル イラスト
ツールチップのアイコン

新しい名前でも変わらぬ高品質!HelloSign の名称が Dropbox Sign になりました。

閉じるアイコン

Creating and sending price quotes is a necessary part of business, but it can also be a laborious process, especially if the sales team sends out multiple quotes daily. You can make things easier on yourself and your sales team by automating your sales quote generation. An excellent way to do that is by using the Dropbox Sign API.


Dropbox Sign allows you to create and send bulk templates, as well as generate dynamic documents such as sales quotes. In this tutorial, you’ll create a command line utility for generating sales quote documents using the Dropbox Sign API. You’ll pass input data as command line arguments, creating emailed sales quote documents that customers can sign digitally.


What Is Dropbox Sign?

Dropbox Sign is an eSignature solution that offers one of the fastest ways to send and receive legally valid electronic signatures. Individuals and companies can use it to quickly and securely complete online employment contracts, insurance documents, and other paperwork, while developers can use the API to create custom workflows. Dropbox Sign integrates with Salesforce, Slack, and Dropbox, among other apps.


Using Dropbox Sign, you can create a template that can be used to create new signature requests as needed. If you decide to update the template, you can change the UI without making any changes to your code. Dropbox Sign has a dedicated developer support team that can assist you with any questions you encounter while building your integration.


Prerequisites

Here is what you’ll need for this tutorial:

  • Node.js (this tutorial uses Node v14.18.2)
  • A Dropbox Sign account

‍

How to prepare to create dynamic sales quotes with Dropbox Sign

‍

Creating the template

First, create a sales quote template. This tutorial uses Google Docs, but use any tool you’re comfortable with. You can also copy this sales quote template, modify it according to your needs, and download it as a PDF.


Setting up Dropbox Sign

Next, set up your template in Dropbox Sign and get your Dropbox Sign API key.


Adding a template in Dropbox Sign

Log in to your Dropbox Sign account. On the Dropbox Sign homepage, click Create a Template.

‍

Upload the PDF of your template and click Next.


Add a Signer role and give it a Role title of `Client`. Click Next.

‍

From the Standard fields, drag and drop a Textbox and add it in front of the Quote ID. From the right sidebar, set Assigned to to `Sender`.

‍

Set the Merge field to `quote_id` so that you can refer to this field when using the API.

‍

Add the other fields and set their corresponding Assigned to and Merge field names as shown below:


For the textbox under the Prepared By field, set the Assigned to to `Me (now)` and set its value to any name—in this case “John Doe”. The value provided here will remain on the document as is, and will be shown on any signature requests created using this template. This value is non-editable via the API, but can be changed by editing the template via the UI. Please note that editing this value will not update the value shown on signature requests created with this template prior to the change being made.


Your Dropbox Sign template should look like the example below. The pink fields are merge fields, and you can set their values using the API. The blue fields must be filled in by the customer.

‍

Review your template, then give it a Template title and an optional Message.

‍

Your template is now created. You’ll get a template ID in the confirmation dialog box, which you’ll need for your Node.js application.

‍

Getting a Dropbox Sign API key

To connect with the Dropbox Sign API, you need an API key. Go to Settings and select the API tab.

‍

Click the Create key button to create your API key.

‍

Setting up a Node app

Next, you’ll set up your Node application. Open your terminal and navigate to a path of your choice. Run the following command to create a project directory (`dynamic-sales-quote`):

mkdir dynamic-sales-quote

‍

You’ll need to install the following npm packages for this application:

  • hellosign-sdk allows you to work with Dropbox Sign APIs programmatically.
  • dotenv allows you to read environment variables from the .env file.
  • minimist allows you to parse arguments passed via the command line to Node.js.
  • uuid allows you to create universally unique IDs.

To install these packages, run the following command in your terminal:

npm i hellosign-sdk dotenv minimist uuid

‍

Next create a `.env` file at the root of your project and add the following environment variables:


HELLOSIGN_API_KEY=<YOUR_HELLOSIGN_API_KEY>
HELLOSIGN_TEMPLATE_ID=<YOUR_HELLOSIGN_TEMPLATE_ID>

‍

Replace `<YOUR_HELLOSIGN_API_KEY>` and `<YOUR_HELLOSIGN_TEMPLATE_ID>` with the appropriate values.

‍

Creating dynamic sales quotes using the Dropbox Sign API

In your project’s root directory, create a `src` directory. In that directory, create an `index.js` file. In the `index.js` file, add the following code:



// 1
require('dotenv').config();
const hellosign = require('hellosign-sdk')({ key: process.env.HELLOSIGN_API_KEY });
const argv = require('minimist');
const { v1: uuidv1 } = require('uuid');


This will import the required npm packages `dotenv`, `hellosign`, `argv`, and `uuid`.

Next, add the following code to the `index.js` file:

‍

...

// 1
let { title, subject, message, name, company, email, price } = argv(process.argv.slice(2));

// 2
title = title ?? 'Web Development Project';
subject = subject ?? 'Freelance Sales Quote';
message = message ?? 'Please sign this sales quote to get started with me.';
name = name ?? 'Alice Wonder';
company = company ?? 'Foobar Inc.';
email = email ?? 'abc@example.com';
price = price ?? 500;


In the above code:


  1. You destructure the command line arguments.
  2. You use the null coalescing operator (`??`) to provide a default value for each of the variables in case they are undefined.

Add the following code to the `index.js` file:

‍



...

// 1
const options = {
  // 2
  test_mode: process.env.NODE_ENV !== 'production' ? 1 : 0,
  // 3
  template_id: process.env.HELLOSIGN_TEMPLATE_ID,
  title: title,
  subject: subject,
  message: message,
  // 4
  custom_fields: [
    {
      name: 'quote_id',
      value: uuidv1(),
    },
    {
      name: 'customer_name',
      value: name,
    },
    {
      name: 'customer_company',
      value: company,
    },
    {
      name: 'price',
      value: price,
    },
    {
      name: 'total',
      value: price,
    },
  ],
  // 5
  signers: [
    {
      email_address: email,
      name: name,
      role: 'Client',
    },
  ],
};

‍

In the above code:

  1. You specify the options for making a signature request using the Dropbox Sign SDK.
  2. You specify the `test_mode` value based on whether the application is running in production.
  3. You specify the `template_id` by reading its value from the environment variables (`process.env.HELLOSIGN_TEMPLATE_ID`).
  4. You specify the values for each of the merge fields (`custom_fields`) that you defined in the template. The `custom_fields` specified in your request will be used to map values of custom fields to the merge fields on your document with identical names.
  5. You specify the signers with the Client role to whom you want to send the signature request.

Finally, add the following code in the `index.js` file:



...

// 1
async function index() {
  try {
    // 2
    await hellosign.signatureRequest.sendWithTemplate(options);
  } catch (err) {
    console.error(err);
    return;
  }
}

index();

‍

In the above code:

  1. You define the main function (`index`) of the application.
  2. You create a templated signature request (`signatureRequest.sendWithTemplate`) using the Dropbox Sign SDK (`hellosign`) and pass the options to it.

Your code is complete and ready to be tested.

Testing the App

To test your Node.js application, run the following command in your terminal and pass the arguments according to your needs:

‍

node src/index.js --email=john@example.com --price=1000

‍

You should see a signature request in the signer’s email account:


Open the email and click REVIEW & SIGN.


You’ll see a dynamically generated sales quote and two fields to complete: Name and Signature under the Service Receiver column.


After filling in the required details, click Submit. Your document is now signed.


Conclusion

As you’ve seen in this tutorial, the Dropbox Sign API and Node.js can help you automatically generate sales quote documents for your sales team. By creating a command line utility, you can pass input data as command line arguments. You can use this utility with your CI/CD service or automation tools, or even link up with Google Sheets to send your company’s signature request to multiple customers at once. You should be able to complete the tutorial in under ten minutes.

‍

Dropbox Sign has a lot to offer your company, from its multiple features to its exceptional developer support. You can start building custom document generation workflows by testing the Dropbox Sign API for free.

効率を維持

完了しました。受信トレイをご確認ください。

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 Sign の eID(電子身分証明書)と署名者認証

製品
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 の電子署名は、米国、欧州連合、英国などを含め、世界中の多くの国で法的に有効です。
詳細については、利用規約およびプライバシー ポリシーをご覧ください。