Add your own CSS code

You are able to add your own custom CSS to your intranet, via the “Custom CSS” page within the “Developer Framework” section of the Control Panel. Our recommended use of the CSS area is to add styling to HTML content which you have added within a HTML Widget, the Homepage Header area or a Homepage Footer area. This way of working separates the code responsible for the look and feel from the code that adds the actual information on the page.

Note: We do have some ready-made examples of this type of content on the Widget HTML homepage on your intranet – namely our banners and icon buttons that we refer to as “Quick Links“. These may be sufficient for your needs before you consider creating your own HTML.

Please bear in mind that we recommend any classes and elements you create do not conflict with our existing HTML elements or attempt to re-style them, since these items use styles within the underlying theme that are hidden from view.

Similarly, and crucially, you should avoid trying to re-style generic classes such as container and row when creating HTML content. The product is based on a modified version of the Bootstrap framework, and targeting such generic class names could have unintended effects elsewhere in the product’s UI.

Using AI to generate CSS and HTML

AI tools are becoming increasingly useful when creating custom HTML content and widgets for your intranet. However, it is important to note that AI-generated code may introduce class names, font definitions or styles that conflict with the existing Interact product.

AI may also generate broad CSS selectors, such as body and html, or introduce its own fonts, colours, spacing and other visual styles. These can inadvertently affect other areas of your intranet or create a custom widget that looks inconsistent with your existing theme, even when the code itself functions correctly.

When using AI to create custom widgets, we recommend being clear in your prompts and asking AI to:

• Avoid generic class names: Ensure any new classes are specific to your custom content and do not conflict with existing product classes. Avoid generic names such as row or container, and broad selectors such as body and html that could affect other areas of the platform.
• Avoid unintended conflicts with existing styles: Do not unnecessarily redefine existing product styles, theme styles, variables or font settings when creating custom widgets. Where changes to existing styling are required, we strongly recommend contacting Interact Support.
• Maintain visual consistency with your intranet: Custom HTML and ADK widgets may introduce their own fonts, colours, spacing or other styling that differs from your existing Interact theme. Even when the widget functions correctly, this can result in an inconsistent appearance. Where possible, aim to follow your intranet’s existing design conventions rather than introducing a separate visual style.
• Review and test your code: If in doubt, check any AI-generated HTML and CSS on a duplicate homepage or using a test user, where possible. Pay particular attention to how your custom content appears across different screen sizes and within the surrounding page layout.

Tip: When prompting AI, explain that the code is for a custom Interact widget. Ask it to use unique class names, avoid broad CSS or Bootstrap selectors, avoid introducing new font styles or overriding existing font settings, and keep all styling specific to the content being created. You can also ask AI to follow your existing intranet’s visual style rather than introducing a completely new design.

Note: We recommend using the Custom CSS area to store your CSS rather than placing it directly inside each HTML widget’s source code. Custom JavaScript should also be added to the Masterpage JavaScript area rather than directly on the page.

Important considerations when using Custom CSS

We strongly advise against using the “Manage Custom CSS” page to try to alter the existing layout and appearance of our platform. Reasons for this include:

• Potential inconsistent experience: Interact cannot take your custom code into account when testing new product releases. Therefore, your code may be affected or undone when a new Interact release is sent out. We will not be able to warn you of this beforehand.
• Ongoing maintenance: Interact’s Support team can advise on a case-by-case basis but cannot maintain or ‘fix’ your code. If your code causes issues on your site, Interact can help to confirm this and would usually advise you to remove it.
• Limited scope of control: Any custom CSS added will usually affect the web version of the Interact platform. It is typically unable to impact the Mobile App or any other channel, such as emails.
• Potential impact on accessibility: The accessibility of your intranet may be impacted by any custom CSS you add. A user who navigates the intranet using a screen reader, for example, could be impacted if you use CSS to try to add, hide, change or re-order elements on a page.
• Lack of translation: If content is added via CSS, such as using a pseudo-element, this text will not translate like other content on the intranet.

Finally, whilst we are happy to help where possible, it’s important to keep in mind that any code you add here is your own responsibility. We advise proceeding with caution when injecting your own code into our software.