Want your community’s navigation to match the look and feel of your existing website? Or maybe you need to include some external analytics/cookie scripts on your community? Use Server Side Includes (SSI) to include the contents of externally-hosted files on your community.
We support the following three types of SSI file:
- header.html: page header.
- footer.html: page footer.
- header_include.html: holds header and footer references to CSS, as well as JavaScript. You may also use script (e.g. analytics, cookie scripts) and style HTML tags here.
Important technical requirements (to avoid conflicts with our platform):
- Only add the code necessary to show your header/footer. Don’t simply copy over the full stylesheet and JavaScript library of your website. This would result in unnecessary page load and increase the risk of unwanted side effects.
- JavaScript included with SSI shouldn’t depend on 3rd party libraries in the inSided platform (e.g. jQuery, underscore etc).
- CSS included with SSI must be scoped/prefixed to HTML elements inside the SSI (eg. #header .ssi-header {...} ).
- JavaScript included with SSI mustn’t depend on any HTML elements outside of SSI.
- JavaScript included with SSI mustn’t overwrite any global variables.
- HTML tags included using SSI must be properly closed (every must have a pair).
- Paths to files (URLs)used in SSI CSS and HTML must be absolute urls using HTTPS protocol. Since the SSI is used on the inSided platform the relative paths aren’t available and will break the application.
- Don’t include a BOM (sometimes used to force UTF-8 encoding) in any of your files.
How To Include SSI Files On Your Community
- Go to Control → Customization → Third-party Scripts (for the SSI include url)
- Paste the URL of the location where your file is hosted in the SSO URL input. (below the Insert in <HEAD> field)
- Click Save changes and wait for the success confirmation.
- Review your changes: go to the Community Frontend, and perform a hard refresh in your browser to see the update.
How To Use SSI for your Header and Footer
- Go to Control → Customization → Header or Control → Customization → Footer
- Select Server Side Include (SSI) configuration
- Paste the URL of the location where your file is hosted in the appropriate input.
- Click Save changes and wait for the success confirmation.
- Review your changes: go to the Community Frontend, and perform a hard refresh in your browser to see the update.
Additional technical remarks:
- You may include your own fonts, but generally (most of) your fonts should be available within the community already. A simple ‘font: inherit’ should work okay.
- The community is built in a responsive way. Make sure your includes behave similarly (e.g. your markup should adjust to different screen sizes: desktop, tablet, and mobile). Our breakpoints are: small-screen: 420, medium-screen: 768, large-screen: 1025.
- Fold-out menus etc shouldn’t block user interaction on the forum when in a collapsed state. Make sure there aren’t any invisible layers that overlap with the rest of the community’s content.
- Using dynamic content is possible only using JavaScript, since HTML contents of SSI are cached by the inSided platform.
- HTML should be valid and well-formed.
- Your code should pass the appropriate validator tests.
Note:
- It’s up to you to to solve any visual/functional errors caused by not meeting our SSI requirements (detailed above).
- We cache your SSI. If you make a change to these files, go to Control and click the 'Update' button. Otherwise your changes will not show on the live community website.