메인 콘텐츠로 건너뛰기
항목을 찾을 수 없습니다.
dropboxsign 로고
Dropbox Sign을 사용해야 하는 이유
아코디언 메뉴 펼치기/접기

포함된 기능

온라인에서 문서 서명
전자 서명 만들기
템플릿 선택 또는 생성
PDF를 작성하고 서명하기
온라인 계약 체결하기
문서 관리
기능 살펴보기
오른쪽 방향 화살표 아이콘

이용 사례

영업 및 비즈니스 개발
인사
스타트업
재무 기술
부동산
온디맨드 서비스
제품
아코디언 메뉴 펼치기/접기
Dropbox 아이콘
Sign
간편한 문서 전송과 서명
Dropbox 아이콘
Sign API
워크플로에 전자 서명 통합
dropbox fax 아이콘
Fax
팩스 없는 팩스 전송
dropbox 통합 아이콘
연동
여러분이 일하는 곳이라면 어디서든 구현 가능한 Dropbox Sign
관련 자료
아코디언 메뉴 펼치기/접기
블로그
워크플로 전문 지식과 제품 소식
고객 이용 후기
실제 성과를 엿볼 수 있는 실제 스토리
도움말 센터
Dropbox Sign 제품 심층 설명
자료 라이브러리
보고서, 동영상, 정보 안내서
개발자
요금
아코디언 메뉴 펼치기/접기
Dropbox Sign 요금제
가장 적합한 요금제 찾기
Dropbox Sign API 요금제
실제 성과를 엿볼 수 있는 실제 스토리
영업팀에 문의
가입
영업팀에 문의
로그인
아코디언 메뉴 펼치기/접기
Dropbox Sign
Dropbox Forms
Dropbox Fax
무료 평가판
블로그
/
개발자

Building a Premium Branded eSignature Flow using Django and the Dropbox Sign API

by 
Julia Seidman
May 11, 2021
6
분 소요
"Building a Premium Branded eSignature Flow using Django and the Dropbox Sign API" header image
툴팁 아이콘

새로운 이름, 변함없이 강력한 성능! HelloSign이 Dropbox Sign으로 새롭게 탄생했습니다.

닫기 아이콘

When your application requires users to sign contracts and agreements, you likely want to keep the experience on your site. You can maintain control of what users see and still have the benefits of a secure eSignature platform.


Just as Django allows you to build more with less code, Dropbox Sign’s embedded eSignatures give you the tools to create a great experience, this allows your users to address their business needs in a unique and customized approach — whether it’s to improve an HR onboarding experience for new employees or to streamline contracting for a sales team. In this guide, we will be using a sample project which allows teachers in a school to have different forms signed by parents, we’ll walk you through how to create a custom premium branded eSignature flow for Django, from installing the HelloSign SDK in pip to finishing with a script import into your Django templates.


To get started, you can visit our Developer Portal and start testing for free (no credit card required).


Add Dropbox Sign to your app’s Virtual Environment and Customize with Premium Branding

You will want to create your Django project with two apps: an admin app and a user portal app.  

Inside your project’s virtual environment, install Dropbox Sign’s Python SDK.  Be sure that it is available to both the admin and user apps.


You will need to create a Dropbox Sign account to generate an API key.  You can find your API key under the API tab on the Settings page of your account.  You will also need to create a Dropbox Sign API App. In the same page where you get the key, click on “Create” in the API Apps section.  Give your API App a name and a domain. While you are in the testing phases of development, you can ignore the domain verification fields on the HelloSign dashboard or enter any URL you like, as those are only required for production uses.


Once you have created an application, you will receive a Client ID associated with that specific API App.  As a best practice, secure both your API key and Client ID in a .env file.  


By using the Premium Branding feature, you can customize the look of your Dropbox Sign eSignature experience to match your organization’s color scheme.  Using the Update API App endpoint and initiating the API call from the admin side of your Django project, specify the elements you would like to customize:


littleschool/admin/views.py

‍

You can find more information in the Premium Branding documentation


Create a Forms Page for Users

Dropbox Sign offers developers the ability to embed the signing experience directly in their websites, making the process of collecting documents with legally-binding eSignature from your clients or users feel like a seamless part of their experience on your website.


The Little School, has a website built in Django to accommodate Parent, Child, and Teacher profiles, making use of Django’s built-in auth features.  Each Parent object is associated with a specific authenticated User:


littleschool/models.py

‍

When parents log in to the school’s website, they are directed to a list of forms in the parent_portal app within the Django project file. Here, the school can post enrollment forms, field trip permission slips, and health forms.  All the files available through these links can be handled with the Dropbox Sign client, creating a centralized location for all the school’s required waivers and contracts.


If a project is set up with a relational database, including the default sqlite3, an admin user could control which forms appear on a given user profile by using the Teacher-Child relationship in models.py to send certain forms to a Parent user’s views.


Create Dropbox Sign Client and Methods

The embedding signing flow means users can view, sign, and review their contracts and waivers while still on your website.  Using Dropbox Sign’s Embedded Signing functionality allows you to display your SignatureRequests as <iframe> HTML elements and does not require any additional user accounts or authentication beyond what you already have on your site.  


Inside the parent_portal file directory, create a file called hellosignclient.py.  In this file, you will add the code to create embedded eSignature requests and display documents for signature at a unique URL.  You can create a single SignatureRequest method and reuse it for multiple forms:


littleschool/parent_portal/hellosignclient.py

‍

Here, we are using the pip package python-decouple to handle variables from our .env file.  


Then, we import the Dropbox Sign Client and Django User.  The sign_request method is a reusable method that associates the logged-in User with the request to Dropbox Sign.  

In the enrollment method, the reusable sign_request method is called and given parameters specific to the enrollment form.  Then, Dropbox Sign generates a unique ID for the signer which is passed as part of the get_embedded_object request.  The function returns the unique URL for the User’s signature.  


Display the Embedded Signature Request

If you have built your front end using Django Templates or Jinja2, you can still use Dropbox Sign's JavaScript client-facing Embedded Signature Request UI.


First, use npm to install the Dropbox Sign Embedded package.  If you are not using npm, it is still possible to install it via CDN, manual download, or by compiling from the source by visiting Dropbox Sign's wiki.  


Then, create a file called hellosign.js to call the front-end client:


littleschool/parent_portal/hellosign.js

‍

This script, which gets the signURL variable passed from views.py, can be embedded in your HTML templates, either in the <head> or <body>.  In this case, in order to make the <script> element callable from multiple templates, we’ve opted to put it in the <head> inside base.html:


littleschool/parent_portal/templates/base.html

‍

Then, from inside the `enrollment.html` template, we call the method with an onClick function:


littleschool/parent_portal/templates/enrollment.html

‍

Get Confirmation When Documents Are Signed

It’s best to monitor completion of eSignature requests in a separate admin app.  In the case of a school, this might be the app used by just the Enrollment Director, or it could be accessible to all staff.  Either way, keep this functionality separate from the parent_portal.  


Use the signature_request_id of the desired SignatureRequest to call the Dropbox Sign API for the current status using the Get Signature Request endpoint. If desired, those results can be sorted or filtered - for example, an administrator might want to see all kindergarten enrollment forms, or a teacher might want field trip forms for just the students in one class.  


Your admin app can follow a similar setup to the parent_portal, or you can locate the Dropbox Sign files - hellosign.js and hellosignclient.py in a directory where both Django apps have access, perhaps determined by the scale of your admin functionality.  Either way, the calls to the HelloSign client will use the same API credential as the parent_portal methods.  


The get_signature_request endpoints, both individual and list,  will return a signature_request object, which will contain the status of each signature:


littleschool/admin/hellosignclient.py

‍

At any point during the SignatureRequest process, you can download your files to see the current version.  To do this, you’ll need to have a file management system installed in your application, like the basic PyPi file system, fs. You can download .zip or PDF files:


littleschool/admin/views.py

‍

So long as you maintain your Dropbox Sign account, you’ll have ongoing access to your files through the API, or you can set up your system to download them and save them locally or to a cloud drive.


Dropbox Sign offers a great deal more functionality, and as your application scales, that functionality and Django’s flexibility will work together to deliver a seamless experience! To learn more about the Dropbox Sign API and start testing for free, visit Dropbox Sign’s 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 문서 서명
지원
도움말 센터영업팀에 문의지원팀에 연락쿠키 관리시작하기: Dropbox Sign시작하기: Dropbox Sign API
관련 자료
블로그고객 이용 후기자료 센터합법성 지침신뢰 센터
파트너
전략적 파트너파트너 찾기
회사
함께 일하기이용 약관개인정보 보호
Facebook 아이콘Youtube 아이콘

사용 가능한 결제 수단

Mastercard 로고Visa 로고American Express 로고Discover 로고
CPA 컴플라이언스 배지HIPAA 컴플라이언스 배지Sky High Enterprise Ready 배지ISO 9001 인증 배지

Dropbox Sign 전자 서명은 미국, 유럽연합, 영국을 비롯해 전 세계 많은 국가에서 법적 구속력을 발휘합니다.
더 자세한 정보는 이용 약관과 개인정보처리방침에서 확인할 수 있습니다.