To provide a seamless and trustworthy experience for merchants, embedded apps should feel like a native extension of the Salla Merchant Dashboard. This guide outlines the visual and functional requirements for designing your app.Key Concepts#
SDK Components
Mandatory use of native UI components for core interactions.
Visual Identity
Colors, typography, and iconography from the Salla Brand.
Layout & Spacing
Grid systems and spacing rules for consistent alignment.
Theme Support
Implementing Dark and Light mode synchronization.1. Using SDK Components#
Using the Embedded SDK Modules is not just a recommendation—it is a requirement for core dashboard interactions. This ensures that users don't face fragmented UI patterns.Use Methods, Not Events#
Crucial: Always use the high-level SDK methods (e.g., embedded.ui.toast.success) instead of sending postMessage events directly.Future Proofing: The internal message structure or event names may change in future versions.
Consistency: SDK methods handle validation and error states that direct events might bypass.
Abstraction: The SDK provides a clean API that hides the complexity of the underlying communication protocol.
2. Visual Identity#
Brand Colors#
Salla's core palette defines the look and feel of the Merchant Dashboard. Use these HSL values (or their hex equivalents) for your components to ensure they match the merchant's current theme.| Color | HSL Value | Hex Equivalent | Use Case |
|---|
primary | 189 100% 17% | #004d5b | Main brand color, deep teal headings. |
secondary | 163 100% 82% | #73fcd7 | Mint/Teal accents, active states. |
success | 157 100% 34% | #00b259 | Positive feedback, active status. |
danger | 358 89% 64% | #f5434a | Errors and destructive actions. |
bg-main | 0 0% 97% | #f8f8f8 | Main dashboard workspace background. |
Typography#
Salla uses the PingARLT font family for a professional, readable experience across Arabic and English.Consistency: Ensure your app uses a clean sans-serif stack that matches the dashboard's weight and spacing.
Iconography#
Salla utilizes the Hugeicons library to maintain a clean, geometric, and modern visual language.Consistency: Use Hugeicons to match the native dashboard aesthetic. Stroke to Shape: Ensure icons maintain consistent stroke weights. If you are using SVG versions, convert strokes to shapes before scaling to maintain visual integrity.
Native Context: SDK methods will use the same icons. For example setAction allow you to pass icon class names directly. Use the standard Hugeicons class naming convention (e.g., hgi hgi-stroke hgi-star).
3. Layout & Spacing#
The "No-Chrome" Rule#
Your app runs inside the Salla Dashboard. It should not attempt to replicate the dashboard's navigation or layout.No Sidebar: Do not include a side navigation menu. Use the dashboard's native app navigation.
No Top Navbar: Do not add a top header or breadcrumbs inside your iframe. Use embedded.page.setTitle() and embedded.nav.setAction() instead.
Full Width: Your content should expand to fill the provided iframe container.
Good vs. Bad Integration#
1.
An integrated app uses native dashboard components and focuses only on its own functional logic.
2.
The app adheres to Salla's Dashboard theme and colors to provide visual consistency and native UI experience.
4. Theme Support (Light & Dark)#
The Salla Dashboard supports dynamic theme switching. Your app must respond to these changes.Syncing: Listen for theme changes using embedded.onThemeChange().
Contrast: Ensure all elements are legible in both light and dark modes by using the dashboard's semantic color variables where possible.
Next Steps#
Create an Embedded App
Browse the full list of available modules to enhance your app's functionality.
Start Developing
Explore the testing playground to boost your embedded app implementation. Modified at 2026-02-02 12:43:20
