Developing Your App

Overview

In this chapter, we’ll guide you on how to develop your app. You’re ready to develop your app once we approve your mockups.

Note:
Just looking to check out our platform? You can create a test app to try out our SDK and UI-lib.
Before You Start
  • Get your mockups approved. We’ll only accept your developed app for review if it works exactly as shown in your approved mockups – so don’t start development until we approve your mockups.
  • Review our technical requirements. UI/UX requirements are covered in the mockup review, but take the time to go through our technical requirements.
  • Go over our best practices. Follow these best practices to improve your app’s performance.
How Does It Work?

Apps are iframes embedded in the user’s site/dashboard. They communicate with our platform using the JavaScript SDK.

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 programing language: Java, Ruby, PHP, Python, C#, etc.

Developer Platforms & Reference Libraries

Use these platforms and libraries as you develop your app:

  • UI-lib – Use our UI-lib to create the App Settings panel for your Site component
  • JS SDK – Use our JavaScript SDK to communicate with the Wix Editor, Dashboard, and live sites.
  • Webhooks – Get webhooks for events specific to your app (e.g., an upgrade) and events that occur in the site (e.g., a purchase).
  • WixHive – Use our data-sharing platform – the WixHive – to share information about the user’s contacts or site visitor activity (e.g., purchases). Post information that your app collects, and request information you need using our SDK and/or HTTP API.
  • HTTP API – You can get information about a user’s in app purchases and implement the WixHive using our HTTP API.
Quick Start

Here’s how to get started with development:

  1. Create your app components.
  2. Add your app components in the Dev Center.
  3. Identify the site your app was added to using the instance parameter.
Create Your App Components

The first step is to create your components. Once you have the component URL for the endpoint, you can add the components to the Dev Center.

Site Components

Site components have two parts – the component iframe that’s visible in the Wix Editor and live site, and its App Settings iframe.

Use our starter template to create your site component. This template already has a Widget component that’s connected to its App Settings panel, so you’ll see how they interact with each other.  

Get the template:

  1. Install node.js.
  2. Create the app with one of these starter templates:
  3. Update your app regularly so that you’re always using the latest dependencies.
Important:
The template already includes a reference to our SDK – don’t remove it.

Worker Component

Create a new endpoint, and add a reference to our SDK.  

Note that your Worker component has only one part – the component iframe. This invisible iframe is added to both the Wix Editor and the live site.

Dashboard Component

Create a new endpoint, and add a reference to our SDK.

Note that your Dashboard component has only one part – the component iframe. It’s displayed in the site’s Dashboard.

Server Component

If you want to receive webhooks about events that happen in your app or the site, have the server URL (HTTPS) ready.

Learn more about the webhooks you can receive and how to register your server URL.

Developing a Multicomponent App

Does your app have more than one component? Develop each component separately, and then add all components in the Dev Center under the same app.

All of your app components share the same instanceId within a given site.

Add Components in the Dev Center

Once you have the URLs for your app’s endpoints, you can add them in the Dev Center: In your app’s page, go to the App Components section in the Register Your App tab. Add the relevant details.

Note:
Adding more than one Site component? Set the most important one as the default. When users add your app, only the default Site component is added automatically. Users can add other Site components from your App Settings panel.  
Identifying the Site

When we call your app endpoints, we pass along a set of query parameters with information 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 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.

Learn more about the query parameters sent for Widget, Fixed-Position Widget, Page, Dashboard, and Worker iframes.

What’s Next?

Added your components in the Dev Center? Continue developing your app – here’s an overview of what to do next.

All Apps

  • Go through our component guides. We’ll explain how to implement our UX guidelines, deep-linking, and more:
    Widget
    Fixed-Position Widget
    Page
    Dashboard
  • 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.
  • Share data about site visitors and the user’s contacts. If your app collects any data, like when visitors make a purchase or post a comment, post it to the WixHive – our data-sharing platform.
  • Test as you develop, so you can submit your app bug-free. Download and follow the excels in our testing guide.

Site 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.
  • Create the settings panel using our UI-lib. First get an idea of how to use our UI-lib with your language of choice: React JSX, jQuery, or AngularJS. Then add the UI controls to your settings panel.
  • 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 (only if the widget has content that’s meaningful for SEO).

Was this page helpful?

What can we do to improve it?

What did you like about it?