What can I configure myself?

We will configure many of the visual elements of your intranet for you, and others are yours to own. We will, of course, discuss this with you during your Onboarding process. We’ve put together the list below as a brief overview. If you’d like to know the specifications for any assets you may want to provide, please refer to the Assets section below.

Component/AreaOwner (Interact / Client)
Logos ( Theme, Emails, Login ) and FaviconInteract or Client can upload via Control Panel
Login Page – Logo and Background ImageInteract or Client can upload via Control Panel
Rewards IconInteract or Client can upload via Control Panel
Theme CSS (i.e. Colors, Fonts) / StylesheetInteract Only**
Background Images behind Search bar, Masthead or FooterInteract Only**
Profile BannerInteract or Client can upload via Control Panel
Homepage Zone BackgroundsClient can upload via Manage Homepages
Application Bar IconsClient can upload via Control Panel
Block Editor Colour PaletteInteract or Client can edit via Control Panel
Mobile App – Colours and Logo ImageInteract or Client can edit via Control Panel
Homepage Layouts, Site Homepage LayoutsInteract and Client (We will help you get set up for launch)
Content Page TemplatesInteract and Client (We will help you get set up for launch)
Layout of content on additional pagesClient
Creation of images for use in contentClient

*Specific components/areas are defined in the page: Your Intranet Theme

** In the Manage Custom CSS area (via Control Panel), any Power User can, in theory, add CSS to override the styling of the Interact platform. However, this is not recommended usage of this area. The scenario in which you may wish to use this area, is if you decide to add your own HTML content into an HTML Widget, and use the Manage Custom CSS area to style your own HTML content.

We recommend reading through the Your Intranet Theme section on this website, from which you can declare specific colors or styles for as many of the listed Theme elements as you’d like. Furthermore, providing your own mockup or intranet style guide is also an option (see our Customers’ Examples for inspiration) but we recommend discussing this with us before proceeding.

Are there set specs for the assets to provide such as our logos?

Colors

We will ask you for at least three brand colors, which are typically provided as hexadecimal codes (ie. #0548AC). We will clarify your colors with you together on the initial design call, but you may specify these colors to us in advance.

Images

Please see the below list of specifications for image assets. Accepted formats include PNG, JPG, .PSD, Sketch, .AI and Figma.

LogoNo wider than 400px, no taller than 150px
Logo – MobileNo wider than 300px, no taller than 125px
Logo – Login PageNo wider than 300px, no taller than 125px
Logo – Emails & BroadcastsNo wider than 300px, no taller than 125px
Favicon32px x 32px
Breadcrumb IconNo wider than 250px, no taller than 100px
Login Background3 W : 2 H ratio. ie 1500px x 1000px (min width:1000px / max-width: 2000px)
Login Background – Mobile App960px x 960px
Rewards Icon200px x 200px
iPhone120px x 120px
iPhone Retina180px x 180px
iPad152px x 152px
iPad Retina167px x 167px
Homepage Zone ImageMinimum 1600px wide. Maximum 2000px wide. Maximum 1MB size.
Profile Banner Image1600px x 285px

Fonts

Purchased or Custom font: If using a licensed/purchased font family, you’ll need to provide the Web font files so they can be hosted on the intranet. File types typically include: WOFF, OTF, EOT, SVG. WOFF is optimal, to ensure widespread compatibility with web browsers. If using a font licensed through Adobe Fonts, please provide the default embed code for your project, and the font-family definitions to reference.

Websafe or Google font: If using a websafe font (ie. Arial) or one from Google’s library, just let us know which one you’d like to use.

Are there limits to what can be configured?

There are some areas where our ability to apply branding and visual customisations are more limited. We’ve outlined some of these areas below:

  • Notification Emails
    It is not possible to customise the standard notification emails sent by the Interact platform to your users. We can help to adjust the logo, if needed. (You can however, send your own emails via the Block Editor, which allows you to build a page on the intranet and send it as an email.)
  • Mobile App
    The Mobile App is built on a different framework to the web version of Interact, and as such we have more limited ability to influence the look-and-feel of the Mobile App. We can set the following colours within the Mobile App: Primary Accent Colour, App Bar Text and Background Colour, Text Colour.

What is an 'Custom Override'?

We are able to configure the look-and-feel of your Intranet via various application settings – we’ve done our best to outline these within the “Your Intranet Theme” section of this site. If you’d like to change something about your intranet, and we do not have the available settings to make that change for you, we may explore the route of applying a ‘custom override’.

A ‘custom override’ is how we refer to any piece of custom code (usually CSS) which we’d potentially inject into your intranet, in order to force something on your intranet to look a certain way (for example, to change the styling or to hide it completely). We’re not always able to do this, but in the instances where we explore adding a custom override, we will discuss this with you along with any implications.

There are a few important things to keep in mind when considering a custom override. These include:

  • Potential inconsistent experience: Interact cannot take custom overrides into account when testing new product releases, therefore the customisation may be impacted or reverted when a new Interact release is sent out. We will not be able to warn you of this beforehand.
  • Future maintenance is not guaranteed: If your custom override is impacted by new product release, we can review this via a Support ticket and try to re-instate the achieved effect – however, we can not guarantee that the custom override can be re-applied.
  • Limited scope of control: Any custom CSS added will usually only affect the web version of the Interact platform – it is typically unable to impact the Mobile App or other communication channels, such as emails sent out from the intranet.
  • Potential impact on accessibility: The accessibility of your intranet may be impacted by any custom CSS you may add. A user who navigates the intranet using a screenreader, for example, could be impacted if you use CSS to try to add/hide/change/re-order elements on a page.
  • Lack of translation: If content is added via CSS or JavaScript, this text will not translate like other content on the intranet

With that in mind, our general recommendation is to avoid proceeding with custom overrides so as to ensure a more stable, accessible experience for your users. We will discuss any instance of a potential custom override with you, on a case-by-case basis.

Is there any further image guidance?

Content Imagery – What size and format should our Featured Images and general imagery be?

JPEGs are great for photos and colorful images because they compress the file size, making them quicker to load. However, this compression can reduce image quality and they don’t support transparent backgrounds.

PNGs are better for images that need to stay sharp and clear, like graphics or images with text. They also support transparency, which is great for layering images. The downside is that PNG files are usually larger, which can slow down loading times.

Overall, we always recommend using JPEGs first because intranet homepages can contain lots of information, and keeping your file sizes small helps manage loading times and performance. However, PNGs are perfectly acceptable in moderation when image quality and transparency are key.

For specific sizes; we recommend that for images within the content, such as blog posts, should be 600-800 pixels wide and under 200 KB. Hero Images/Banners, such as those displaying in the Full Width Carousel, should be uploaded sparingly, and be between 1500-1800 pixels with a maximum file size of 600 KB.

Are there recommended sizes for other specific images on the intranet?

Featured Image (aka. the image you attach to a Content Page)
Please see the dedicated Featured Images Guide.

Category pages
There are no specific size recommendations for the Category List page specifically. The Associated Images guide (see the previous answer) has our advice regarding Associated Images, and the Category List page pulls through images just like a Widget does, therefore the same advice applies. It is possible to choose from different layouts for your Category List page, some of which do not feature an image at all.

Profile Badges
If you are adding Profile Badges on your intranet, our size recommendation is 75px x 75px.

Blogs
If you are using the Blog feature, there are different layouts to choose from. Our recommended size for the hero Blog image is as follows:

  • ‘Cover Background’ layout – 1200px width x 512px height
  • ‘Cover Split’ layout – 600px width x 400px height
  • ‘Cover Inline’ layout – 1042px width x 600px height

Is it possible for different users to have different Profile banner images?

No, not at this time. It is only possible to have one banner image, which will display on all profiles on the intranet.

Is it possible to change the default image on Blog?

No, not at this time. It is intended to be replaced within each unique post, rather than be a starting suggestion for your post’s main image.

Where do I set the alt text for a Featured Image?

Generally, decorative images do not require an alt tag. Given that the intention and best practice for Featured images is to upload decorative images, an alt tag is not required.

Do you have a list of all widgets?

Yes. Under “Manage Homepages” you will see a homepage called ‘Widget List‘. This homepage contains all content widget layouts, displayed for you to have a quick glance. If your intranet does not have this homepage, please request this via your Onboarding Manager.

Can I add my own CSS?

Yes, this is possible via the “Manage Custom CSS” page within Control Panel. For more information, see the Add your own custom code section.

Is there a 'dark mode' option?

Interact does not offer a ‘dark mode’ version of the software at this time. Some alternative options include:

  1. Within the intranet, we can add CSS Theme overrides to help you create a dark homepage. This utilises dark backgrounds on the homepage zones. All other pages of the intranet would retain their default white background.
  2. For users of Chrome, it has a built-in dark mode. Type chrome://flags/ in to the address bar and search for ‘dark mode’.
  3. It is possible to install a third-party add-on into the platform. These typically consist of a pop-out dialog box which allows users to select their own settings (such as high contrast colours or large text). Some popular examples are Userway and AccessiBe. Whilst these overlays are not designed specifically to provide a ‘dark mode’, many of them do have a dark/high contrast/inverted visual option. See the screenshot below for an example. Please note that Interact does not endorse, nor is affiliated with, any third-party solutions.