On this page, we'll add some more examples of how to customize the IdP Selection Page Template in the app's Page Template section.

Page templates are using Velocity (http://velocity.apache.org/) and support HTML, CSS, JS, and images.
Images can only be embedded directly, as Base64 blobs. You can convert them here: https://www.base64-image.de/

Jira (IdP Buttons)

This is for Jira only, looks like the normal login page with IdPs added as Buttons

Template with embedded Images and CSS/ JS

Change the decorator

Atlassian's applications support standard page decorators, allowing our plugin to generate new web pages with consistent decoration by the host application across the Atlassian products.

Default we are using the 'atl.general' decorator in our page templates. The general decorator can be used for the header and footer of general pages outside the administration UI.

atl.general decorator

general_decorator

If you want to remove the header and footer from the page, you need to change the decorator type. We will use the 'atl.popup' decorator for content that can be placed in a new browser popup window.

Just change the decorator type to hide the header and footer.

In the “IdP Selection Page Template”, replace the line:

to

page_templates_popup

Look & Feel

general decorator

decorator_general_lf

popup decorator

decorator_popup_lf

Click-thru Terms & Conditions Sign-up

Would it be possible to provide some kind of "Click-thru" agreement to a user which requires that they sign up to the terms of the site before getting general access?

For this scenario, we use the 'IdP Selection Page Template' (SAML Single Sign-On Plugin Configuration → Page Templates) and modify the default IdP Selection Page Template.

When a user now accesses Jira/Confluence for the first time, this page is displayed to him. By clicking "Okay", he will then be redirected to the first configured Identity Provider.

In doing so, we set a cookie that stores this. If the page is now visited a second time, it will be redirected directly to the Identity Provider as long as the cookie is still set.

So this means that each of your users will see this banner once (if the cookie is lost, the page is displayed again).

terms_of_service_idp_selection

Below you will find the template, please use it in the Page Templates (IdP Selection Page) section. You can easily customize the text or button text to your needs, as well as the color via CSS.

Multi-language IdP Selection Page

Would it be possible to have a multi-language version of the 'IdP Selection Page Template' (SAML Single Sign On Plugin Configuration → Page Templates)?

We currently don't have an option in the UI to support multi-language templates. However, you can use JavaScript inside the IdP Selection templates to achieve your goal.

SAML_Page_Template

Below you will find an example based on our default page template. Our example contains the languages German (de) and French (fr), however you can change or add the languages to your needs.

Multilanguage Template

A little more background/explanation

The script basically extends every element with text in it to have an attribute (data-translate) that contains a “translation key”, while the text is kept as the default language. After loading the page, it executes a JavaScript block. This contains the translations you want to have for each language and the translation key (you can modify this according to the example and your need). Afterwards, there’s code that detects the user’s preferred language and does the substitution if necessary.

IdP Selection By Email Page with a Button

Applying the following template to the "IdP Selection By Email Page Template" would add a button that only upon clicking would trigger redirection.

IdP Selection by Email with a Button

IdP Selection page only at the first login 

From version 6.3.0 of the plugin, it is also possible to provide users the choice of whether they want to see the IdP selection page again or if they only want to pick their IdP ones. So far the user's choice was already stored in a cookie but the IdP selection was always displayed for 3 seconds (a default value that can be amended) until the previous IdP was automatically selected. This gives the user the choice to switch the IdP within that timeframe.

Now in this example, when the "Do you want to save your selection?" is selected the IdP selection page will not be shown the next time a user logs in. This is especially useful in an environment where the majority of users only use one IdP and you have some users that need to switch the IdPs for logging into the application. 

The IdPs can be displayed in a meatball or drop-down menu, or as a list. Our template below contains all options (meatball, drop-down menu, or as a list). Every option is marked with a comment. Please modify the template if you only want to display the IdPs with one option.

IdP Selection page only at the first login