Branding Guide

 

 

IRIS OpenSpace enables accountancy practices to implement a white labelled secure document exchange and electronic document approval portal into their own websites.

 

This guide explores the functionality available and best practice for implementing successfully into your website; note, the implementation should be carried out by a website professional who has experience with web technologies such as CSS, HTML, JavaScript and depending on the website’s platform (ASP or PHP).

IRIS OpenSpace provides the following features enabling you to build your own, personalised, client portal:

  • Application Co-Branding and White Labelling; replace the IRIS logo with your own and change the colours of the application to match your branding.
  • Email Notification White Labelling; replace the IRIS images, add your practice's email disclaimer to automated email notifications, and even have them sent from your own address.
  • Customised Email Templates; amend and update the automated email templates that are sent to you and your clients.
  • The IRIS Support Team are only able to support the functionality in IRIS OpenSpace and are not able to support the various technologies that are outlined in this guide.

Features Overview

General Details

Open

The General Details section is for configuring the URL how your clients will access the application.

  • Portal Name: Input the name for your client portal, this will be used in the title bar of your user’s browsers and instead of the IRIS Logo if you do not upload your own.
  • URL Type: Choose from either a sub domain of irisopenspace.co.uk domain or External Website. 
    • Sub-domain allows your practice name to be prefixed to "irisopenspace.co.uk", so your logo can be displayed on the login page.
    • Only choose external website if you intend to embed IRIS Openspace into a website using an iFrame (as per Advanced Tutorial).
  • URL: Input your chosen sub domain or external website URL.  Please note; that entries into this field will affect the links that your clients receive in the automated notifications, therefore if not correctly setup those links will not work correctly. 
    • For URL type sub domain simply enter the prefix you wish to appear in front of IRISOpenSpace.co.uk i.e. andrewsandbrown for https://andrewsandbrown.irisopenspace.co.uk
    • For URL type external website enter the website address where your client portal page will be contained in an iFrame (see the Advanced Tutorial below for more information).
  • Log Out Return URL: This is the URL that you want your users to be sent back to after they log out of IRIS OpenSpace. Do not use this option if you plan to embed IRIS OpenSpace into an External Website using an an iFrame (see the Advanced Tutorial below for more information).
  • Email Handler: This is the specific page on your website that contains the IRIS OpenSpace iFrame, it provides the email notifications with links to redirect users correctly to an External Website.  This field must only be completed if you are embedding IRIS OpenSpace into an External Website with an iFrame (as per the Advanced Tutorial).
  • Custom Folder: The unique reference for your customised CSS; this reference is required f you plan to embed IRIS OpenSpace into an External Website using an an iFrame. (as per Advanced Tutorial).
If you are in any doubt about how to correctly configure the URL Type, URL and Email Handler fields please consult with your website developer before proceeding; incorrect configuration may result in users receiving email notifications with broken links.

Logo & Colours

Open

The Logos & Colours section is where you can upload your practice logo and customise the colour scheme of IRIS OpenSpace that your users will see when they login into your account.

  • Practice Logo: Upload your practices logo to replace the IRIS logo on the login screen and in the footer bar. You can also replace the IRIS logo for users who login via your chosen Sub-Domain (see General Details) the IRIS Logo is replaced there also.  We recommend an image that is 348 pixels high and 66 pixels wide to get the optimum presentation of your logo.
  • Browser Icon: Upload a FAVicon to replace the IRIS icon; this is the icon that your users browsers will display when they bookmark/favourite your client portal.
  • Show Header Bar Logo: This will place your practice logo at the top of the application instead of in the footer bar, when clicked this will display a small business card with your practice contact details taken from the Settings tab.
  • Desktop Colours: Change the colours of IRIS OpenSpace to match your practice's branding, this section specifically deals with what users on desktop/laptop computers will see.  You can change the colour of additional items by creating a CSS file to upload into the Advanced section, some samples are contained in the download below.
  • Mobile Colours: This section specifically deals with the colour scheme of IRIS OpenSpace when your users login on a mobile device (smart phone or tablet)
  • Advanced: Advanced is not supported by IRIS; it allows a website developer to fully customise all aspects of IRIS OpenSpace. Sample CSS files are available to download for your website developer to get started.
  • Status: Set to 'Live' to turn on your customisations; if set to "disabled" then IRIS OpenSpace will use the standard IRIS branding and logo.

Download Sample CSS Files

SMTP Settings

Open

To send the IRIS OpenSpace email notifications from your practice email domain complete the SMTP Settings section with your email server details:

  • Server: Enter the address of your outbound email server eg. smtp.domain.co.uk
  • Port: Enter the port number required by your outbound email email server eg. 25
  • Enable SSL: Select Enable SSL if your email server operates through a secure port
  • Username: Enter the username for the email address that will be put into the From Address
  • Password: Input the relevant password
  • From Address: Enter the reply address that the emails show as coming from
  • Status: Set to "Live" when you have confirmed the SMTP settings are correct
  • Send Test Email: Click Send Test Email to send a test message to your email address

Error messages displayed when sending testing emails from the SMTP Settings area will have come from your email server, you will need to look at your email server logs to successfully diagnose any issues you encounter.

If you need to 'white list' the IRIS OpenSpace IP addresses on for you email server to allow email notifications to come through please add the following: 168.63.8.45 and 65.52.144.68.

Please note that configuring your email servers to allow IRIS OpenSpace to send email notifications is not supported by the IRIS Technical Support Team. If you are experiencing problems please contact your IT administrator.

Email General

Open

Tailor the automated email notifications generic content:

  • Custom Disclaimer: Enter your practice's email disclaimer here, this email disclaimer is appended to all email messages sent by IRIS OpenSpace.  When messages are sent using your own SMTP server the standard IRIS disclaimer is removed.
  • Email Header: Upload your own image to go at the top of each email notification; the recommended size is 820 pixels to avoid your image being displayed incorrectly with a height of 110 pixels.
  • Email Footer: Upload your own image to go at the bottom of each email notification; the recommended size is 820 pixels to avoid your image being displayed incorrectly with a height of 90 pixels.
  • Status: Set to "Live" when you have confirmed the SMTP settings are correct

The IRIS image(s) will be displayed in all email notifications unless they are both replaced, a blank image is supplied in the Sample Files.

Email Templates

Open

The content automated emails generated by IRIS OpenSpace can be edited in the Email Templates section:

  • Template: Select the email that you want to edit, a description of the template is displayed on the right-hand side of the drop-down.
  • Email Tags: Available tags for the selected template can be added to the subject and body of the email notification.
  • Subject: Change the subject line of the selected email notification.
  • Message Body: Edit the contents of the selected email notification with a WYSIWYG editor.
  • Sent Test Email: Send a sample of the edited email to your email address prior to Save.
  • Reset to Default: Undo your changes and revert to the standard template.

Note: The 'Multiple Files Added...' templates have two templates; the one labelled 'Body' contains the message before the individual files are listed using the other template which just contains ##FIle_Name##.

Login Code

Open

The Login Code can be copied into a page on your website and your users will be able to log into IRIS OpenSpace directly from your website.

This can be found by logging in to OpenSpace as admin user, go to settings, customisation, login code.

Enquiry Forms

Open

IRIS accountants can now embed an enquiry form into their website to capture enquiries from potential new clients. These enquiries will then be passed directly into their OpenSpace account, with a notification sent to the practice to enable them to action the enquiry and capture new clients, provisioning an OpenSpace account seamlessly

To find out more, click here

Miscellaneous

Open
  • e-Approvals: When clients approve PDF documents IRIS OpenSpace inserts a coversheet that contain the approvers details.  This coversheet contains the IRIS logo, to replace the logo with your own set the Status to 'Live'.
  • What's New: When IRIS updates IRIS OpenSpace we display a What's New dialog that explains any new functionality that we have added; this can be disabled from view for your clients and your staff users as required.

Tutorials

Website Integration - Basic

Open

The simplest integration is to put a button or a link on your website that links to your chosen subdomain, i.e. https://yoursubdomain.irisopenspace.co.uk

The steps to achieving this are as follows:

General Details:

  1. Input a Portal Name.
  2. Select URL type as IRIS OpenSpace subdomain.
  3. Input your chosen subdomain (i.e. practice name).
  4. Leave email handler blank.

Logos & Colours:

  1. Upload your practice logo.
  2. Change the colours of the application as necessary (if at all).
  3. Set status to Live and Save.

On your website:

  1. Create a hyperlink on your website to your subdomain of IRIS OpenSpace, ensuring you are using https://subdomain.irisopenspace.co.uk

Please note that modifying your website is not supported by the IRIS Support team.

Example Website Login: john.smith@client.co.uk Password: Pa55word

Website Integration - Intermediate

Open

In this example we will explain how to embed a login 'widget' into your website, this will provide your users with a way to login into IRIS OpenSpace from your website; the users browser will display your branded version of the full application.

The steps to achieving this are as follows:

General Details:

  1. Input a Portal Name.
  2. Select URL type as IRIS OpenSpace subdomain.
  3. Input your chosen subdomain (i.e. practice name).
  4. Leave email handler blank.

Logos & Colours:

  1. Upload your practice logo.
  2. Change the colours of the application as necessary (if at all).
  3. Set status to Live and Save.

On your website:

  1. Copy the HTML code from the 'Login Code' section.
  2. Paste the HTML code into the desired location on your website.
  3. Add the parameter target="_blank" to the FORM tag if you would like the user's browser to open a new tab or window.

Example Website Login: john.smith@client.co.uk Password: Pa55word

Please note that modifying your website is not supported by the IRIS Support team.

Website Integration - Advanced

Open

The most comprehensive integration solution is to fully embed IRIS OpenSpace into your website using an iFrame.  This solution is complex due to the sophisticated functionality in the application.

Please note using advanced integration on apple devices has issues viewing documents directly in the iFrame, if you have customers reporting this may be best to use intermediate branding or advise they use www.irisopenspace.co.uk. For further information refer to https://discussions.apple.com/message/28681171#28681171 

This tutorial uses our demonstration website as an example, where the page url of the iFrame is at http://www.andrewsandbrown.com/client_login/advanced.php.

The steps to achieving this are as follows:

General Details:

  1. Input a Portal Name.
  2. Select URL type as External Website.
  3. Input your website URL; i.e. http://www.andrewsandbrown.co.uk
  4. Input the path and specific page that will contain the iFrame into the Email Handler field i.e. client_login/openspace_login.php
  5. Note down the unique Custom Folder code.

Logos & Colours:

  1. Upload your practice logo.
  2. Change the colours of the application as neccessary (if at all).
  3. Set status to Live and Save.

On your website:

The page that contains the iFrame will require JavaScript to ensure that parameters in links sent to your users via email notifications are passed into the iFrame correctly.  Be aware that some CMS systems (WordPress, Joomla, etc.) will strip out JavaScript that is added into a normal content page, please consult with your CMS system provider if you are experiencing problems.

  1. Add the following code into the header of the page contains the iFrame:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     
  2.  Add the following iFrame into the body of your page:

    <iframe id="OpenspaceIframe" src="https://www.irisopenspace.co.uk/Account/ClientLogOn?autoLogin=true&iframe=true&CustomCssFolder=YOUR-CUSTOM-FOLDER-CODE" width="100%" height="100%"></iframe>

    Note: Please don't forget to insert your custom folder code into the iframe code, this can be found in the General Details section of Customisation under Settings.
     
  3. Add the following JavaScript to the body of your page, after the iFrame:

    <script type="text/javascript">
    if(decodeURIComponent(location.search.substr(location.search.indexOf("=") + 1) == "") == 'false')
    {
    $("#OpenspaceIframe").attr('src',"https://www.irisopenspace.co.uk/" + decodeURIComponent(location.search.substr(location.search.indexOf("=") + 1) + '?autoLogin=true&iframe=true&CustomCssFolder=YOUR-CUSTOM-FOLDER-CODE'))
    }
    </script>

    Note: Please don't forget to insert your custom folder code into the iframe code, this can be found in the General Details section of Customisation under Settings.

  4. Once you have created the page you must test that the JavaScript is functioning correctly.

    Testing the JavaScript can be done requesting a Password Reset link (click Forgotten Password on the login screen and enter your email address. If the link in the email loads your website with the 'Enter your chosen password' screen then it is working correctly, if you get the login screen then it is not working correctly.

Mobile Devices

IRIS OpenSpace has a mobile interface which will be displayed in the iFrame when a user accesses your website from a smart phone or tablet device.  If your website is not responsive to mobile device screens then you will have further complications embedding IRIS OpenSpace using iFrames.

We recommend you insert the following into the header of your page that contains the iFrame to help with mobile devices:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Download code samples Example Website Login: john.smith@client.co.uk Password: Pa55word

Please note that modifying your website is not supported by the IRIS Support team.

Using a Microsoft Exchange Server to relay email notifications

Open

The following guide is to help you configure your Microsoft Exchange Server to allow IRIS OpenSpace to relay email notifications to your users from your domain.  When your Microsoft Exchange Server is not correctly configured you will get "Error failed to send test message" in the SMTP Details section.

  1. Open Exchange Management Console and select Server Configuration > Hub Transport
  2. From the right-hand Actions menu click New Receive Connector and give the connector a name.
  3. Click Edit and input the port of your choosing.
  4. Specify the FQDN of the connection (this can be the same as your existing Receive Connector).
  5. Click Next and then New to complete the setup
  6. Open the newly created connector.
  7. In the Authentication tab ensure that TLS and Basic Authentication are selected.
  8. On the Permissions tab ensure that Exchange users is selected.
  9. Open the Exchange Management Shell and enter the following command:

    Get-ReceiveConnector "NAME_OF_YOUR_CONNECTOR" | Add-ADPermission -User "NT AUTHORITY\ANONYMOUS LOGON" -ExtendedRights "Ms-Exch-SMTP-Accept-Any-Recipient"

  10. Ensure that the Firewall on your local server is open for the port that you specified.
  11. Ensure that your router has Port Forwarding enabled to forward all traffic on the port (point 3) you specified to the server.
  12. Login to IRIS OpenSpace
  13. Select Settings > Customisation > SMTP Settings
  14. Enter the FQDN for your server in the Server field.
  15. Enter the port you chose (point 3).
  16. Enter the domain username and password that will be used for sending email notifications.
  17. Enter the email address that is linked to the username into the From address.

Error messages displayed when sending testing emails from the SMTP Settings area will have come from your email server, you will need to look at your email server logs to successfully diagnose any issues you encounter.

Please note that configuring your email servers to allow IRIS OpenSpace to send email notifications is not supported by the IRIS Technical Support team. If you are experiencing problems please contact your IT administrator.

IRIS on Twitter IRIS blog IRIS on LinkedIn IRIS on YouTube