Skip to content

I18n

It is possible to apply your own translations to strings/messages in the widget and the Cling app. Translations in the widget can be modified via the i18n option. The example below will change the title of the send-drawer in the widget.

js
Cling.init({
  i18n: {
    sv: {
      sendForm: {
        title: 'Skicka signering' // Skicka dokument
      }
    },
    en: {
      sendForm: {
        title: 'Send signing' // Send document
      }
    }
  }
})

The same structure for language/key/messages applies for overriding translations in the Cling app.

⚠️ Note

Right now, the JSON to override messages in the Cling app have to be manually provided to the Cling team. This will be possible to update by yourselves against your partner account in the near future.

Structure example

Below is an example of how to structure the JSON in regards to language>namespace>key/messages.
Note: Nested paths within a namespace requires keys in dot notation

json
{
  "sv": {
    // Widget context
    "sendForm": {
      "title": "Skicka dokument"
    },
    "recipientBlock": {
      "addFirstButton": "Lägg till mottagare",
      "addButton": "Lägg till mottagare"
    },
    "formClient": {
      "title": "Mottagare",
      "createButton": "Lägg till mottagare",
      "updateButton": "Spara mottagare"
    },
    "_common": {
      "status.sent": "skickad",
      "status.accepted": "accepterad"
    },

    // App context
    "document": {
      "sign": "Signera",
      "deny": "Neka",
      "answerModal.signature.start.title": "Signera dokumentet",
      "answerModal.signature.start.action": "Signera & acceptera"
    }
  },
  "en": {
    // Widget context
    "sendForm": {
      "title": "Send document",
      "nameLabel": "Document name",
      "namePlaceholder": "Name"
    },
    "recipientBlock": {
      "addFirstButton": "Add recipient",
      "addButton": "Add recipient"
    },
    "formClient": {
      "title": "Recipient",
      "createButton": "Add recipient",
      "updateButton": "Save recipient"
    },
    "_common": {
      "status.sent": "sent",
      "status.accepted": "accepted"
    },

    // App context
    "document": {
      "sign": "Sign",
      "deny": "Deny",
      "answerModal.signature.start.title": "Accept document",
      "answerModal.signature.start.action": "Sign & Accept"
    }
  }
}

:::

Widget views

Below you'll see a some screenshots with some relevant "mapped" key/messages for the widget context. You can also explore all key/messages of the original namespace for each view by stepping through the JSON.

Send form

Send form

Namespace

Client modal

Client modal

Namespace

Document timeline

Document timeline

Namespace

Document receipt

Document receipt

Namespace

App views

Below you'll see a some screenshots with some mapped relevant key/messages for the widget context. You can also check all key/messages for document namespace by stepping through the JSON. This namespace unlike the the ones in the app context have a few more languages supported other than sv and en.

Namespace

Sign view

Sign view

Answer modal (signature)

Answer modal signature

Answer modal (BankID)

Answer modal BankID

Answer feedback

Answer feedback modal