Signature

The Signature component asks the customer to draw a signature, for example to authorise a return. It opens as a modal in the centre of the widget, and the drawn signature is submitted as an image attachment on the conversation.

Example

{
  "type": "signature",
  "payload": {
    "title": "Sign to confirm your return",
    "description": "Draw your signature below to authorize this return.",
    "isCloseButtonEnabled": true
  }
}

Properties

payload

• title: (optional) The heading shown at the top of the modal.
• description: (optional) A short line of supporting text below the title.
• isCloseButtonEnabled: (optional) If true, an 'X' icon is shown, allowing the customer to dismiss the modal without signing.

How it Works

The modal opens as soon as the signature message is received, and the conversation behind it is dimmed and cannot be interacted with — the customer has to either sign or, when isCloseButtonEnabled is set, close the modal. It is only shown while the signature message is the latest message in the conversation, so send it as the last message in that step of the flow.

The customer draws with a mouse, trackpad or finger. Submit signature stays disabled until something has been drawn, and Clear empties the pad so they can start again.

On submit, the signature is uploaded as a standard file upload — a PNG named signature.png — so it is added to the conversation as an image attachment exactly like a customer-uploaded file, and the flow continues from there. The modal closes once the upload completes.

Handling a dismissed signature

When the customer closes the modal, the widget sends a signature_closed chat event so the flow can react to it, for example by offering an alternative or handing over to an agent:

{
  "from": "customer",
  "type": "chat_event",
  "payload": {
    "name": "signature_closed"
  }
}

Pressing Esc closes the modal and sends the same event. Neither the close button nor Esc will dismiss the modal while a signature is being uploaded.

Translations

The pad placeholder, disclaimer and button labels come from the widget's language files rather than the payload, so they are translated automatically for the customer's locale. See the Language documentation for the signature properties and how to request a new locale.