Skip to navigation
How-to guides

How to customize an elastic template's appearance

View as Markdown

This topic demonstrates how to use the Click API to customize the appearance of an existing elastic template when embedding it in your website.

You perform this step after you follow the steps in How to embed an elastic signing agreement.

Required data

Running the code in this how-to requires this data:

Data elementDescription
{API_ACCOUNT_ID}A GUID value that identifies your account. This value is automatically generated by Docusign for any account you create. Copy the value from the API Account ID field on the Apps and Keys page.
{BASE_PATH}A string value that forms the root of the URL required to make API calls. The base path value in the example code is set to target the developer environment at
https://<domain>/clickapi
Where <domain> is demo.docusign.net for the developer environment and is the result of the GetUserInfo call in production.
{CLICKWRAP_ID}A GUID value that identifies an individual elastic template. You can obtain this value by following the steps in How to get a list of elastic templates.
{CLIENT_USER_ID}A unique identifier for a user that should originate from your own system. Docusign uses this value to identify each user. Note that:
  • This value can be anything your backend system will use to track individual users. Examples include employee IDs, email addresses, and surrogate key values.
  • The Click API uses the client user ID, API account ID, and clickwrap ID to track which users have already accepted an elastic signing agreement.
  • An elastic template agreement will not appear again after it has been accepted with a given client user ID. The client user ID needs to be updated to a new, unique value each time the elastic template is embedded.
{ENVIRONMENT}The URL base path that generates the iframe for the elastic template.
Source (src)The URL for the docusign-click.js file that handles authentication, elastic template rendering, and elastic template tracking. Set this value to https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js.

Add a ‘style’ attribute to your HTML for embedding the elastic template

As you can see in How to embed an elastic signing agreement, embedding an elastic signing agreement requires two <script> tags: one that calls the Docusign Click JavaScript library, and another that specifies the elastic template to be embedded.

To customize your elastic template’s appearance, you add a style attribute to the second <script> tag, passed to the Clickwrap.render method. This style attribute contains optional fields that can be used to customize the appearance of the elastic template.

Elastic templates can only be customized when embedded in a website (you cannot customize the appearance of a clickwrap using the API). For a full list of elements and properties that you can customize within an elastic template style attribute, see Customize elastic template appearance.

HTML
<div id="ds-terms-of-service"></div>
<script src="https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js"></script>
<script>docuSignClick.Clickwrap.render({
    environment: 'https://demo.docusign.net',
    accountId: '9baa6115-xxxx-xxxx-xxxx-7088b86be96d',
    clickwrapId: '7b0834f3-xxxx-xxxx-xxxx-98551d014e3e',
    clientUserId: 'UNIQUE_USER_ID',
    style: {
        header: {
          display: 'none'
        },
        container: {
          backgroundColor: '#fff',
          borderWidth: '0'
        },
        agreementStatement: {
          fontWeight: 'normal'
        },
        documentLink: {
          color: '#333',
          fontWeight: 'normal',
        },
        agreeButton: {
          boxShadow: '0 2px 2px 2px rgba(0, 0, 0, .2)',
          height: '40px',
          width: '100%',
          margin: '10px 0',
          padding: '3px 0',
          fontSize: '16px',
          fontWeight: 'bold',
          fontFamily: 'Helvetica, Arial, sans-serif',
          textDecoration: 'underline',
          backgroundColor: 'red',
          borderRadius: '20px',
        }
    }
}, '#ds-terms-of-service');
</script>

Next steps