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.
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.)
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.
When users add a dashboard component that’s part of a multicomponent app, the basic flow is a little different.
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
- 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.
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).
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.
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.