Dashboard Component

Overview

Now that you’ve planned your app’s components, you’re ready to start designing your app. In this guide, we’ll go over a few general guidelines to follow in your dashboard component, so that your app feels native to the Wix platform.

Before we dive into our guidelines, we’ll first give you a general orientation of how users will add and use your app.  Knowing this basic user flow will help you design an app that integrates seamlessly with our platform.

User flow

Dashboard Apps

Here’s the basic flow of how users add dashboard apps, or dashboard components that are part of a multicomponent app. (You can learn more about the user flow for multicomponent apps, below.)

The best way to learn is to try it yourself, so we recommend adding a dashboard app to your Wix site – for example, the Site Booster app.

1. Users can browse the App Market and add your app to their site’s dashboard.

2. Users can then set up your app, manage it, etc.

Multicomponent Apps

When users add a dashboard component that’s part of a multicomponent app, the basic flow is a little different.

The best way to learn is to try it yourself, so we recommend adding a multicomponent app to your Wix site. Try one of the examples below.

Here’s how it works for different types of multicomponent apps:  

  • Apps with a dashboard component and a site component – Users can add your app from the dashboard or the editor (for example, see the Wix Bookings app):
    • When users add your app from the dashboard, the dashboard component is added right away, and they’ll see a notification telling them to add your site component.
    • When users add your app from the editor, the site component opens. However, the dashboard component is added as well, and users will see it next time they go to their dashboard.
  • Apps with a tracking component When users add your app, your app’s dashboard component opens. The tracking component is also added, but users can’t see it since it’s invisible.
    Example: the Visitor Analytics app
Iframe size
  • Keep the maximum width in mind. App uses the full screen, with a width up to 1200px.
  • App height is based on its content. The browser adds scrollbars when needed. Don’t add your own scrollbars.
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 site component? Add a link that sends users directly to the site component in the editor (use the Wix.Dashboard.getEditorUrl method).
Popup/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. Users can close it by clicking the close button or anywhere outside of the lightbox, and you can close it within the app. Open the Wix modal using the Wix.Dashboard.openModal SDK method.
  • 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.
In-app purchases (Beta)

Offering in-app purchases? Design the purchase page that shows users the different packages/plans for in-app purchases.

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):

Was this page helpful?

What can we do to improve it?

What did you like about it?