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 or from useDashboard() in the dashboard-react SDK, and (if you are building your app in Blocks) Velo's wix-dashboard.
For example, in the Wix Blogs app, the following modal appears when adding a writer:
When to use a dashboard modal extension
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
You can host a dashboard modal extension in one of the following ways:
-
Using the Wix CLI.
-
By self-hosting, 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.
Note: For a more streamlined approach to developing your dashboard modal, try out the Wix CLI instead of self-hosting .
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
There are several advantages to implementing a modal using the dashboard modal extension instead building it directly into your app:
- Better UK: Dashboard modals always render in the center of the page. When a modal pops up, you want it to appear centrally in the app.
- Reusability: If you build a few apps, you can reuse the same dashboard modal in all of them 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.