Internal Dashboard Component Guidelines

3 min read
·
Last updated on Feb 14, 2023
In this article, we’ll review some general guidelines that we recommend for your dashboard component, so that your app feels native to the Wix platform.
Tip:
We recommend checking out the App Installation Flow, if you haven't already. Being familiar with the basic user flow will help you design an app that integrates seamlessly with our platform.

Size

  • Keep the maximum width in mind: Use the full screen, with a width up to 1200px.
  • App height is based on its content: The browser adds scrollbars when needed, so don’t add your own.

App setup

Make it easy for users to to set up your app:

  • Put the focus on your app’s main action: Have one main action, and put it “above the fold.”
  • Guide users with hint text: For example, the default text in this image  – Free cup of coffee – gives users an idea of what to write.


  • Keep explanations short: If there’s a complicated setting, add a tooltip with more information.
  • Does your app have a website component? Add a link that sends users directly to the website component in the editor (Note for Developers: Use the Wix.Dashboard.getEditorUrl method).
  • Do users need to upload media files? Open the Wix Media Manager so that users can choose a media file they already uploaded to Wix servers (image, document, audio, or SWF). (Note for Developers: Use the Wix.Dashboard.openMediaDialog SDK method.)

Popups and modals

If you need to open a window or dialog box in your app:

  • Use the Wix modal: It’s a lightbox-style window that opens over the Wix dashboard (Note for Developers: Open the Wix modal using the Wix.Dashboard.openModal SDK method). Users can close it by clicking the close button or anywhere outside of the lightbox, and you can close it within the app.

  • Keep site visitors within the Wix platform: Don’t open windows in a new tab or use browser-native popups such as window.alert(), window.prompt(), and window.confirm().
  • The max height is 650px: Don’t exceed this size for your modal.

Premium features

The best way to get more conversions is to show users why they should upgrade to a recurring plan – and make it easy for them to do. 

  • Mark premium features: add an icon next to premium features. When users hover over the icon, you can show a tooltip with more information about the feature, and an upgrade link that opens your app’s billing page.  
  • Make it easy for users to upgrade: add an upgrade button that opens your app’s billing page (Note for Developers: Use Wix.Dashboard.openBillingPage). If you only have one paid plan, make sure to hide the button once the user upgrades.

Sensitive data

Does your app have sensitive data, like payment info? Show it to site owners only, and hide it from contributors. On the server-side, identify the user. If a contributor is logged in, hide the setting and show this instead (get the PSD here):
Want to know how to create a dashboard component in the Wix Developers Center? Read this article.
IN THIS ARTICLE
Previous article
Next article

Related Content

Iframes

App Settings for Website Components

Updating the app with a user’s changesWhen users change a setting in your app, update the app right away in the Wix Editor – but don’t change the app on the live site until the user publishes the site. Here’s h
2 min read

General

About App Components

There are two main types of component: website and dashboard. All apps must have at least one component, but you can have two or more.You can find the Components tab in the Wix Developers Center. This is where

3 min read

Getting Started

Develop Your App Components

In this article we’ll review the high-level info you need and the steps you’ll take to build your app. Types of developmentFront-end DevelopmentApps are displayed in the user’s HTML5 site/dashboard – so build t
5 min read

Iframes

Deep Linking for Internal Dashboard Components (iframe)

Important:We're currently having issues with this feature and are working hard to fix it. If you experience problems with deep linking then you can contact us.An internal Dashboard component supports deep linki
2 min read

Developers Center Setup

Create a Dashboard Page Component

You can create a back-office dashboard page component to help users manage their business or website. There are two ways to do this: Integrate with the Wix Dashboard (recommended) Link to your external websi
3 min read