Dashboard

Overview

A Dashboard component is added to the Wix user’s dashboard area—not to the website. It is added as a full page in the dashboard and is visible only to the user. Dashboard components also support deep linking.

With the Dashboard component, you can offer services to help users manage and grow their business beyond the website.

User Experience
  • Users can see your app in the Dashboard App Market and then add it to their dashboard area.
  • Users will have to grant permission for your app once they add it.
  • Users manage your app through their website’s dashboard.
  • Users can add a Dashboard component only once.
  • Only users can see and use the Dashboard component.
  • Deleting the app will revoke the app permission.
Architecture

A Dashboard consists of one part:

  • The Dashboard iframe: The Dashboard’s content is provided as an iframe embedded in the user’s dashboard.
Signed App Instance

The App Instance is a signed parameter that allows you to identify the website and the Wix user, and verify that the calling party is indeed Wix. Each request to the Dashboard iframe includes the App Instance ID parameter as part of the iframe URL. Use the App Instance ID as the identifier for the user.

Dashboard Size

The Dashboard iframe opens as a full page. Any change to the iframe height will automatically be reflected in your app page.

Deep Linking

A Dashboard component supports deep linking for its internal pages. Deep linking enables your app to update the content of your iframe without refreshing the whole iframe.

Your Dashboard component changes its state using JavaScript and AJAX methods. After the Dashboard component changes its state, it notifies the host website using the Wix.Dashboard.pushState() JavaScript method. This call will not reload your iframe. Wix will update the top window App-state part of the URL.

Example:
If the browser is showing this URL: http://www.wix.com/my-account/site/<metaSite>/app/<appID>?queryParams
when you call the method: Dashboard.pushState(“AppState”) the browser URL will change to http://www.wix.com/my-account/site/<metaSiteId>/app/<appID>?queryParams&appState=<appState>
but your Dashboard iframe will not reload.

When there is a request to render your Dashboard iframe with an internal state, Wix will call your Dashboard endpoint with the internal state as part of the iframe’s URL in the app-state path variable. You should load your Dashboard component at the intended internal state.

Example:
When a user clicks on a link with a URL such as:
http://www.wix.com/my-account/app/<appID>/<AppInstanceID>/<appState>
We will load your Dashboard iframe using the URL:
http://www.yourApp.com/<appState>

Note:
If you want to notify a user about something that happened in your app or an action they should take, you can direct them to your app in a specific Wix site. Use the following URL:

https://www.wix.com/my-account/app/<appID>/<appInstanceID>/<appState>

Copy App Content in Duplicated Sites

Users can duplicate their site, which means that apps should be added to the duplicated site with their existing content and settings (not the default data).

Here’s what you should do:

  1. Check if the app is being copied from another site. When your app endpoint is called, check if the instance parameter has an originInstanceId property. If it does, this means that the app is being copied from another site. The value of originInstanceId is the instanceId of the app in the original site.
  2. Copy the content and settings of the app. Get the correct settings of the original app using its instanceId (the originInstanceId property).
Note:
In some cases, there may be content that shouldn’t be copied over between sites. Not sure if something should be copied? Talk to your account manager.

Iframe Query Parameters

Query parameters for the Dashboard iframe:

NameValueComments

Was this page helpful?

What can we do to improve it?

What did you like about it?