Help Rental Agents Create Fast, Legal Rental Agreements

"Help Rental Agents Create Fast, Legal Rental Agreements" header

Rental agents at property management companies need signed rental agreements to seal deals -- the quicker the better. However, a satisfactory renting experience goes a long way, and property owners can’t underestimate the value of simplifying the act of lease signing. On top of helping to seal the deal with new tenants, it also helps keep vacancies at a minimum and maintain healthy occupancy rates. So, who to better equip with the tools they need to get the job done but the rental agent—the face that welcomes a family into their new home.


Rental agents already need to juggle a lot! On top of providing professionalism and care to new tenants, they also need to keep messy leasing paperwork in good order. By adopting a digital eSignature flow to streamline the rental agreement process, agents are able to close transactions faster, be more productive, and manage more important things like being available for showings and providing great customer service.


In this article, we’ll demonstrate how a developer for a property management company can simplify the leasing process for agents and customers alike, and walk you through beneficial features like embedded templates and white labeling.

Empower your Agents to Create Templates

Common rental forms can be set up quickly through the use of embedded templates. You can make use of the HelloSign API to give agents the ability to edit and finalize templates based on files you have added. Templates are perfect for agents in charge of properties with multiple tenants, as all those tenants would be signing the same form.


We'll be making requests to the API using the HelloSign Python SDK. Install the SDK and import it within a Python environment:

  
    from hellosign_sdk import HSClient
  

Now let's get you set up with the HelloSign API. By doing this setup after you are already in your Python environment, you can easily insert the information you need as you acquire it. Of course, in normal situations, you should make use of environment variables for your credentials.


First, you'll need to create a HelloSign account. Once you have an account, you'll need to retrieve your API key from the settings page. Declare it as such:

  
    your_api_key = '<YOUR_API_KEY>'
  

After you've got that piece of information, you need to create an API app. Creating apps is typically done on the dedicated webpage, but there is a Create API App endpoint if you prefer.

When you create an app, you'll be shown a Client ID. Grab that and keep it handy.

  
    your_client_id = '<YOUR_CLIENT_ID>'
  

Now you have everything you need to use the Create Embedded Template Draft endpoint. This endpoint is what you'll use to allow agents to set up the template in the editing stage for their own use.

  
    client = HSClient(api_key='your_api_key')
    files = ["/docs/nda.pdf"]
    signer_roles = [
        {'name': 'Tenant', 'order': 1},
    ]
    cc_roles = ['Property Management']
    merge_fields = [{'name':'tenant', 'type':'text'}]
    template_draft = client.create_embedded_template_draft(
        client_id=your_client_id,
        signer_roles=signer_roles,
        test_mode=True,
        files=files,
        title='Rental Agreement',
        subject='Please Sign Here!',
        message='Let us know if you have any questions!',
        cc_roles=cc_roles,
        merge_fields=merge_fields
    )
  

Once the call is successful, you'll need to extract some information from the response object. You need the `edit_url` to give agents the ability to edit the template and you need the `template_id` to give users the ability make a signature request using that template on your site.

  
    edit_url = template_draft.edit_url
    template_id = template_draft.template_id
  

The `edit_url` is what you need to pass on to your front end, along with your client ID. If you want to stick with Python, you could use Django. In this case, we'll be showing you how to use plain JavaScript. This way, you can use an HTML webpage and just place the following code in the `<script>` tag.


We recommend installing HelloSign Embedded with npm.

  
   npm install hellosign-embedded    
  

You can create a new HelloSign Embedded client using your Client ID. Call the open() method with the `edit_url` you passed from your backend. If you’re developing locally, you’ll want set `skipDomainVerification: true` for easier development. In production, this adds a layer of security.

  
    import HelloSign from "hellosign-embedded";
    const client = new HelloSign({
     clientId: your_client_id
    });
    client.open(edit_url, {
     skipDomainVerification: true
    });
  

This code snippet will display the HelloSign signing experience embedded iFrame, giving the user the ability to edit and finalize the template they’ll be using to send signature requests to tenants. Now let's look at what happens when those agents try to create templates based on your code.

Building with Embedded Templates

With embedded templates integrated into your web app, your company's rental agents will be shown document preparation screen similar to the one below.

Image of HelloSign embedded template page
HelloSign embedded template page

Here, they will be able to set up the template exactly how they want to, within the parameters you have given them. To make it as easy as possible for everyone involved in the eSignature process, information can be pulled in from the app and filled in for each specific user, such as their name. This way they don't even have the option of messing it up!


This auto-fill functionality can be expanded further by creating a template draft with merge fields, where you can supply any sort of custom information as long it matches the data found in the app.


Once rental agents have placed the chosen text boxes and signatures where they would like, the template can be used to send both embedded and non-embedded signature requests from your web app.


Embed User Signing into your portal

Using the template created by the rental agents, you can embed the signing experience into your portal for the tenant to sign. Grab the `template_id` from the new rental template and send a call to the Send Embedded Signature Request with Template endpoint in the embedded signing flow.

  
    client.send_signature_request_embedded_with_template(
        test_mode=True,
        client_id='b6b8e7deaf8f0b95c029dca049356d4a2cf9710a',
        template_id=template_id,
        title='Rental agreement with tenant',
        subject='Your rental agreement with Awesome Properties',
        message='Please sign this rental agreement',
        signers=[{ 'role_name': 'Tenant', 'email_address': 'jack@example.com', 'name': 'Jack'}],
        ccs=[{ 'role_name': 'Property Management', 'email_address': 'helloworld@hellosign.com' }],
    )
  

Similar to what you did with the Create Embedded Template Draft endpoint, you then pass the temporary url from the response object of that call (except this time it's a `signing_url` instead of an `edit_url` ) to your front end, where it’s embedded in an iFrame.


What will the signing experience look like? Thanks to HelloSign’s white labeling functionality, applications that make use of embedded signature requests can have custom aesthetics that match the rest of the page.

Customize Your Website's Signer Pages

You can configure white labeling by using the Update API App endpoint. This endpoint gives you the ability to update many aesthetic attributes of your app, including things like the app name and a custom logo. The white labeling experience also gives you granular control over the colors. Does your marketing department insist that all product material have the exact shade of red that is part of the company's brand? Well, you can add that red to the HelloSign embedded appearance using its hexadecimal code.


For example, this call to the API changes the name, the logo picture, and the primary button text color to new values.

  
    client.update_api_app(
      client_id=my_client_id,
      name = 'new-name',
      custom_logo_file = 'blank.png',
      white_labeling_options ={
        "primary_button_text_color": "fdfdf6"
      }
    )
  

You can customize the color of a vast array of elements on the page. For the full list, be sure to see the White Labeling Guide. You can see examples of all of the customizable elements in the following sample snapshot of the white labeling signature process.

Image of HelloSign white labeling guide
Image of HelloSign white labeling guide

If you want to play around with the white labeling customization experience without setting up your whole application, you can take advantage of our Embedded Testing Tool. When it all comes together, you'll end up with an experience that looks like it was built from the ground up just for your company.


Delight rental agents and tenants with embedded features

With the embedded template flow, you have given your rental agents the power to quickly create templates that can be used in the eSignature process. By adding embedded signing, you’ve given tenants the ability to sign the documents directly on your website.


Congratulations on setting up eSignatures for your rental agents! They’re sure to appreciate the speed and flexibility this new digital process offers. For more information on everything HelloSign, including signature requests and signing, be sure to check out the developer portal.

Ready to integrate signatures into your app or website?

Let us help you build a custom API plan that fits your unique business needs.

Get news, insights and posts directly in your inbox

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Oops! Something went wrong while submitting the form.