Developer Support
Develop Your Website Components
4 min read
·
Last updated on Feb 14, 2023
Website components are the elements of your app that are visible on, or relevant to, the user's live site. In order to meet Wix App Market requirements, website apps must do the following:
- Link the user's app to their site
- Duplicate content in duplicated sites
- Support multiple installations on one site
1. Link the user's app to their site
When a user adds your app, we’ll generate a unique ID for your app in this specific site – the App Instance ID. Use the App Instance ID to link your app to this site.
This ID is sent to you as part of the App Instance query parameter, which is a signed parameter that allows you to identify the website and the Wix user, and verify that the calling party is indeed Wix.
All of your app’s endpoints in this site will have the same App Instance ID, so each request sent to the Widget endpoint and to the App Settings endpoint includes the same App Instance ID in the iframe URL.
This ID is sent to you as part of the App Instance query parameter, which is a signed parameter that allows you to identify the website and the Wix user, and verify that the calling party is indeed Wix.
All of your app’s endpoints in this site will have the same App Instance ID, so each request sent to the Widget endpoint and to the App Settings endpoint includes the same App Instance ID in the iframe URL.
2. Duplicate 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:
Here’s what you should do:
- 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.
- Copy the content and settings of each website component: Get the correct settings of the original app using its instanceId (the originInstanceId property) together with the compId query parameter (a unique string that identifies the component, specified in the endpoint URL). The compId has the same value in both the duplicated and original sites.
3. Support multiple installations on one site
Users can copy an app multiple times on their website. Page widgets are limited to one copy, but you can allow users to add multiple pages from your App Settings Panel. Once a user has added multiple copies of either a widget or page, they need to be able to customize each one differently.
Here’s what you should do:
Widgets
- To distinguish between the widgets, use the compId parameter (a unique string that identifies the component, specified in the iframe query parameters).
- When a user copies the widget, make sure the copied widget has the same settings as the original widget. Use the originCompId query parameter to retrieve the original widget’s settings.
- Link each widget to its own settings, so that when a user changes the settings of one widget, it doesn’t affect other copies of the widget in the site. Use the getOrigCompId method to identify the widget that opened the App Settings panel - the method returns the compId of the widget, so you can open the right settings panel.
Important:
Widget iframe components aren't available for all users right now. If you'd like to request access you can submit a proposal.
Pages
- Allow users to add your Page component again: Use the addComponent method in your App Settings panel.
- Distinguish between the page components: Use the compId parameter, a unique string that identifies the component, specified in the endpoint URL.
- Link each page component to its own settings: This allows users to customize each page differently, so that a change to the settings in one component won’t affect the other page components in the site. Use the getOrigCompId method to identify the page component that opened the App Settings panel - this method returns the compId of the page, so you can open the appropriate settings panel.
Was this article helpful?
