Configure footer text in Smart ID Self-Service

This article includes updates for Smart ID 23.04.23 and Smart ID 23.10.9.

This article describes how to configure the footer text for the Smart ID Self-Service login screen and the other pages in Self-Service. The footer text is available in the bottom left part of the login screen, and in the middle, bottom part for the other pages (when logged in).

<SMARTIDHOME>

In this article, <SMARTIDHOME> refers to /home/nexus, but this can be different depending on the setup.

Step-by-step instruction

Configure footer text in Smart ID Self-Service login screen

Open this file for editing: <SMARTIDHOME>/docker/compose/selfservice/docker-compose.yml.
Configure the footer text in the CONFIG_JSON environment variable by adding lines to the "application" section, under "footer". See the example below.
1. Add the text you want to display in the footer of the Smart ID Self-Service login screen. For a line with the property "content", the text will be used to look up a translation. Provide custom translations as needed. (See Configure language in Smart ID Self-Service for more information.) If no translation is provided, the text will be shown as is.
2. Add info for the html part. A line with the property "html" set as true will be shown as is. If you add a link here, it will be clickable in the footer. In HTML footer lines it is also possible to refer to translations with the syntax `${tranlation.name}`. Escaping '&' or '<' to the html entities is not supported here.
3. The "visible" property defines if the line should be visible in the login page, in every page, or in both. The property accepts a simple string if the line should be shown only in one area, or an array if the line should be show in both cases.
The text color of the footer is controlled by the setting '--color_ussp_footer_text_color' in theme.css. See Configure branding in Smart ID Self-Service for more information.

The altered footer will be displayed the next time the login screen is shown.

Example: Footer text configuration in CONFIG_JSON

CODE

"application": {
  "applicationPt1": "Smart ID",
  "applicationPt2": "Self-Service",
  "footer": {
    "lines": [
      {
        "content": "keyForTranslation",
        "visible": [
          "loginPage",
          "mainPage"
        ]
      },
      {
        "content": "Copyright © 2011-2023 <a href='https://nexusgroup.com' target='_blank' rel='noopener noreferrer'>Technology Nexus Secured Business Solutions AB</a>",
        "html": true,
        "visible": "loginPage"
      },
      {
        "content": "<a href='${GPDRinformation.url}' target='_blank' rel='noopener noreferrer'>${GPDRinformation.text}</a>",
        "html": true,
        "visible": "mainPage"
      },
      {
        "content": "Without html flag <tag-like> content will be escaped",
        "visible": ["mainPage", "loginPage"]
      }
    ]
  }
}

Make sure to insert valid html code and control the effect on the login screen layout when finished.
If you add more than one row of text in the footer, a scroll bar will appear.
For more details about the CONFIG_JSON environment variable, see Set properties for Smart ID Self-Service.