# Frontend setup
Page contents
# Introduction
Even though there are strict rules on how to set up the MitID user-interface, you are allowed to configure the following elements:
- The graphical profile surrounding the MitID box: The basic graphical profile delivered by Signicat as default is predefined and you cannot change it. However, if you have the advanced graphical profile (add-on), you can adjust the design elements to suit your own brand.
- Subdomain name.
- Pop-up or redirect of the MitID box.
- Texts like reference text header and some predefined action texts, e.g. Log på, according to the UX requirements.
- Language (Danish, English or Greenlandic)
The following figure gives an overview of what you can customise (see dark callouts) when you have the advanced graphical profile (add-on):
Here is an example of how an advanced profile might look like:
For more details, see the advanced graphical profile.
# Basic graphical profile
The basic graphical profile is delivered as standard by Signicat. This option makes it easier for you to get started without spending time adjusting the layout. This option is predefined and you cannot customise it.
# Advanced graphical profile (add-on)
If you want to customise the graphical profile instead of using the basic profile, Signicat will help you setting up the advanced graphical profile. For setup help, please contact Signicat at support@signicat.com.
Before you contact Signicat
Please consider how you want to present the adjustable elements described in the following sub-sections. This will speed up the process.
This graphical profile affects the surrounding area (see the blue area below) of the MitID box. It does not affect the MitID box itself (see the white area below).
Here is an example of an advanced graphical profile with an uploaded background image and two links below the help text:
# General recommendations for images and colours
Logos and background images are hosted by Signicat as web resources:
- Format: There are no limitations as long as you use formats suited to the web format, e.g. PNG, JPEG, GIF, SVG. PNG is generally recommended over JPEG since it is lossless. File formats are usually written with all-caps in natural language texts (png > PNG).
- Size: Consider the image size to balance the image quality with the time it takes to load. This recommendation is mostly relevant if you want to upload a background image (logos are relatively small anyway, see the next section for logo size). For most purposes, a jpg that is 1000-1200 pixels in width should be sufficient.
You can use all colour formats suited for web, e.g. RGB, RGBA, HEX.
Ensure you are compliant with WCAG
Be aware that you must comply with Web Content Accessibility Guidelines (opens new window) (WCAG) regarding contrast between font colours and other elements.
# Header (logo and colour)
The header can be visible or hidden. When visible, it should always be on top. You can change the following elements in the header:
- Transparency: This can be useful if you have uploaded a background image that you want to display behind.
- Header colour: You can change this to fit your brand. You can use all colour formats suited for web, e.g. RGB, RGBA, HEX.
- Logo: You can upload your own logo (optional). This should be placed to the left in the header. The logo size should be maximum 150 pixels wide and 40 pixels high. Tip: Ensure your logo has enough padding/margin so it is not squished into the corner.
The header is hidden on smaller devices
This is to ensure all elements of the MitID client is visible to the end-user.
Here is a desktop example with a white header containing a logo from "Superbank":
# Border
You can define a border around the centred piece of the profile, for example a drop-shadow.
Note: This is not the same as the border around the MitID Logon box (which you cannot change).
Here is an example on a border with drop-shadow:
Here is an example on a border with stroke:
# Background (colour or image)
For the background, you can:
- Choose a background colour that suits your brand. You can use all colour formats suited for web, e.g. RGB, RGBA, HEX.
- Upload an image. This image will also cover the header area. You can then make the header transparent or hide it for the image to show. For size and format details, see General recommendations.
Here is an example of an uploaded background image:
# Help text
You can add short texts to provide additional service information for the end-users. For example, it could give value-added information about your service. This text should not be the same as the help text in the MitID Logon box, which provides specific MitID help.
You can also decide not to show such a text.
Requirements for the text:
- Maximum 5 lines.
- Formatting: You can only have one heading level and one body paragraph style. No other formatting is allowed (e.g. alignment). For better contrast and compliance with WCAG (opens new window), you might consider employing a semi-transparent box.
- Font: You can only change the font colour, but be aware of WCAG (opens new window).
- If you have an empty body text, the links below will adjust nicely.
# Links
You can add links below the help text:
- It should be located right below the help text.
- Maximum 2 links.
- The link can be either a text link or a URL.
- If there is no help text (neither heading nor body text), the link is not displayed.
- Links in the footer are not supported.
# Label
You can use one of the links to support the ID method switch (see also Switching between NemID and MitID below). Instead of adding a text link to the other ID method, you can highlight the link with a grey box behind it.
- The link redirects to the other ID method logon (either NemID or MitID).
- You can change the text inside the label.
- The grey box adapts to the text length.
- The label is optional to show.
# Switching between NemID and MitID
The advanced graphical profile allows the end-user to switch seamlessly between NemID and MitID in the transition period. If you have the basic graphical profile, you have to set up this switch yourself.
The switch consists of two main steps:
The user selects the link to the other ID method. This can be either a label or link in the help text area (see screen examples above).
The user is redirected to the other ID method logon page.
See flow examples below.
# From MitID to NemID
This image slider shows an example where the user first selects Log on with MitID from the service provider page, but switches over to NemID during the flow:
# From NemID to MitID
This image slider shows an example where the user first selects Log on with NemID from the service provider page, but switches over to MitID during the flow:
# Subdomains (add-on)
The default subdomain name in Signicat’s basic profile is either signicat.id.mitid.dk for authentication or signicat.sign.mitid.dk for signing (see image example in the Basic profile section). This subdomain is only used in the MitID flow. It is only an internal redirect in the Signicat applications, so you do not need to take any actions regarding this standard subdomain.
However, if you want to include your name in the domain, Signicat can offer you a customised sub-domain like, service-provider.mitid.dk (see screen example below). For setup help, please contact Signicat at support@signicat.com.
# Pop-up or redirect?
MitID allows you to set up MitID as either redirect or pop-up.
Redirect is recommended
Signicat recommends using redirect instead of pop-up for initiating MitID transactions.
The choice is up to you and is all about user experience since both ways are equally secure.
The following sub-sections describe the advantages and disadvantages of both redirects and pop-ups. If you still want to use pop-up, we provide some general guidance in the pop-up section.
# Redirect
Signicat has implemented support for opening MitID as a redirect. A redirect means the end-user is redirected to be authenticated on the page where the MitID box is shown inside the landing page. When the authentication is successful, the user is sent back to your website.
Opening MitID as redirect looks as follows on a desktop (basic profile):
Advantages of redirect:
- The user can bookmark the redirect page to log on directly.
- Easier to implement.
- A pop-up on a mobile device would be displayed in a new tab, so redirect is recommended for those devices to avoid a bad user experience when switching between tabs.
Disadvantage of redirect: The user leaves your web site.
# Pop-up
As an alternative to redirecting the user, the MitID transaction can be initiated in a pop-up window. From the end-user’s perspective, they would click the MitID call-to-action button, which opens a pop-up window where they perform the MitID authentication. Upon termination of the transaction, the pop-up window is closed and the user is redirected to the original window where the pop-up was triggered.
Here is an example sketch where the MitID box is initiated from the service provider page as a pop-up with the basic graphical profile:
Advantage of pop-up: The end-user does not shift context and can see your website behind the pop-up when using a desktop.
Disadvantages of pop-up:
- Pop-ups on mobile devices are handled as new browser tabs. Note: Due to this, Signicat strongly recommends against using pop-up if the user is on a mobile device.
- End-users may have pop-up blockers installed in their browser, which can prevent the MitID Logon box from opening at all.
- If the end-user enlarges the text, a scrollbar may appear. This is not allowed.
- Some flows may require more space than is suitable for a pop-up.
General recommendations when using pop-up:
We strongly recommend using the basic graphical profile in combination with pop-up. This creates a more familiar experience for the end-user across service providers. The advanced graphical profile can be seen as "noisy" in the context of a pop-up. Also, pop-up needs a larger window size to properly display the advanced graphical profile (see the next bullet point).
The MitID box is always 400x588px, which is the mandated minimum size of the pop-up. To properly display the contents with the basic graphical profile, we recommend a minimum pop-up window size of 710x700 px. If you still choose to use the advanced graphical profile in combination with pop-ups, we recommend a minimum pop-up window size of 820x820 px.
Centre the pop-up window on the screen. Dual monitor setups should be taken into account when attempting to centre the window.
Anchor the MitID box to the top.
As a service provider, you must handle the lifetime of the pop-up window. This includes closing the window upon termination of the MitID transaction and properly redirecting the user in the original parent window.
The design, structure and behaviour of the landing page is subject to change over time. This may in turn have consequences for how the solution looks when displayed in a pop-up window.
Recommendation when using pop-up on desktops: When using a pop-up on a desktop, the surrounding page around the MitID box should be as limited as possible to create a familiar experience for the end-user. So, avoid unnecessary elements around the MitID box.
Recommendation when using pop-up on mobile devices (tablets and smartphones): Set up the switch between the original tab and the MitID tab automatically so the users do not get stuck nor must navigate themselves.
Smartphone:
Tablet:
# Texts in the MitID box
In the MitID box, you can set up an action text, your service provider name and a reference text.
# Action text
Here you can choose between a predefined limited set of action texts, e.g. "Log on at..." , "Sign at...". For a full list of available action texts, see UX requirements > Action texts.
# Service provider name
Here you display the name of the company (recognisable for the end-user). There are some length restrictions. For more details, see the UX requirements > Service provider name.
# Reference text
This is the body text in the MitID login box (max 130 characters), giving the end-user additional information about the action. Here you can choose between two setups:
- Static reference text: Here you can add a static reference text of your own choice. This is a general text for all transactions (see also MitID UX requirements).
- Dynamic reference text (Transaction consent add-on): Whereas the static text is a general description, the dynamic text describes specific transactions, for example "Transfer 1000 DKK to {account number}". Here you set up a dynamic reference text using the prefilled parameter concept. This option requires the Transaction consent add-on from Signicat. See more details below.
Signicat helps you define both these options in the configuration. To get help with this, please contact Signicat at support@signicat.com.
# Transaction consent add-on (dynamic reference text)
You can define a dynamic reference text yourself using the referenceText prefilled parameter. This requires that you have set the Transaction consent add-on to true in the configuration. This parameter overrides the static reference text (see section above).
The parameter must be signed per request to ensure that the text is authentic, i.e. that it comes from you as a service provider and that other parties have not tampered with the text. There are a few ways to achieve this. For how to set this up in an OIDC context, see OIDC > MitID specifics.
# Language
Supported languages are Danish, English and Greenlandic. See also MitID's UX requirements for text alternatives in the supported languages.