--- title: "Editor resource" url: "https://docs.signnow.com/docs/branding-editor-resource" type: "page" section: "Documentation" slug: "branding-editor-resource" --- # Editor resource # Editor resource With the editor brand resource, API users can customize the signing session, the embedded editor, embedded sending, and embedded view experiences. ## Brand elements for the signing session ![editor.png](/reference-assets/images/Branding%20guide/Editor/editor.png) ![editor_dropdown_signing.png](/reference-assets/images/Branding%20guide/Editor/editor_dropdown_signing.png) ![decline pop-up.png](/reference-assets/images/Branding%20guide/Editor/decline%20pop-up.png) ![second decline pop-up.png](/reference-assets/images/Branding%20guide/Editor/second%20decline%20pop-up.png) ![success completion page.png](/reference-assets/images/Branding%20guide/Editor/success%20completion%20page.png) ![decline completion page.png](/reference-assets/images/Branding%20guide/Editor/decline%20completion%20page.png) ![auth_page_request_pin_header.png](/reference-assets/images/Branding%20guide/Editor/auth_page_request_pin_header.png) ![auth_page_check_pin_phone.png](/reference-assets/images/Branding%20guide/Editor/auth_page_check_pin_phone.png) ![auth_page_check_pin_password.png](/reference-assets/images/Branding%20guide/Editor/auth_page_check_pin_password.png) ![download_button_view_mode_2_upd.png](/reference-assets/images/Branding%20guide/Editor/download_button_view_mode_2_upd.png) ![download_button_signing_session_upd.png](/reference-assets/images/Branding%20guide/Editor/download_button_signing_session_upd.png) ![signing_settings_new.png](/reference-assets/images/Branding%20guide/Editor/signing_settings_new.png) ## Brand elements for embedded editor, embedded sending, signing session for the FreeForm invite* ![editor_buttons_constructor_upd.png](/reference-assets/images/Branding%20guide/Editor/editor_buttons_constructor_upd.png) ![editor_elements_constructor_upd.png](/reference-assets/images/Branding%20guide/Editor/editor_elements_constructor_upd.png) ![editor_close_button_construction.png](/reference-assets/images/Branding%20guide/Editor/editor_close_button_construction.png) ![editor_field_settings_default.png](/reference-assets/images/Branding%20guide/Editor/editor_field_settings_default.png) *Some elements are available
UI element Customization options Attributes with values
Progress bar
  • Progress bar color when in progress.
  • Progress bar color when the document is completed.


    • Can be customized for the signing session (field invite and embedded invite).     		```json "progress-bar": { "default-color": "#232323", "completed-color": "#232323" } ```
    Accessibility option
  • Show or hide the accessibility option in the More Actions dropdown menu.
  • Icon, background, and border colors in a default state, when hovered over, and activated.
  • Enable accessibility by default.


    • Can be customized for the signing session (field invite and embedded invite).     		```json "accessibility": { "visibility": true, "color": "#546470", "background": "#ffffff", "border": "#ffffff", "hover-color": "#546470", "hover-background": "#f1f2f4", "hover-border": "#f1f2f4", "active-color": "#546470", "active-background": "#dadee2", "active-border": "#dadee2", "enabled": false } ```
    Navigation panel Show or hide the navigation panel in the footer.
    The panel contains page navigation controls and page dimension options.    		 ```json "navigation": { "visibility": true } ```
    More actions button Show or hide the More Actions button.

    Can be customized for the signing session (field invite and embedded invite).    		 ```json "settings": { "visibility": "true" } ```
    Decline pop-up Text in the modals that open when a signer declines an invite to sign:
    1. The modal that opens when a signer clicks Decline.
    2. The modal that opens when a signer fills in a decline reason and clicks Decline to Sign.
    Can be customized for the signing session (field invite and embedded invite).     		```json "decline-invite-text": { "en": "Custom message in English about {document-name} from {invite_owner_email}", "fr": "Custom message in French about {document-name} from {invite_owner_email}", "es": "Custom message in Spanish about {document-name} from {invite_owner_email}" } ```
    Sidebar
  • Show or hide the sidebar in the signing session.
  • Sidebar background color.

    • Can be customized for the signing session, embedded editor, embedded sending, and embedded view.     		```json "sidebar": { "background": "#ffffff", "visibility": true } ```
    Signing session footer
  • Show the footer when a signer completes all required fields.
  • Text of the footer.

    • Can be customized for the signing session (field invite and embedded invite).     		```json "complete-footer": { "visibility": true, "custom-text": { "en": "custom text in English", "es": "custom text in Spanish", "fr": "custom text in French" } } ```
    Support chat button Show or hide the Support chat button on the signing session and on the completion page.

    Can be customized for the signing session (except embedded invite: always 'false').    		 ```json "support-chat": { "visibility": true } ```
    Contact sender Signers can contact the sender by selecting the Contact Sender option on the More Actions dropdown menu.
  • Show or hide the Contact Sender option.
  • An email address and name preset for an email draft that opens when a signer clicks Contact Sender.

    • Can be customized for the signing session (field invite and embedded invite).     		```json "sender-info":{ "visibility": true, "contact-email": "contact@email.com", "contact-name": "Contact Name" } ```
    Page dimension Default page dimension in percent.

    Can be customized for the signing session, embedded editor, embedded sending, and embedded view.    		 ```json "page-dimension":{ "percent": 100 } ```
    Close button
  • Show or hide the Close button (in view mode) or Save progress and Finish Later option (in the More Actions menu during the signing session).
  • Custom text for the closing option during the signing session.
  • Custom text for the Save and Close button in embedded editor and embedded sending experiences.
    Note: Close button text customization is not supported in view mode.
    		•  ```json "close-button": { "visibility": true, "title": { "signing": { "en": "Save Progress and Finish Later", "fr": "Enregistrer la progression et terminer plus tard", "es": "Guardar progresos y terminar más tarde" }, "editor": { "en": "Save and Close", "fr": "Enregistrer et fermer", "es": "Guardar y cerrar" } } } ```
    Decline button Show or hide the Decline option in the More Actions menu.

    Can be customized for the signing session (field invite and embedded invite).    		 ```json "decline-button":{ "visibility": true } ```
    Completion page success Text for the completion page that opens when a signer completes a document:
  • Custom header text up to 300 symbols.
  • Custom body text up to 900 symbols.

    • Can be customized for the signing session (field invite and embedded invite).    		 ```json "complete-page": { "success": { "header-text": { "en": "success header text in English", "fr": "success header text in French", "es": "success header text in Spanish" }, "body-text": { "en": "success body text in English", "fr": "success body text in French", "es": "success body text in Spanish" } } } ```
    Completion page decline Text for the completion page that opens when a signer declines a document:
  • Custom header text up to 300 symbols
  • Custom body text up to 900 symbols

    • Can be customized for the signing session (field invite and embedded invite).    		 ```json "complete-page": { "decline": { "header-text": { "en": "decline header text in English", "fr": "decline header text in French", "es": "decline header text in Spanish" }, "body-text": { "en": "decline body text in English", "f-r": "decline body text in French", "es": "decline body text in Spanish" } } } ```
    Go to SignNow button Show or hide the Go to SignNow button on the success completion page.

    Can be customized for the signing session (field invite and embedded invite).    		 ```json "complete-page": { "button-to-signnow": { "visibility": true } } ```
    Download Document button Show or hide the Download Document button on the completion page (both success and decline).

    Can be customized for the signing session (field invite and embedded invite).    		 ```json "complete-page": { "button-download": { "visibility": true } } ```
    Registration section for new users Show or hide the registration section for new users on the completion page.

    Can be customized for the signing session (field invite and embedded invite).    		 ```json "complete-page": { "registration": { "visibility": true } } ```
    Authentication page The authentication page displayed to signers when opening an invite protected with two-factor authentication (phone call, SMS, or password).
  • Custom header text up to 300 characters with {sender_email} and {document_name} placeholders.
  • Custom instructions up to 900 characters for obtaining a password by a voice call or SMS.
  • Custom text up to 900 characters requesting to enter a password sent by voice call or SMS.
  • Custom text up to 900 characters requesting to enter a password set by a sender.


    • Can be customized for the signing session (field invite and embedded invite).    		 ```json "auth-page": { "header-text": { "en": "{sender_email} invited you to sign {document_name}", "es": "{sender_email} te ha invitado a firmar {document_name}", "fr": "{sender_email} vous a invité à signer {document_name}" }, "request-pin": { "body-text": { "en": "Press the button bellow to have the password sent to you by voice call or sms message.", "es": "Pulsa el botón de abajo para que te envíen la contraseña por llamada de voz o mensaje sms.", "fr": "Appuyez sur le bouton ci-dessous pour que le mot de passe vous soit envoyé par appel vocal ou sms." } }, "check-pin": { "phone": { "body-text": { "en": "Enter the document password sent you by voice call or sms.", "es": "Introduce la contraseña del documento que te ha enviado por llamada de voz o sms.", "fr": "Entrez le mot de passe du document que vous avez reçu par appel vocal ou sms." } }, "password": { "body-text": { "en": "Enter the document password below to unlock the document.", "es": "Introduce la contraseña del documento a continuación para desbloquear el documento.", "fr": "Entrez le mot de passe du document ci-dessous pour déverrouiller le document." } } } } ```
    Download button Show or hide the Download and History buttons during the signing session, and Download, Download With History and Document History buttons in view mode.

    Can be customized for the signing session, embedded editor, embedded sending, and embedded view.    		 ```json "download-button": { "visibility": true } ```
    Document name Show or hide the document name in the header.

    Can be customized for the signing session, embedded editor, embedded sending, and embedded view.    		 ```json "document-name": { "visibility": true } ```
    Toolbar
  • Show or hide the top toolbar.
  • Set up the toolbar background color.

    • Can be customized for the embedded editor and embedded sending.    		 ```json "toolbar": { "visibility": true, "background": "#ffffff" } ```
    Editing tools The background color of the editing tools panel on the left.

    Can be customized for the signing session (FreeForm invite), embedded editor, and embedded sending.     		```json "editing-tools": { "background": "#ffffff" } ```
    Manage recipients Show or hide the Manage Recipients link on the editing tools panel.

    Can be customized for the embedded sending and embedded editor.    		 ```json "manage-recipients": { "visibility": true } ```
    Preview Show or hide the Preview button.

    Can be customized for the embedded sending and embedded editor.    		 ```json "preview-button": { "visibility": true } ```
    Thumbnails Show or hide the Thumbnails button.

    Can be customized for the embedded sending and embedded editor.    		 ```json "thumbnails-button": { "visibility": true } ```
    Request payment Show or hide the Payment Request option in the settings (…) dropdown.

    Can be customized for the embedded sending and embedded editor.    		 ```json "request-payment": { "visibility": true } ```
    Continue Show or hide the Continue button.

    Can be customized for the embedded sending.    		 ```json "continue-button": { "visibility": true } ```
    Step progress bar Show or hide the step progress bar in the header.

    Can be customized for the embedded sending and embedded editor.
    Signing settings
  • Prompt a signer to automatically apply signature and initials to all corresponding empty fields in a document after filling out the first field. `true` – the signer will be prompted to automatically fill all empty signature and initials fields after completing the first one; `false` – the signer will need to fill each signature and initials field individually; no prompt will be shown.
    • .
  • Control how signers will be guided through document fields. `true` - the Go Through Required Fields checkbox is checked in More Actions; the signer will be guided only through required fields; `false` – the Go Through Required Fields checkbox is not checked in More Actions; the signer will be guided through all fields.
    • .

    Can be customized for all signing experiences.    		 ```json "signing-settings": { "auto-apply-signatures-and-initials-to-document-fields": true, "guide-signers-only-through-required-fields": true } ```
    Fields Show or hide the signature, text, date, initials, fullname, email, checkbox, radiobutton, attachment, dropdown, stamp, formula, hyperlink fields in the left-side panel.

    Can be customized for the embedded sending, embedded editor, and signing session for the FreeForm invite (signature, initials, stamp, text, checkbox, date fields available).    		 ```json "fields": { "signature": { "visibility": true }, "text": { "visibility": true }, "date": { "visibility": true }, "initials": { "visibility": true }, "fullname": { "visibility": true }, "email": { "visibility": true }, "checkbox": { "visibility": true }, "radiobutton": { "visibility": true }, "attachment": { "visibility": true }, "dropdown": { "visibility": true }, "stamp": { "visibility": true }, "formula": { "visibility": true }, "hyperlink": { "visibility": true } } ```
    Field settings Show or hide the Element settings button on the right side of the header. The Element settings allows users to customize field settings.

    Can be customized for the embedded sending and embedded editor.    		 ```json "field-settings":{ "visibility": true } ```
    Default fields Show or hide the Default fields tab in the left sidebar.

    Can be customized for the embedded sending and embedded editor.    		 ```json "default-fields":{ "visibility": true } ```
    --- *Full page: https://docs.signnow.com/docs/branding-editor-resource*