Setting tabs in HTML documents

When you create an HTML document for a Advanced responsive signing workflow, you can set tabs for that document in one of two ways:

• Adding HTML blocks that contain the tab definitions to the document’s HTML source. Each Docusign tab has a corresponding HTML tag that you can use to add and configure that tab within the document definition.
• Embedding JSON markers into the HTML that represents tabs. These markers will be replaced by tabs when the document is processed.

Note: Only inline styles will be reflected in the processed document. Any styles defined outside the page, such as <style> tag elements in the <head> section or CSS, will not be applied.

Define tabs as HTML

You can configure the properties of the tabs you have added as HTML elements using attributes. Any value set in this way will override the tab’s default values.

{
  "recipients": {
    "signers": [{
      "name": "Example J. Simpson",
      "email": "ejs@example.com",
      "recipientId": "1",
      "routingOrder": "1"
    }]
  },
  "status": "sent",
  "emailSubject": "Please DocuSign: Contract",
  "documents": [{
    "name" : "Example contract",
    "documentId" : "1",
    "htmlDefinition": {
      "source": "<div><div><button data-ds-type=\"approve\" name=\"Approve\" title=\"I agree\">I Agree</button><p>I agree to the terms of this contract.</p></div><ds-signature data-ds-recipient-id=\"1\" name=\"signature\"></div>"
    }
  }]
}

Define tabs as JSON markers

Instead of defining tabs as HTML, you can embed JSON markers referencing your tab definitions directly into the document’s HTML source. These markers will be replaced by tabs when the document is processed.

Each JSON marker contains one element, tabLabel, which indicates which tab will be placed. Each tabLabel should have a unique value and must match one of the tab definitions set in the API request, as shown in the associated example definition:

JSON marker Radio tabs

Radio tabs use a unique behavior. When placing a radio tab, the JSON must include the groupName and value properties, which must map to a radio button within a group, as shown in the example below.

Inline JSON marker:

  {{"groupName": "myRadio", "value": "radio1"}}
  {{"groupName": "myRadio", "value": "radio2"}}

{
  "recipients": {
    "signers": [
      {
        "name": "Example J. Simpson",
        "email": "ejs@example.com",
        "recipientId": "1",
        "routingOrder": "1",
        "tabs": {
          "approveTabs": [
            {
              "name": "Approve",
              "tabLabel": "exampleApproveTab",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1"
            }
          ],
          "signHereTabs": [
            {
              "name": "SignHere",
              "tabLabel": "exampleSignHereTab",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1"
            }
          ]
        }
      }
    ]
  },
  "status": "sent",
  "emailSubject": "Please DocuSign: Contract",
  "documents": [
    {
      "name" : "Example contract",
      "documentId" : "1",
      "htmlDefinition": {
        "source": "<div>{{\"tabLabel\": \"exampleApproveTab\"}}<p>I agree to the terms of this contract.</p>{{\"tabLabel\": \"exampleSignHereTab\"}}</div>"
      }
    }
  ]
}

Supported HTML, attribute, and CSS elements

Allowed HTML element list

• a
• abbr
• acronym
• address
• area
• article
• aside
• b
• bdi
• big
• blockquote
• body
• br
• button
• caption
• center
• cite
• code
• col
• colgroup
• data
• datalist
• dd
• del
• details
• dfn
• dir
• div
• dl
• dt
• em
• fieldset
• figure
• figcaption
• font
• footer
• form
• h1
• h2
• h3
• h4
• h5
• h6
• head
• header
• hr
• html
• i
• img
• input
• ins
• kbd
• keygen
• label
• legend
• li
• main
• map
• mark
• menu
• menuitem
• meter
• nav
• ol
• optgroup
• option
• output
• p
• pre
• progress
• q
• rp
• rt
• ruby
• s
• samp
• section
• select
• small
• span
• strike
• strong
• sub
• sup
• summary
• table
• tbody
• td
• textarea
• tfoot
• th
• thead
• time
• tr
• tt
• u
• ul
• var
• wbr

Allowed HTML attribute list

• abbr
• accept
• accept-charset
• accesskey
• action
• align
• alt
• autocomplete
• autosave
• axis
• bgcolor
• border
• cellpadding
• cellspacing
• char
• charoff
• charset
• checked
• challenge
• cite
• class
• clear
• cols
• colspan
• color
• compact
• contenteditable
• coords
• data-navigate-to
• data-qa
• data-action
• data-icon-closed
• data-icon-open
• data-display
• datetime
• dir
• disabled
• draggable
• dropzone
• enctype
• for
• frame
• headers
• height
• high
• href
• hreflang
• hspace
• id
• ismap
• keytype
• lang
• label
• list
• longdesc
• low
• max
• maxlength
• media
• method
• min
• multiple
• name
• nohref
• noshade
• novalidate
• nowrap
• open
• optimum
• pattern
• placeholder
• prompt
• pubdate
• radiogroup
• readonly
• rel
• required
• rev
• reversed
• rows
• rowspan
• rules
• scope
• selected
• shape
• size
• span
• spellcheck
• src
• start
• step
• style
• summary
• tabindex
• target
• title
• type
• usemap
• valign
• value
• vspace
• width
• wrap

Allowed HTML CSS list

• align
• align-content
• align-items
• align-self
• background
• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-repeat-x
• background-repeat-y
• background-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• caption-side
• clear
• clip
• color
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• flex
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-weight
• grid-area
• grid-column
• grid-column-end
• grid-column-gap
• grid-column-start
• grid-gap
• grid-row
• grid-row-end
• grid-row-gap
• grid-row-start
• grid-template-area
• grid-template-columns
• grid-template-rows
• height
• justify-content
• justify-self
• left
• letter-spacing
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• min-height
• min-width
• opacity
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-wrap
• overflow-x
• overflow-y
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• quotes
• right
• table-layout
• text-align
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip
• text-decoration-style
• text-indent
• text-shadow
• text-transform
• top
• unicode-bidi
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• z-index

Allowed URI Schemes

• data
• http
• https