Developer Support
Develop Your App Components
5 min read
·
Last updated on Sep 30, 2022
In this article we’ll review the high-level info you need and the steps you’ll take to build your app.
Types of development
Front-end Development
Apps are displayed in the user’s HTML5 site/dashboard – so build the app using HTML. We don’t accept apps that use Adobe Flash.
Back-end Development
You’ll host your app on your own servers, so there are no technical limitations for back end development. You can build the back end using any programming language: Java, Ruby, PHP, Python, C#, etc.
Developer platforms, libraries and tools
We have several platforms, libraries and tools for you:
- OAuth 2.0: We use OAuth 2.0 to ensure that you have the relevant permissions to access our API and apply webhooks.
- Webhooks: Register for webhooks for specific events in the Wix Developers' Center to get a custom callback whenever such an event occurs.
- REST APIs: Our REST APIs allow you to send and receive requests from your server to Wix about user data, events, transactions, etc.
- JavaScript SDK: Our SDK exposes methods that enable iframe apps to communicate with the Wix platform – the Editor, Dashboard, live site, and preview.
What you need to do
1. Create your app components
Your app will be made up of one or more app components.
Your app must have at least one component, but you might have two or more. If your app will have more than one component, develop each component separately, and then add all components in the Wix Developers Center under the same app.
Keep these things in mind while you build you app:
- Keep your app secure and private: Follow our security and privacy guidelines.
- Display/hide premium features according to the site’s plan: Identify the site and activate the right plan.
These steps are relevant for website components only:
- Plan for accessibility: Apps on the user’s live site must be accessible, so that all site visitors can use your app – including those with disabilities.
- Optimize for mobile: Use media queries or develop a mobile endpoint for your widget and page components.
- Optimize for search engines: This is a must for page components, and in some cases, widget components (assuming that the widget has content that’s meaningful for SEO).
- Give your app the Wix look and feel: Use our Website component, Dashboard and App Settings Panel guides.
2. Link the app to a 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.
3. Add app components in the Wix Developers Center
Once you have the URLs for your app’s endpoints, you can add them in the Wix Developers Center under Components in the side menu (under Build Your App).
If your app has more than one component, even though you developed each component separately, add all the components under the same app.
If your app has more than one component, even though you developed each component separately, add all the components under the same app.
Note:
Adding more than one website component? Set the most important one as the default. When users add your app, only the default website component is added automatically. Users can add other website components from your App Settings panel.
In addition to adding the components in the Wix Developers Center, you'll also need to enter marketing, pricing, and other info before submitting your app to the Wix App Market.
4. Identify the user’s site
When we call your app endpoints, we pass along a set of query parameters with info about the app in a specific site, like the width of the app and whether it’s being used on desktop or mobile. The most important one is the app instance query parameter. When decoded, this parameter includes a unique ID for your app in this site – the instanceId. Use the instanceId to identify the site.
Read more about identifying the user's site and the query parameters sent for each app component.
Read more about identifying the user's site and the query parameters sent for each app component.
5. 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.
Was this article helpful?
