User experience

• User presentation mode
• Sign URL parameters
• CSS styling
• Language

User presentation mode

There are three different presentation modes in E-Signing: Pop-up, Standalone or Embedded UI. The E-Signing service can be requested to display the UI in either of these modes.

Pop-up UI

The pop-up option allows customers to present the E-Signing service UI in a window partly covering their own web UI. This will keep the E-Signing features in the context of the web application where it is integrated, without the technicial limitations the comes with using iframe.

Note, on mobile devices, the window will cover the entire screen.

A simple pop-up can be setup with similar JavaScript code as below. The pop-up has to be opened by a user action. The example assumes that a button with id “open-popup-button” is used to start the signing flow.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("open-popup-button").addEventListener("click", openCenteredPopup);
  });

  window.addEventListener("focus", keepPopupInFocus);
  window.addEventListener("click", keepPopupInFocus); // Workaround for Firefox

  let popup;

  // Get the sref (signing reference) part by first calling GetSigningProcesses. This is just an example:
  let url = "https://www.sign-preprod1.nets.eu/sign/index.html?sref=19E4C32A43F69E8A1D8A335B33A5A4B81E5BF632";

  function keepPopupInFocus() {
    if (popup && !popup.closed) {
      popup.focus();
    }
  }

  function openCenteredPopup() {
    let width = 700;
    let height = 950;
    let x = window.outerWidth/2 - width/2 + window.screenX;
    let y = window.outerHeight/2 - height/2 + window.screenY;
    openPopup(x, y, width, height);
  }

  function openPopup(x, y, width, height) {
    popup = window.open(url, "width=" + width + ",height=" + height + ",top=" + y + ",left=" + x);
  }
</script>

In the page given by the customer’s exit url (and other customer urls) closing the pop-up can be done with similar JavaScript code as below.

<script>
  window.opener.location.href = "<confirmation page>" + window.location.search;
  window.close();
</script>

Standalone UI

In the standalone UI, the E-Signing service renders the user interface using the Nets E-Signing visual interface.  Compared to the pop-up option, the standalone UI takes over the entire browser window. To access the standalone UI, the following URL can be used (for customer test):

https://www.sign-preprod1.nets.eu/sign/index.html?sref=<sign-reference>

The sign reference is retrieved from sign URL. Note that the sign reference is sent through the sref parameter for standalone mode. The resulting page from the above sign URL does not require any further styling from you i.e. the signer can be directly taken to the standalone user interface sign URL.

Embedded UI

Note: Embedded user interface is no longer recommended due to various browser security restrictions when using iframe with content from a different origins than the page itself.

The embedded option allows customers to present E-Signing service UI within their own web UI. To access the embedded UI, the following URL can be used (for customer test):

https://www.sign-preprod1.nets.eu/sign/index.html?ref=<sign-reference>  

The sign reference is retrieved from sign URL. Note that the sign reference is sent through the ref parameter for embedded mode. The page that is returned by the above sign URL can be styled with your own look-and-feel to fit your web UI. One example is to display the response from embedded UI sign URL into an iframe in ​​​​your web UI.

A simple iframe can be setup with similar HTML code as below:  

 <iframe name="E-Signing" src="https://www.sign-preprod1.nets.eu/sign/index.html?ref=E63652CDEF590BAB30F5B225E1AA8A09977F890E"></iframe>

eID selection page

For customers enabled with more than one eID, end users can choose between the available eIDs.

eID selection page for standalone and pop-up UI:

eID selection page for embedded UI:

Note: The list of eIDs will include all eIDs enabled on your configuration. The list can be skipped or modified using the AcceptedPKIs element or the forcepkivendor parameter. Only those eID's specified in this element will be listed. When using the forcepkivendor parameter, the list will be sorted in the given order.

Sign URL parameters

The sign URL is a URL through which an end user can access the document to be signed. A set of parameters can be appended to the sign URL to adjust the user experience. The parameters are appended to the sign URL like this (customer test link):

https://www.sign-preprod1.nets.eu/sign/index.html?sref=<sref value>&<parameter name>=<parameter value>​

Several parameters can be appended to the sign URL. The parameters are divided into:

• ​Common sign URL parameters
• eID specific sign URL parameters 
  

​Common sign URL parameters​

​eID specific sign URL param​eters

• ​Parameters for more than one eID
• BankID (NO)​
• BankID on mobile (NO)​
• BankID (SE)
• NemID (DK)
• Bank ID (FI)​
• MitID Authentication Based Signing(ABS)​​

​Parameters for several of the eIDs​

​BankID (N​​O)

​BankID on mobil​​​​e (NO)

​BankID (SE)​​​​

​​NemID (DK)​​​

​​​​Bank ID (FI)

​​​MitID Authentication Based Signing (ABS)

Mapping of eID to forcepkivendor parameters:

​Mapping of bank to forcebank parameter:

CSS styling

All pages (except for the eID clients) can be adjusted. Nets has a default style, but customers can override this by either adding your own style when defining the WebContext of the sign order or by appending the style parameter to the ​sign URL.

See the Nets default for elements to change. This can be downloaded from: https://www.sign.nets.eu/sign/signng.css

Language support

E-Signing support these languages:

• English (en)
• Norwegian bokmål (no)
• Norwegian nynorsk (nn_no)
• Swedish (sv)
• Danish (da)
• Finnish (fi)
• Finnish-Swedish (sv_fi)
  
• German (de_DE)
  
• Estonian (et_EE)
  
• Lithuanian (lt_LT)
• ​Latvian (lv_LV)​​

Note: Finnish-Swedish is only supported in Embedded UI mode.

The language presented to the end user is based on these criteria:

• If the lc parameter is added to the sign URL, the language specified as the value will be presented to the end user.
• If the language parameter is not used, the language in the end user's web browser are presented.
• If no supported languages are available in the browser or the language parameter is not used, then English as default will be displayed.
  

 See the description of the lc parameter in the Sign URL parameters section above.