LogoLogo
Build appsContact API support
Build apps
  • Build apps
  • Site Templates
  • API Reference
  • Changelog
Build apps
  • Build with Ecwid apps
  • Ecwid API features
  • Get started
    • Set up your dev environment in Ecwid
    • Make your first API request
    • Add more features to your custom app
    • API glossary
  • Develop apps
    • What is an Ecwid app
    • Private and public Ecwid apps
    • App settings
    • Community libraries
  • Launch apps
    • Public apps overview
    • Monetize public apps
    • Steps to go live with a public app
    • Native and external apps
      • Access store data from the app
      • Build user settings page for Ecwid admin
        • Use Native app JS SDK
        • Deep linking
        • Manage personal user settings storage
  • Contact Ecwid API support team

Lightspeed® 2025

On this page
  • Initialize the app
  • Show page to users
  • Use Ecwid CSS Framework

Was this helpful?

  1. Launch apps
  2. Native and external apps

Build user settings page for Ecwid admin

Last updated 5 days ago

Was this helpful?

When users open your Native app, Ecwid opens your settings page inside an iframe. The app must go through authentication and initialization to show your settings page.

Initialize the app

The EcwidApp.init() method is required. Call it once when the iframeUrl is opened. If it's not called, then Ecwid won't show the app. Your iframeUrl will load on a separate page but won't work inside Ecwid admin.

EcwidApp.init({
  app_id: "client_id", // client_id of your application
  autoloadedflag: true,
  autoheight: true
});

Add your app client_id as app_id value. Leave autoloadedflag and autoheight fields with true. For most applications, it will be enough.

Read more about init() function and other functions available with .

Show page to users

Now the app can show its settings page to users. Add EcwidApp.init() and JS file from Native app SDK in the <head>. Add JS and CSS files for CSS Framework to <head> and <body>.

We have an HTML template with up-to-date versions of all required files. Use it to get started:

<!doctype html>
<html>

<head>
  <!-- Include Ecwid JS SDK -->
  <script src="https://djqizrxa6f10j.cloudfront.net/ecwid-sdk/js/1.3.0/ecwid-app.js"></script>
	<!-- Add values from the decrypted payload and initialize the app -->
  <script>
    // Initialize the application
    EcwidApp.init({
      app_id: "client_id", // client_id of your application
      autoloadedflag: true, 
      autoheight: true
    });

    // Get store ID, language, and access token from decrypted payload JSON
    var payload = <?php echo $result; ?>;
    var storeId = payload.store_id;
    var secret_token = payload.access_token;
    var language = payload.lang;

    if (payload.public_token !== undefined){
      var publicToken = payload.public_token;
    }
    
    if (payload.app_state !== undefined){
      var appState = payload.app_state;
    }

    // load additional scripts, styles if necessary...
  </script>

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

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

<!-- JS for CSS Framework components -->
  <script src="https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/css/1.3.19/ecwid-app-ui.min.js">
  </script>
</body>

</html>

Use Ecwid CSS Framework

To access CSS Framework elements inside the Native app, add the required CSS and JS files to the page:

<head>: https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/css/1.3.19/ecwid-app-ui.css

<body>: https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/css/1.3.19/ecwid-app-ui.min.js

Code example:

<head>
  <link rel="stylesheet" href="https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/css/1.3.19/ecwid-app-ui.css"/>
</head>

<body>
  
  <div>Native app page</div>

  <script type="text/javascript" src="https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/css/1.3.19/ecwid-app-ui.min.js"></script>
</body>

Native apps become a part of an Ecwid admin, so they must look accordingly. Our has a large collection of ready-to-use UI elements and blocks. Use it to create an interface matching Ecwid admin faster and easier.

Native app JS SDK
CSS Framework