Building a Native App

People are most productive when the tools they use are simple, efficient and beneficial to their end goals. Building a native application gives the best experience overall for Ecwid merchants, and presents you the opportunity to have your service right inside the Ecwid Control Panel.

If you want to create that kind of functionality of your app, it’s important to know how it works and where to begin.

Workflow

After a user installs a native application, Ecwid will direct them to the new tab that this app will have created. A new tab in Ecwid control for your application is basically just an iFrame with your external page loaded in it.

Create an HTTPS page for the tab

The Ecwid Control Panel works only through the secure HTTPS connection. When an app adds a new tab into it, the tab content is loaded in an iframe window. In order for the content to be displayed, the iframe URL of your app must be loaded over HTTPS protocol, or in another case the browser will just block the insecure content on the page.

Full native application source code example for Custom URL for “Thank you” page app from the Ecwid App Market is available here: https://github.com/Ecwid/custom-thank-you-page-app

Initialize the app

It is important to be aware that only the pages that initialize the application using the Ecwid Javascript SDK will be displayed. Once your code initializes the application, Ecwid will display the content that you decided to show on your dedicated page.

When the application tab is opened by a user, the URL will have a format like this:

https://my.ecwid.com/cp/CP.html#app:name=my-cool-app&parent-menu=sales

Where the “my-cool-app” is your app_id which you will need to use upon initializing the application on the page.

Important: Ecwid will be checking for app initialization on the page that is specified in your application only. If that page doesn’t initialize the app and it performs an immediate client-side redirect to another page, which does initialize the app — Ecwid will not recognize this action as initialization and you will see an error instead.

Sign the user in

One of the most important things about native applications is to avoid requiring the user to sign in to your interface manually. When a user opens your tab, Ecwid will provide an access token for that store. This allows you to get all required data to set up an account for them. Please make sure your app works this way before submitting it for review.

Client-side and server-side

All new applications are registered as client-side applications. It means that the payload will be provided in the hash part of iframe app URL for JS code to access. If you need to access payload on a server, please contact us and we will update your app.

More details about the difference between these types is available in Authentication section.

Design

Because you are embedding a single page of your website or just an isolated page, created specifically for this application, it’s important that this page have a design similar to Ecwid control panel to create a seamless user experience for merchants.

Here are some requirements that will help get you on the right track:

  • Use Ecwid CSS Framework
    This will make the page look authentic and provide user with a consistent, familiar experience. Ecwid CSS Framework
  • No header or footer
    The Ecwid Control Panel already has them, so your app should be clean and give the appearance of a native feature.
  • Mobile ready
    Ecwid Control Panel is responsive, so it can be used by both desktop and mobile devices. Your app interface must have a mobile-ready version for mobile users and other cases.
  • Keep it simple
    Make sure your interface is simple and intuitive for users to understand. Provide descriptions and prefill the fields for the user whenever possible.

We suggest you check out other live apps and use them as an example. There are many great native apps that are already published in the Ecwid App Market, so feel free to find inspiration from existing examples. The less actions a user needs to take to set up the app, the better.

How to create a new tab

There are several things that are requested when you wish to create a tab for your application:

  • Application’s name to be displayed
  • iFrame URL
    This page must be available over HTTPS to avoid mixed content when opened in the Ecwid Control Panel.
  • Ecwid Control Panel section
    Explain where your tab will be shown in the Ecwid Control Panel (Sales, Catalog, Settings, Design)
  • Using “add_to_cp” access scope
    Your app must require this access scope to add a new tab to the Ecwid Control Panel

More details are available in set up your application section.

Related links