About Dashboard Modal Extensions
A modal is like a pop-up window that appears in the middle of the page and usually asks the site visitor to do something.
The Dashboard Modal extension lets you import a modal that you built and are hosting externally into your app. You can manage the modal in your app using the openModal() and closeModal() functions from the dashboard SDK.
For example, in the Wix Blogs app, the following dashboard modal appears when adding a writer:
When to use a Dashboard Modal
Use this extension when you want to add a modal to your app. Examples of using a dashboard modal in your app include:
- Logging in/signing up
- Agreeing to terms and conditions
- Subscribing to a newsletter
- Confirming a choice, such as, "Are you sure you want to delete this?"
Implementation options
Dashboard modals are self-hosted, meaning you must build and host your dashboard modal externally. Provide the extension with your dashboard modal's host URL and use the dashboard modal's component ID to render it in your app.
When it comes to designing the UI, consider using the Wix Design System. It is a collection of reusable React components that you can use to make your app appear and feel like a native Wix app. Your app must have the look and feel of a Wix app, or it may not be approved for the app market.
Advantages to implementing a modal using the Dashboard Modal extension
Instead of implementing a modal through the Dashboard Modal extension, you could build a modal component directly in your app. However, there are advantages to using the Dashboard Modal extension:
- Better UX: When a modal pops up, you want it to appear centrally in the app. If you build a modal directly in your app, it renders relative to the component it is hosted in. However, a dashboard modal renders centrally in the app.
- Reusability: If you build a few apps, you can add the same modal in all of them using the dashboard modal extension without needing to copy the code into each app. This also means if you make a change to the modal, you need to edit the modal in only one place, rather than in every app.