Building your onboarding pages – Ciphr

Your onboarding pages are often the first thing a new starter sees, so they’re worth getting right. This guide shows you how to switch on the onboarding tools, set up your pages and tabs, and edit them in the HTML editor.

Overview
Accessing content management and building pages and tabs
Accessing the code editor
HTML principles
Our templates
Things to consider
Need help?

Overview

Your onboarding pages are the first thing a new starter sees when they join, so they’re well worth getting right. This guide walks you through building and editing them, from switching on the tools to dropping in ready-made templates and making them your own.

You don’t need to be a developer to follow along. If you can copy, paste, and swap out a bit of text, you can build a warm, on-brand welcome. We’ll explain the technical bits in plain English as we go, and the templates we’ve provided below do most of the heavy lifting for you.

By the end, you’ll be able to switch on the onboarding tools, create a new piece of onboarding content, build your page and tab structure, and edit each tab using the HTML editor.

↑ Back to top

Accessing content management and building pages and tabs

First, let’s make sure the onboarding tools are switched on. Then we’ll create a new piece of onboarding content and build out its pages and tabs.

Can’t see Onboarding in your menu yet? You’ll need to switch it on first:

Go to System Configuration > Role Management, then pick the relevant user
Go to Pages, and search for Get Started
Set to Access
Click Review Changes, then Update
Then repeat for the Content Management page, so you have access to both pages

Note: For more information on Onboarding user roles, see the related guide

Once you can see Onboarding in your menu, you’ll find two options:

Get Started: Shows onboarding as it currently looks, so you can preview it as a new starter would see it
Content Management: Where you configure your onboarding content

↑ Back to top

Building your onboarding content structure

Content Management lists all the onboarding content that’s already been set up. Anything marked Yes in the Default? column is the version that loads when someone clicks Get Started.

To create a new piece of onboarding content:

Select Content Management
Click Create
Give it a name
Tick Default? if this should be the version that loads for new starters
Click Select to pick an existing piece of onboarding content to clone as your starting point
Click Save

Let's start by building the structure.

Note: a page is a top-level section in the onboarding menu, for example Welcome, About us, or Benefits. New starters move between pages using the main navigation.

Click into your onboarding content and select Pages
Click Create to add a new page
Give it a Title, Description, and Display Order (this controls where the page sits in the sequence)
Click Save
Alternatively, to edit an existing page, click into the Page you want to change, where you can rename it, change the description or update its Display Order

We're now going to add tabs within a page.

Click into the page and select Tab List
Click Create
Give the tab a Title and Display Order (this controls the order tabs appear within that page)
Click Create
Alternatively, to edit an existing page, click into the Tab List, click on the Tab you want to change. You can then rename it or update its Display Order

↑ Back to top

Accessing the code editor

Click into the Tab you want to edit and select Edit Content. This opens the Format window first.

Note: We don’t recommend editing your content using the Format window. It won’t accurately show how the finished page looks, and it won’t let you test any interactive elements you’ve added, such as buttons, accordions, or pop-ups.

Instead, use the HTML editor:

Click the </> button to open the HTML/code editor
Add your HTML/CSS
Click Update, then Save

↑ Back to top

HTML principles

A few things about how onboarding pages work under the hood, which affect how you should write your HTML:

All Tab content loads into the page at the same time, even though only one tab is visible at once. This is why unique IDs matter (see Things to consider below)
Your onboarding system already applies a stylesheet on top of your HTML, built on Bootstrap 4. This is what picks up your HR system's branding automatically and gives you access to Bootstrap 4 components like row/col-* grids, accordion, card, modal and carousel without you needing to write that CSS yourself
There are two types of layout we use in our templates: predefined layouts (built by Ciphr, where only text and images can be changed) and custom column layouts (1–4 columns, where you control the HTML within each column)

↑ Back to top

A quick primer on HTML and CSS

If you’re new to this, here’s what you’re actually looking at in the code editor:

HTML (HyperText Markup Language) structures your content. Paragraphs, headings, images, links and buttons are all built using HTML “tags”. For example <p> for a paragraph, <img> for an image, or <a> for a link
CSS (Cascading Style Sheets) controls how that content looks, such as: colours, spacing, sizing and layout. You can add CSS inline on a single HTML element (e.g. style="color: red;"), or inside a <style> block to style several elements at once

The templates provided below combine both: HTML to lay out the content, and CSS, often built into the classes the templates already use, to style it.

Tips: If HTML and CSS feel unfamiliar, don’t worry. Using the templates we’ve provided below, means you won’t need to write either from scratch. All you need to do is copy a template and change the words and images inside it.

As you work through the templates below, keep an eye out for the short “Copying this template?” notes next to the accordions and the image carousel. They flag the one extra step, updating an ID, that you’ll need on top of changing the text.

↑ Back to top

Bootstrap 4

The HTML editor draws on Bootstrap 4, a CSS framework that’s already loaded for you. This gives you a library of ready-made layout and interactive components without having to build them from scratch, such as: grids, buttons, modals (pop-ups), accordions, carousels, and tabs. It’s why the templates below use classes like row/col-* for layout, modal for pop-ups, accordion for collapsible sections, and card for boxed content.

Because Bootstrap’s classes are loaded across every tab at once (see Things to consider below), avoid editing generic Bootstrap classes directly, such as .row, .col-*, or .card. If you want to change how a Bootstrap component looks, scope your CSS to a specific ID rather than the class itself, in the same way as the unique ID guidance below.

Learn more

If you’d like to go further than the templates below, here are some good places to start:

HTML: MDN: Learn web development and Basic HTML syntax
CSS: MDN: CSS styling basics
Bootstrap 4: Components (the sidebar on this page lists every component, including the ones the templates below use, such as modals, accordions and carousels) and Layout / Grid system (make sure you’re on the 4.6 docs, not a later version as the onboarding HTML editor uses Bootstrap 4, and classes and behaviour can differ in newer versions)
Icons: Font Awesome

Here’s what’s supported and what isn’t when writing your own HTML:

Supported	Not supported
Standard HTML tags	JavaScript: all <script> blocks are stripped for security reasons upon saving your HTML content
External image links	Inline event handlers (e.g. onclick)
Inline CSS, where appropriate	Uploading images directly within onboarding
<style> blocks, with careful scoping (see Things to consider)	iframes connected to unauthenticated content

Remember: Remember: if you’re editing a page or tab that Ciphr originally built, or anything containing custom layouts or HTML, always use the HTML editor rather than the Format window. The Format window can inject unwanted markup and doesn’t load the real stylesheet, so it will misrepresent how your page actually looks.

↑ Back to top

Our templates

Feeling confident? You can build your onboarding pages exactly the way you want them. Prefer a head start? The templates below give you a ready-made starting point. Copy the code into the HTML editor and swap in your own text, links and images.

Each template below shows a finished layout and the code behind it. Pick the one closest to what you need, copy it into the HTML editor, and make it yours.

Remember: You don’t need to set any colours yourself. Buttons, accordions, text boxes and other components automatically pick up your organisation’s brand colours from your HR system, so everything stays on-brand with no extra effort.

Tip: In the code blocks below, the plain text between tags (the words inside <p> and </p>, for example), image file paths, link addresses and button labels are usually what you’ll change. Class names and other attributes, like class="ob-row" or data-toggle="modal", tell the page how to behave, so leave those as they are unless a note tells you otherwise.