Guides
Status PageRoadmapTestimonies

Custom Experiences

Suggest Edits

What is a Custom Experience?

You can customise the look and feel of your signing experience with the Custom Experience feature.

To personalise the signature process and adapt it to your brand identity, it is possible to:

  • Customise the signature experience appearance (logo, colours, start screen, left panel).
  • Personalise the user's journey with the redirect redirect URLs in case of signature success, error or decline.
  • Manage email notifications triggered when an event occurs on the Signature Request (ie. "Request is -approved", "Request is rejected").
  • Manage emails settings (ie. show the due date, the introduction, your logo or the sender)

The set-up of custom experiences can be done from the application and the API

📘

This feature is available for plans :

  • PRO up to 2 custom experiences
  • SCALE up to 20,000 custom experiences

Overview


Set up a Custom Experience in the application

A Custom Experience can be created on the Application and requires Admin or Owner access.

Once the Custom Experience is created, you can retrieve its 'id' using the dedicated menu item as shown below.

Copy Custom Experience ID

Copy Custom Experience ID


📘

Sandbox and Custom Experience

If you are testing the API, you only have access to the Sandbox environment. You are limited in the Custom experience creation: you can create a Custom Experience only from the application, and not from the API.

Associate the Custom Experience to a Signature Request

Once the Custom Experience is created and the 'id' retrieved, you can use the Custom Experience to personalise a Signature Request.

To do so, you must set the custom_experience_id parameter with the customExperienceId when you initiate the Signature Request.

POST /signature_requests 

{
    "name": "The name of your Signature Request",
    "delivery_mode": "email",
    "timezone": "Europe/Paris",
    "custom_experience_id": "{{customExperienceId}}"
}

Set up a Custom Experience from the API

Create a Custom Experience

POST /custom_experiences

{
    "name": "My first custom experience",
    "landing_page_disabled": true,
    "side_panel_disabled": false,
    "text_color": "#420023",
    "background_color": "#420023",
    "button_color": "#420023",
    "text_button_color": "#420023",
    "disabled_notifications": [
        "approver.expiration_date_reminder",
        "approver.canceled",
        "approver.expiration_date_updated",
        "follower.approved",
        "follower.canceled",
        "follower.completed",
        "follower.expired",
        "follower.rejected",
        "follower.signed",
        "sender.approved",
        "sender.canceled",
        "sender.completed",
        "sender.rejected",
        "sender.signed",
        "signer.expiration_date_reminder",
        "signer.canceled",
        "signer.completed",
        "signer.signed",
        "signer.expiration_date_updated",
        "signer.signature_requested"
    ],
    "email_logo_disabled": true,
    "email_header_text_disabled": false,
    "email_expiration_text_disabled": true,
    "email_footer_signature_disabled": true,
    "redirect_urls": {
        "success": "https://www.example.com/success",
        "error": "https://www.example.com/error",
				decline: "https://www.example.com/decline"
    }
}

{
    "id": "5e5d8cc7-91b7-4866-bc4e-a9a2c874a848",
    "name": "My first custom experience",
    "landing_page_disabled": true,
    "side_panel_disabled": false,
    "background_color": "#420023",
    "button_color": "#420023",
    "text_color": "#420023",
    "text_button_color": "#420023",
    "redirect_urls": {
        "success": "https://www.example.com/success",
        "error": "https://www.example.com/error",
        "decline": "https://www.example.com/decline"
    },
    "disabled_notifications": [
        "approver.expiration_date_reminder",
        "approver.canceled",
        "approver.expiration_date_updated",
        "follower.approved",
        "follower.canceled",
        "follower.completed",
        "follower.expired",
        "follower.rejected",
        "follower.signed",
        "sender.approved",
        "sender.canceled",
        "sender.completed",
        "sender.rejected",
        "sender.signed",
        "signer.expiration_date_reminder",
        "signer.canceled",
        "signer.completed",
        "signer.signed",
        "signer.expiration_date_updated"
    ],
    "email_header_text_disabled": false,
    "email_expiration_text_disabled": true,
    "email_logo_disabled": true,
    "logo": null,
    "source": "public_api",
    "is_default": false,
    "created_at": "2023-02-20T08:33:58+00:00"
}

Choose which notifications should be sent

All notifications are sent by default, but you can choose to disable some of them with the disabled_notications entry. Here is the list of all notifications you can act on:

Notification nameDescription
approver. cancelledThe Approver is notified that the Signature Request has been cancelled
approver.expiration_date_reminderThe Approver is notified that the Signature Request expires soon
approver.expiration_date_updatedThe Approver is notified that the Signature Request expiration date has changed or has been reactivated
follower.approvedThe Follower is notified that the Signature Request has been approved
follower.rejectedThe Follower is notified that the Signature Request has been rejected
follower.signedThe Follower is notified that a Signer just signed the Signature Request
follower.completedThe Follower is notified that the Signature Request is completed which means that all Signers signed
follower.cancelledThe Follower is notified that the Signature Request has been cancelled
follower.expiredThe Follower is notified that the Signature Request has expired
sender.approvedThe Sender is notified that the Signature Request has been approved
sender.rejectedThe Sender is notified that the Signature Request has been rejected
sender.signedThe Sender is notified that a Signer just signed the Signature Request
sender.completedThe Sender is notified that all Signers signed the Signature Request
sender.cancelledThe Sender is notified that the Signature Request has been cancelled
signer.signedThe Signer is notified that a Signer just signed the Signature Request
signer.completedThe Signer is notified that all Signers signed the Signature Request
signer.canceledThe Signer is notified that the Signature Request is canceled
signer.expiration_date_reminderThe Signer is notified that the Signature Request expires soon
signer.expiration_date_updatedThe Signer is notified that the Signature Request expiration date has changed or has been reactivated
signer.signature_requestedThe Signer is invited to sign a document with a signature link

Custom Redirect URL

You can set custom URLs to which the signer will be redirected at the end of the signing flow.

  • Redirect URL on success: redirect the signer to a page of your choice when they successfully complete the signature
  • Redirect URL on error: redirect the signer to a page of your choice in case of error or signature failure
  • Redirect URL on signature decline: redirect the signer to a page of your choice if they decline the signature

ℹ️

Custom Redirect URLs are not available during the Trial period


Add or replace a Custom Experience logo

POST /custom_experiences/{customExperienceId}/logo

curl --location --request POST '{baseUrl}/custom_experiences/{customExperienceId}/logo' \
--header 'Authorization: Bearer {apiKey}' \
--form 'file=@"/path/to/the/logo.png"'

https://developers.yousign.com/reference/patch-custom-experience-logo

Fetch the logo url

GET /custom_experiences/{customExperienceId}

{
    "id": "5e5d8cc7-91b7-4866-bc4e-a9a2c874a848",
    "name": "My first custom experience",
    "landing_page_disabled": true,
    "side_panel_disabled": false,
    "background_color": "#420023",
    "button_color": "#420023",
    "text_color": "#420023",
    "text_button_color": "#420023",
    "redirect_urls": {
        "success": "https://www.example.com/success",
        "error": "https://www.example.com/error",
        "decline": "https://www.example.com/decline"
    },
    "disabled_notifications": [
        "approver.expiration_date_reminder",
        "approver.canceled",
        "approver.expiration_date_updated",
        "follower.approved",
        "follower.canceled",
        "follower.completed",
        "follower.expired",
        "follower.rejected",
        "follower.signed",
        "sender.approved",
        "sender.canceled",
        "sender.completed",
        "sender.rejected",
        "sender.signed",
        "signer.expiration_date_reminder",
        "signer.canceled",
        "signer.completed",
        "signer.signed",
        "signer.expiration_date_updated"
    ],
    "email_header_text_disabled": false,
    "email_expiration_text_disabled": true,
    "email_logo_disabled": true,
    "email_footer_signature_disabled": true,
    "logo": "http://yousign.app/custom_experiences/5e5d8cc7-91b7-4866-bc4e-a9a2c874a848/logo?s=e53b536315e76218983a7ce6c40f23b0095ae16c78c2539702c3347481191ece5bc5227a7a7131c9e9469f12c3a443af23a516e4791f25633120dce57f7f7232&t=1676882038&expiration=1676918252",
    "source": "public_api",
    "is_default": false,
    "created_at": "2023-02-20T08:33:58+00:00"
}

Updated 6 months ago