RealMe page elements

The RealMe elements are intended to be flexible enough to be consistent with your website look and feel, but also identifiable to users as a common means of logging in and proving identity information online.

Login and assert button elements

The standard light blue colour is recommended, but if this does not suit the webpage design, there are  alternative dark or light designs. 

This is the preferred design, as it answers customers' commonly asked questions about the use of the RealMe login service.

Primary login button element - standard colour

The login box is designed to be 250px to 350px wide. It is fluid, so more or less text can be added to the <p> tag if the text needs to be changed.

The What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

 


Login component for header - standard colour

When the RealMe login function is available on multiple webpages, this webpage header design can also be used.

This component has the same functionality as the primary design, with the question mark triggering the What's RealMe hover text.


Login secondary component - standard colour

 Under special circumstances, the use this smaller secondary design may be acceptable. It is designed to be 125px to 250px wide.


 

 

Download this bundle [ZIP, 54 KB] that contains html, css and images and choose the standard or alternative colours. 

 

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative dark design

This is the preferred design, as it answers customers' commonly asked questions about the use of the RealMe login service.

Primary login button element - dark colour

The login box is designed to be 250px to 350px wide. It is fluid, so more or less text can be added to the <p> tag if the text needs to be changed.

The What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

 


Login component for header - darkcolour

When the RealMe login function is available on multiple webpages, this webpage header design can also be used.

This component has the same functionality as the primary design, with the question mark triggering the What's RealMe hover text.


Login secondary component - dark colour

 Under special circumstances, the use this smaller secondary design may be acceptable. It is designed to be 125px to 250px wide.


 

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative light design. 

This is the preferred design, as it answers customers' commonly asked questions about the use of the RealMe login service.

Primary login button element - light colour

The login box is designed to be 250px to 350px wide. It is fluid, so more or less text can be added to the <p> tag if the text needs to be changed.

The What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

 


Login component for header - light colour

When the RealMe login function is available on multiple webpages, this webpage header design can also be used.

This component has the same functionality as the primary design, with the question mark triggering the What's RealMe hover text.


Login secondary component - light colour

 Under special circumstances, the use this smaller secondary design may be acceptable. It is designed to be 125px to 250px wide.


 

 

The standard light blue colour is recommended, but if this does not suit the webpage design, there are alternative dark or light designs.

Primary assert button element - standard colour

This example illustrates wording that applies to the assertion of verified identity. The wording can be modified for other attributes such as verified address.

 

 

 

 Download this bundle [ZIP, 55 KB]  that contains html, css and images and choose the standard or alternative colours. 

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative dark design.

Primary assert button element - dark colour

This example illustrates wording that applies to the assertion of verified identity. The wording can be modified for other attributes such as verified address.

 

 

The standard light blue colour is recommended, but if this does not suit the webpage design, this is the alternative light design.

Primary assert button element - light colour

This example illustrates wording that applies to the assertion of verified identity. The wording can be modified for other attributes such as verified address.

 

 

What's RealMe? element

The downloadable page element bundle includes a default popup component for the What's RealMe? trigger. The primary RealMe button must include the What's RealMe? trigger, but developers may choose an alternative display method other than popup such as an accordion interface. The core infomation must be displayed on the agency website and not redirect to the RealMe website.

Default login popup The What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

If your organisation uses RealMe verified identity as well as the login service, then this is probably an opportunity to promote obtaining verified identity. If not, then just use the information about login service.

For users that want to find out more about the RealMe login service, include the website address, but don't make this a link that redirects the user away from the authentication flow. 

Assert popupThe What's RealMe? hover element is available in four width options: 420px, 550px, 300px, 200px, depending on the orientation (top left, top right, left and right) with height scaling to match.

If the website users may not know the difference between RealMe login and RealMe verified identity, then consider making the placement of Have you already verified your identity with RealMe? more prominent - such as before the assert button.

Discuss your organisation's process flow expectations with the RealMe integration team. If this is an opportunity to encourage individuals to obtain verified identity then make sure that this is promoted. Alternatively, if the default approach is to fallback to a manual identity proofing process, then promotion may not be useful.

In general, include as much information as appropriate without diverting the user to the RealMe website. If verified address is being promoted, use this page - https://www.realme.govt.nz/what-it-is/verify-your-identity/; for verified address, use this page - https://www.realme.govt.nz/what-it-is/verify-your-address/.

Subscribe