---
title: "Creates a preview of the responsive versions of all of the documents associated with a template."
method: POST
path: "/v2.1/accounts/{accountId}/templates/{templateId}/responsive_html_preview"
tags: ["TemplateResponsiveHtmlPreview"]
---

# Creates a preview of the responsive versions of all of the documents associated with a template.

`POST /v2.1/accounts/{accountId}/templates/{templateId}/responsive_html_preview`

Creates a preview of the
[responsive](/docs/esign-rest-api/esign101/concepts/responsive/),
HTML versions of all of the documents associated
with a template. This method enables you to
preview the PDF document conversions to responsive
HTML across device types prior to sending.

The request body is a `documentHtmlDefinition`
object, which holds the responsive signing
parameters that define how to generate the HTML
version of the documents.

## Path parameters

- `accountId` string, required
- `templateId` string, required

## Request body

- DocumentHtmlDefinition — Holds the properties that define how to generate the responsive-formatted HTML for the document. See [Responsive signing](/docs/esign-rest-api/esign101/concepts/responsive/) in the [eSignature concepts guide](/docs/esign-rest-api/esign101/concepts/).
  - `displayAnchorPrefix` string — Contains text that all display anchors must start with. Using at least four characters will improve anchor processing performance.
  - `displayAnchors` DocumentHtmlDisplayAnchor[] — An object that defines how to handle a section of the HTML in signing. This property enables an incoming request to make a section of the HTML collapsible and expandable or hidden from view. A start anchor, end anchor, or both are required. If the anchors are not found, the display anchor will be ignored. For a list of the available types, see the [`display` property](/docs/esign-rest-api/reference/envelopes/envelopes/create/#schema__envelopedefinition_documents_htmldefinition_displayanchors_displaysettings_display) of the [`displaySettings` object.](/docs/esign-rest-api/reference/envelopes/envelopes/create/#schema__envelopedefinition_documents_htmldefinition_displayanchors_displaysettings)
    - `caseSensitive` boolean — When **true,** the start or end anchor strings must match the strings specified by the start and end anchor settings in case as well as in content.
    - `displaySettings` DocumentHtmlDisplaySettings — This object defines how to display the HTML between the `startAnchor` and `endAnchor`.
      - `cellStyle` string — Specifies the valid CSS-formatted styles to use on responsive table cells. Only valid in display sections of `responsive_table` or `responsive_table_single_column` types.
      - `collapsibleSettings` DocumentHtmlCollapsibleDisplaySettings — Display settings for collapsible section.
        - `arrowClosed` string — Indicates the direction of the disclosure arrow when the collapsible section is in the closed state. One of the following: - `up`: In the closed state, the disclosure arrow points up. - `down`: In the closed state, the disclosure arrow points down. - `left`: In the closed state, the disclosure arrow points left. - `right`: In the closed state, the disclosure arrow points right.
        - `arrowColor` string — A CSS color value (such as `#DCF851`) that indicates the color of the arrow.
        - `arrowLocation` string — The location of the arrow relative to the collapsible section's label. Possible values are: - `right` (default) - `left`
        - `arrowOpen` string — Indicates the direction of the disclosure arrow when the collapsible section is in the open state. One of the following: - `up`: In the open state, the disclosure arrow points up. - `down`: In the open state, the disclosure arrow points down. - `left`: In the open state, the disclosure arrow points left. - `right`: In the open state, the disclosure arrow points right.
        - `arrowSize` string — Indicates the size of the collapsible arrows. Possible values are: - `small` - `large` (default)
        - `arrowStyle` string — The name of the CSS style to be used on collapsible arrow section.
        - `containerStyle` string — The name of the CSS style to be used for the collapsible container.
        - `labelStyle` string — The name of the CSS style to be used for the collapsible container's label.
        - `onlyArrowIsClickable` boolean — When **true,** only the arrow is clickable to expand or collapse the section. When **false** (the default), both the label and the arrow are clickable. If no arrow is used, this setting is ignored.
        - `outerLabelAndArrowStyle` string — The name of the CSS style to be used for the collapsible container's outer label and arrow style.
      - `display` string — Sets the display and behavior properties. Possible values are: - `inline`: Leaves the HTML where it is in the document. This property lets you add a label or present on a separate page. - `collapsible`: The HTML in this section may be expanded or collapsed. Initially this section is expanded. - `collapsed`: The HTML in this section may be expanded or collapsed. Initially this section is collapsed. - `continue_button`: Creates a stop point in the document to draw the reader's attention before proceeding to the next section. - `responsive_table`: Turns this section into a responsive table. Note that this is only used on HTML tables that fall within the anchor start and end positions. - `responsive_table_single_column`: Turns this section into a responsive single-column table. Note this is only used on HTML tables that fall within the anchor start and end positions. The table will be converted to one single column where each current column will become a row, then stacked. - `print_only`: Do not show this portion of the HTML in the responsive signing view.
      - `displayLabel` string — The label to add to this display section in the signing page.
      - `displayOrder` integer — The position on the page where the display section appears.
      - `displayPageNumber` integer — The number of the page on which the display section appears.
      - `hideLabelWhenOpened` boolean — When **true,** the `displayLabel` is hidden when the display section is expanded and the display section is no longer collapsible. This property is valid only when the value of the `display` property is `collapsed`.
      - `inlineOuterStyle` string — Specifies the valid CSS-formatted styles to use on inline display sections. This property is valid only when the value of the `display` property is `inline`.
      - `labelWhenOpened` string — The label for the display section when it is expanded from a collapsed state. This label displays only on the first opening and is only valid with the value of the `display` property is `collapsed`.
      - `preLabel` string — Enables you to add descriptive text that appears before a collapsed section or continue button.
      - `scrollToTopWhenOpened` boolean — When **true** and the section is expanded, the position of the section-close control scrolls to the top of the screen. This property is only valid when the value of the `display` property is `collapsed`.
      - `tableStyle` string — Specifies the valid CSS-formatted styles to use on responsive tables. This property is valid only when the value of the `display` property is `responsive_table` or `responsive_table_single_column`.
    - `endAnchor` string — Specifies the end of the area in the HTML where the display settings will be applied. If you do not specify an end anchor, the end of the document will be used by default. **Note:** A start anchor, an end anchor, or both are required.
    - `removeEndAnchor` boolean — When **true,** removes the end anchor string for the Smart Section from the HTML, preventing it from displaying.
    - `removeStartAnchor` boolean — When **true,** removes the start anchor string for the Smart Section from the HTML, preventing it from displaying.
    - `startAnchor` string — Specifies the beginning of the area in the HTML where the display settings will be applied. If you do not specify a start anchor, the beginning of the document will be used by default. **Note:** A start anchor, an end anchor, or both are required.
  - `displayOrder` string — The position on the page where the display section appears.
  - `displayPageNumber` string — The number of the page on which the display section appears.
  - `documentGuid` string — The GUID of the document.
  - `documentId` string — Specifies the document ID number that the tab is placed on. This must refer to an existing Document's ID attribute.
  - `headerLabel` string — Header text or an HTML tag to place above the responsive HTML block.
  - `maxScreenWidth` string — If set, the responsive HTML version of the signing document will only display on screens with the specified pixel width or less. If the screen is larger than the value that you specify, the default PDF version of the content displays instead. This setting can also be configured at the account level.
  - `removeEmptyTags` string — Holds a comma-separated list of HTML tags to remove if they have no text within their node (including child nodes).
  - `showMobileOptimizedToggle` string — When **true** (the default), the **Mobile-Friendly** toggle displays at the top of the screen on the user's mobile device. When **false,** the toggle will not be displayed. the **Mobile-Friendly** toggle lets the user switch between the mobile-friendly and the PDF versions of a document. For example, the recipient can use this toggle to review the document using the PDF view before they finish signing.
  - `source` string — Specifies the type of responsive signing that will be used with the document. If the value of this property is valid HTML, and the [smart sections feature][] is enabled, the HTML code is used to display the signing page: ``` source: "<html> ... <body><p>hello world</p></body></html>" ``` If the value of this property is the string `document`, the HTML signing page is generated from the provided document. ``` source: "document" ``` **Related topics** - [How to create a signable HTML document](/docs/esign-rest-api/how-to/creating-signable-html/) - [How to convert a PDF file into a signable HTML document](/docs/esign-rest-api/how-to/converting-pdf/) - [Responsive signing](/docs/esign-rest-api/esign101/concepts/responsive/) [smart sections feature]: https://support.docusign.com/s/document-item?bundleId=gbo1643332197980&topicId=qlx1578456478178.html

## Response `201`

Successful response.

## Other responses

- `400` — Error encountered.

---

[API](https://skmtc.net/docusign/apis/docusign-esignature-rest-api.md) · [All operations](https://skmtc.net/docusign/apis/docusign-esignature-rest-api/llms.txt) · [OpenAPI document](https://skmtc-service-staging.skmtc.workers.dev/v1/apis/docusign/docusign-esignature-rest-api/versions/77f1998c313d/schema)