Displaying Images within a Portal
You can add images to any onboarding step template in the Instructions section to provide visual context for your onboardees, things like site maps, safety signage, uniform examples, or instructional photos.
To add an image, create or edit an onboarding step template, and in the Instruction section, upload your image (PNG or JPEG), and tick Display File Inline. This embeds the image directly within the onboarding flow rather than showing it as a clickable link.
Show Custom Button to Open Image
Alternatively, you can have a button display in place of the image and control the button label via the Button Label.
If ‘Display File Inline’ is not checked, the image will only display when the onboardee clicks the ‘View Image’ button (or whatever the Button Label has been set to).
The image will open in a dialog in the full width of the screen at 100% and also show a Zoom control, enabling the onboardee to zoom in or out of the image using the slider. This is very useful for larger or complex images or diagrams.
How images display in the portal
Inline images are displayed at full width within the onboarding portal, which has a maximum width of 1176 pixels. If your image is wider than 1176px, it will automatically scale down to fit so nothing gets cropped or cut off. Images narrower than 1176px will display at their original size.
The height of the image adjusts proportionally. This means you control the visual height of the step simply by choosing an image with the right dimensions. A tall image takes up more vertical space; a short, wide banner takes up less. There's no separate height setting to worry about.
Tips for displaying images
Aim for 1176px wide for inline images. If you want your image to span the full width of the portal, design or crop it to exactly 1176 pixels wide. This avoids any scaling and keeps things crisp and efficient.
Keep file sizes reasonable. Large images slow down the onboarding experience, especially on mobile. Aim for under 750KB where possible. Compress your images before uploading if needed, tools like TinyPNG or Squoosh work well for this.
Use PNG for diagrams, JPEG for photos. PNGs are better for sharp lines, text overlays, and graphics with flat colours. JPEGs are better for photographs and images with lots of detail.
Think mobile-first. Many onboardees will complete their onboarding on a phone. Wide images with fine detail or small text can be hard to read on smaller screens. Test your portal on a mobile device to make sure images are legible.
Use images to reduce text. A photo of the correct PPE (for example) is often clearer than a paragraph describing it. Site maps, evacuation routes, and annotated photos can replace lengthy written instructions.
