Dashboard Overview

Layout Structure

The Yaplet dashboard follows a consistent layout across all pages, designed to keep you productive without getting lost.

Sidebar (Left)

The sidebar is your main navigation hub. It's always visible on desktop and collapsible on mobile. It contains:

• Logo and shift timer at the top — the shift timer shows your active shift if time management is enabled
• Search button — opens a global search palette to quickly jump to any page
• Navigation menu — organized into labeled groups (see below)
• User menu at the bottom — access your profile, settings, and organization switching

Notification Bell

Next to the logo at the top of the sidebar, you'll find a bell icon. This is your notification center — it shows a red badge when you have unread notifications.

Hover over the bell to open the notifications popover. Each notification displays a title, optional description, a timestamp, and a color-coded icon. You may receive notifications about:

• Subscription updates — plan changes, trial expiration, billing events
• Platform updates — new features, maintenance notices, important announcements
• Organization messages — direct notifications sent by your organization's owner or admins (e.g., shift reminders, policy changes, team announcements). See Sending Notifications on the Organizations page for details.

If a notification includes a link, click it or press View to navigate directly to the relevant page. You can dismiss individual notifications with the X button, or clear everything at once with Dismiss all.

Content Area (Center)

The main content area takes up the remaining space. Most pages follow this structure:

• Navbar at the top with the page title, an optional back button, and action buttons on the right
• Content sections below, using a consistent card and section pattern

Some pages like the Inbox use a multi-panel layout with a list panel, chat panel, and a details sidebar — all responsive across screen sizes.

Navigation Menu

The sidebar menu is organized into five groups, each containing features gated by your role and permissions:

Global Search

Press the Search button in the sidebar (or use the keyboard shortcut) to open the command palette. It uses fuzzy search across all available navigation items, letting you quickly jump to any page without clicking through menus.

User Menu

Click your avatar at the bottom-left of the sidebar to open the user dropdown. From here you can:

• Toggle dark mode — switch between light and dark themes
• View your balance and top up Yaplet credits
• Open user settings — update your profile, avatar, and preferences
• Set your status — toggle between Online and Offline so your team knows your availability
• Manage shifts — start or end a shift (if time management is enabled)
• Switch organizations — if you belong to multiple teams, switch between them instantly
• Sign out

Page Navigation

Many dashboard pages use a shared navigation system to manage contextual navigation:

• Back button — when you navigate into a detail view (e.g., opening a specific ticket or campaign), a back arrow appears in the top navbar to return to the parent page
• Breadcrumbs — some pages display breadcrumb trails to show where you are in the hierarchy

This makes it easy to drill into details and get back without losing your place.

Toast Notifications

Actions across the dashboard trigger toast notifications — small popups that appear in the corner of your screen to confirm success or report errors. For example:

• Saving settings → "Settings saved successfully"
• An API error → "Something went wrong"
• Switching organizations → "Switched to [org name]"

Toasts disappear automatically after a few seconds. They use color-coded styling: "success" for confirmations, "error" for failures, and "warning" for important notices.

Keyboard Shortcuts

The dashboard supports keyboard shortcuts for common actions:

Responsive Design

The dashboard adapts to your screen size:

• Mobile — the sidebar collapses into a toggle menu, and multi-panel pages show one panel at a time
• Tablet — sidebar is accessible, and two-panel layouts are shown side by side
• Desktop — full sidebar, all panels visible (e.g., the Inbox shows list + chat + details simultaneously)

Permission-Based Access

Every feature in the dashboard is gated by permissions tied to your role within the organization. If a page or menu item requires a permission you don't have, it simply won't appear. Page-level permissions are also enforced server-side, so even direct URL access is protected.

Overview Page

The Overview page is the first thing you see after logging into the dashboard. It provides a real-time snapshot of your workspace — key metrics, team activity, AI performance, and account status — all in one place.

Setup Checklist

If you're new to Yaplet, a setup checklist appears at the top of the Overview page to guide you through the essential configuration steps. It tracks your progress through two phases:

• Get Started — essential steps like setting your profile picture, customizing and installing your widget, configuring your AI chatbot, and visiting the inbox and visitors pages
• Go Further — bonus steps that introduce additional features like the knowledge base, newsletter, outreach, reports, session replays, time management, and security settings

Each step links directly to the relevant page. Completed steps are checked off automatically — for example, simply visiting the Inbox will mark that step as done. A progress bar shows your overall completion percentage. Once all essential steps are finished, a brief celebration animation plays.

Key Metrics

A row of five stat cards gives you an instant overview:

Each card is clickable and takes you to the relevant page (Inbox, Reports, Tickets, or Visitors).

Widget Activity

Shows which widgets had conversations in the last 7 days. Each widget displays its chat and visitor count with a visual progress bar, making it easy to compare activity across widgets.

Team Workload

Displays your team's live availability and chat distribution. You can see which agents are online, how many active chats each one is handling, and their average response time. Each agent row links to their individual report.

Recent Conversations

Lists the latest conversations across all widgets. Each row links directly to that chat in the Inbox. New unassigned chats are highlighted with a badge.

AI Chatbot (7d)

A performance snapshot of your AI chatbot over the past 7 days, including:

• Total AI responses
• Success and failure rates
• Number of chats handled by AI vs. total chats
• A daily trend chart showing successful vs. failed responses

Subscription & Usage

Three cards at the bottom show your account status:

• Current Plan — your active subscription plan and renewal date
• AI Credits Used — total credit consumption for the current billing period, broken down by LLM, Embedding, and Voice usage
• Limits — current seat and widget usage against your plan limits

Explore the Dashboard