Guidelines for Self-Hosted Dashboard Extensions

This article covers general guidelines for self-hosted dashboard extensions that help your app feel native to the Wix 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 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 extension? Add a link that sends users directly to the website extension in the editor.

• 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).

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