NAV

Building an embedded app

Set up your application

After the app registration you will need to provide us with additional details about your app interface in the Ecwid Control Panel. These details are necessary to properly show your page, please see the required details below:

ParameterMeaning
Iframe URLThis is a HTTPS URL of the application page hosted on your server, which will be loaded in Ecwid Control panel. Requirements:
  • It must load over HTTPS
  • The page must not contain header/footer, i.e. you will need to design this page as an embeddable, not as a standalone application.
  • The page must be mobile-ready for cases when store owners go to Ecwid Control Panel on mobile devices.
  • The page content should not contain the word ‘Ecwid’, so we can offer your app to our partners
  • Its interface must use Ecwid CSS Framework
  • The page must initialize the app using Ecwid Javascript SDK to be displayed
App page titleThis will be the title of the tab in Ecwid control panel where your application resides. Please keep it short as it will reside in a row of native Ecwid tabs and other applications
Control panel sectionThe section of Ecwid control panel where you want your application to be added. Supported sections:
  • Sales – choose this if your application works with orders or customers
  • Catalog – choose this if your application works with products, combinations, product images etc.
  • Promotions – this section is for the applications working with discounts, coupons, loyalty programs and other promotion features
  • Settings – you can choose this section if you need to place your application settings at the same level as the store settings
  • Reports - choose this section if your app shows store statistics

If you already have a registered app and want to make it native, you can contact us to adjust your app settings.

App page template

Native app source code example: https://github.com/Ecwid/custom-thank-you-page-app

Skeleton of an application embedded into Ecwid Control panel

<!doctype html>
<html>

<head>
  <!-- Include Ecwid JS SDK -->
  <script src="https://djqizrxa6f10j.cloudfront.net/ecwid-sdk/js/1.2.3/ecwid-app.js"></script>

  <script>
    // Initialize the application
    EcwidApp.init({
      app_id: "my-super-app", // place your application namespace here (not clientID)
      autoloadedflag: true, 
      autoheight: true
    });

    // Get the store ID and access token
    var storeData = EcwidApp.getPayload();
    var storeId = storeData.store_id;
    var accessToken = storeData.access_token;
    var language = storeData.lang;

    if (storeData.public_token !== undefined){
      var publicToken = storeData.public_token;
    }

    if (storeData.app_state !== undefined){
      var appState = storeData.app_state;
    }

    // do something...
  </script>

  <!-- Include Ecwid CSS Framework -->
  <link rel="stylesheet" href="https://djqizrxa6f10j.cloudfront.net/ecwid-sdk/css/1.2.4/ecwid-app-ui.css"/>  
</head>

<body class='normalized'>
  <div>Show something</div>
</body>

</html>

Here you can find a starter template that you can use as a skeleton of your own application.

Notes

  • The EcwidApp.init() method initializes the application within Ecwid Control panel and allows it to show the page content
  • The EcwidApp.getPayload() method allows you to get the Store ID and REST API access token. See details in the further sections
  • Ecwid will load your app’s Iframe URL with a payload to help identify the merchant’s store. To find out more about the store authentication process in the app tab, see the Authentication section.
  • See the detailed description of the init() and getPayload() functions here: Ecwid JS SDK .

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

Also, see the set up your application and Native Apps Guideline to find out how this page should work.

Q: What is my app_id?

When user opens the application tab, the browser’s address bar URL will have a format like this:

https://my.ecwid.com/cp/#app:name=my-cool-app&parent-menu=sales&app_state=orderId%3A%2012

Where the my-cool-app is your app_id which you will need to use in this code template to initiale the application on the page. The sales part is the Ecwid Control Panel section where the app is embedded into.