> You are reading the Docusign Developer Documentation. For clean Markdown of any page, append .md to the page URL.
>
> Documentation indexes by section:
> - APIs and SDKs: https://docusign.docs.buildwithfern.com/docs/llms.txt
> - Platform 101: https://docusign.docs.buildwithfern.com/platform/llms.txt
> - Extension Apps: https://docusign.docs.buildwithfern.com/extension-apps/llms.txt
> - Docusign CLI: https://docusign.docs.buildwithfern.com/docusign-cli/llms.txt
>
> Authentication (OAuth, JWT Grant, M2M): https://docusign.docs.buildwithfern.com/platform/auth
> Webhooks and Connect: https://docusign.docs.buildwithfern.com/platform/webhooks
>
> OpenAPI specifications: https://docusign.docs.buildwithfern.com/openapi.json
> MCP server: https://docusign.docs.buildwithfern.com/_mcp/server

# How to customize an elastic template's appearance

> See how to use a style attribute to customize the appearance of your elastic template.

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](/docs/click-api/how-to/embed-elastic-templates).

## Required data

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

| Data element      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| \{API_ACCOUNT_ID} | A [GUID](http://guid.one/) 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](https://admindemo.docusign.com/authenticate?goTo=appsAndKeys) 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](http://guid.one/) 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](/docs/click-api/how-to/retrieve-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](/docs/click-api/how-to/embed-elastic-templates), 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](/docs/click-api/click101/customize-elastic-template-appearance).

**`HTML`**

```html title="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

* See [Customize elastic template appearance](/docs/click-api/click101/customize-elastic-template-appearance).
* See details on [How to activate an elastic template](/docs/click-api/how-to/activate-elastic-template).
* See how to [Go-Live](/docs/click-api/go-live) with a completed app and find the base path for API calls in the production environment.