> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Guidelines for Self-Hosted Dashboard Extensions

## Article: Guidelines for Self-Hosted Dashboard Extensions

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/dashboard-extensions/guidelines-for-self-hosted-dashboard-extensions.md

## Article Content:

# 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.”

 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ac/d0d6e5d7-1e68-49aa-8fbd-c4454894592e/2018/12/11/75d1a59d-1aa5-469a-8cd5-0549e55b49ef.png) 

*   **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.

 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ac/d0d6e5d7-1e68-49aa-8fbd-c4454894592e/2018/12/11/6031183f-8ca2-4c82-b5a5-c0c0c2b48e6f.png) 

*   **Keep explanations short**: If there’s a complicated setting, add a tooltip with more information.

 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ac/d0d6e5d7-1e68-49aa-8fbd-c4454894592e/2018/12/11/e34723a0-ebec-4fae-9a88-089b0eb3f985.png) 

*   **Does your app have a website extension?** Add a link that sends users directly to the website extension in the editor.

 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ac/d0d6e5d7-1e68-49aa-8fbd-c4454894592e/2018/12/11/fc5ed700-f4da-4d9e-8bd8-6bef05e10377.png) 

*   **Do users need to upload media files?** Open the [Wix Media Manager](https://support.wix.com/en/article/about-the-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 popup-style window that opens over the Wix dashboard (Note for Developers: Open the Wix modal using the [Wix.Dashboard.openModal](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md) SDK method). Users can close it by clicking anywhere outside of it or clicking the close button, and you can close it within the app.

 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ac/d0d6e5d7-1e68-49aa-8fbd-c4454894592e/2018/12/18/dc1354a5-d238-4dbd-81b3-4ed8293249d5.png) 

*   **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.

 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ac/d0d6e5d7-1e68-49aa-8fbd-c4454894592e/2018/12/11/0a780920-9d03-4bea-a40f-4285c42ad350.png) 

## 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](https://www.dropbox.com/s/pnm9rmlpojke39d/private_content_dashboard.psd?dl=0)):

 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ac/d0d6e5d7-1e68-49aa-8fbd-c4454894592e/2018/12/11/d557951d-9198-48df-9c59-4c2f782b90f9.png)