Dashboard Design

Dashboard Design in Clappia lets you customise what users see immediately after they log in to your workplace. Instead of a plain dashboard, you can add visual and informational elements such as banners, announcements, images, videos, embedded content, or custom HTML blocks.

This is commonly used to:

• Display company branding (banners, logos, visuals)
• Show internal announcements or notices
• Embed videos, dashboards, or external links
• Create notice boards or quick links for employees
• Control visibility of information based on user attributes

All elements added here appear above the app icons on the main dashboard and are visible only on the dashboard view.

‍

Where to Access Dashboard Design

Sign in to your Clappia workplace. From the left navigation panel, click More > Select Dashboard Design.

You will be taken to a preview view of your workplace dashboard.
At the top, you’ll see empty placeholder sections marked with + Add Element. These represent positions where dashboard elements can be added.

This page is a live preview; what you configure here is how users will see the dashboard when they log in.

‍

Adding Elements to the Dashboard

Click + Add Element at the position where you want the element to appear.

When you do this, a panel opens showing the available element types:

• Rich-Text / HTML
• Image
• Video
• Iframe
• Carousel
• Code Block

Each element is added independently and configured from the right-hand panel.

Placement behavior

Elements cannot be rearranged later.

To control its order, you must click + Add Element either above or below an existing element at the time of adding it.

‍

Element Types and How They Work

Rich-Text / HTML

This element is used to display formatted text or custom HTML content.

When selected, a text editor opens on the right side. This editor allows you to:

• Format text using headings, bold, italics, alignment, and lists
• Insert tables or images directly into the content
• Add hyperlinks to external websites or internal apps
• Switch to HTML source mode (<>) to paste or write raw HTML

This is particularly useful when you want to:

• Create announcement blocks
• Add notice boards or instructions
• Insert banners with clickable links
• Embed externally generated HTML content

If you are not familiar with writing HTML, you can generate simple HTML snippets using online HTML generators or tools like AI-based code generators and paste the output into the source view.

‍

Image

Use this element to upload and display static images such as banners or infographics.

Images are uploaded via drag-and-drop or file selection.

You can control how much horizontal space the image occupies by selecting the width of the image. If very tall or large images are uploaded, they may take up significant dashboard space. Adjust image dimensions before uploading if needed.

Images are useful for branding, announcements, or visual instructions.

‍

Video

This element lets you upload video files directly to the dashboard.

Available options:

• Muted – plays without sound
• Autoplay – plays automatically when the dashboard loads
• Show playback controls – allows users to play, pause, or scrub

Videos are useful for onboarding clips, internal announcements, or training messages.

‍

Iframe

The iframe element allows embedding external content using an embed source. Paste an embed URL or iframe code into the Enter source field.

Some common use cases:

• Embedding YouTube or other hosted videos
• Embedding dashboards, reports, or external tools

This is useful when content is hosted outside Clappia but needs to be visible on the dashboard.

The width and height can be adjusted inside the iframe code itself.

‍

Carousel

A carousel allows you to upload multiple images that users can scroll through. Images are uploaded together as a set.

Useful for rotating announcements, multiple banners in a single space, step-by-step visuals.

Like other elements, the carousel also supports display conditions and width control.

‍

Code Block

The Code Block is used for advanced customisation. It allows you to insert custom code to render dynamic content on the dashboard.

This block is typically used when:

• You need dynamic elements beyond standard formatting
• You want to reference workplace-level variables
• You want to build custom dashboard widgets

Because this involves code, it is usually configured by users familiar with HTML, CSS, or scripting logic. This block will be covered separately in more detail.

‍

Display Conditions

Every dashboard element supports a Display Condition in the right panel.

Display conditions allow you to control which users can see a specific element.

Type @ to see the available variables. These variables are based on user attributes. User attributes come from Workplace Settings → Users, where attributes like department, role, or custom fields are defined.

Example for display condition include:

• Showing announcements only to users from a specific department
• Show notices only to certain roles
• Hide internal content from general users

Each element’s visibility is evaluated independently based on the condition you define.

‍

Managing Existing Elements

For every element added to the dashboard:

• Delete – removes the element completely
• Copy – duplicates the element with the same configuration

If you want to replace content (for example, a different image or video), you can edit the element instead of deleting it.

‍

Important Behavior Notes

• Dashboard elements only appear on the dashboard view.
• Once a user opens an app or a folder, dashboard elements are not visible.
• Rearranging elements after adding them is not supported.
• Placement must be planned while adding elements using the appropriate + Add Element position.