Access public key on the storefront

The public key is available on the storefront and can contain up to 256Kb of data. You can use it as a public config for your application. This config can include some style settings for storefront widgets or customer choices for application workflow.

What data can be stored in the public key

Do not store any sensitive data about store, orders, or customers in public key. If someone knows client_id of your application, they can access your public key on the storefront.

Examples of what you are allowed to save in public config:

• Save button text and color for the storefront widget.
• Store owner email and boolean choices for custom "Email Us" button.
• Product IDs for custom product carousel.

Examples of what you are not allowed to save in public config:

• Latest order ID for "Recently bought" widget. It is safer to generate fake IDs if needed.
• Customer emails and phone numbers for the "Reviews" section.
• Data about hidden products in the store. If a product has "enabled": false, its details shouldn't be visible on the storefront.

How to save multiple data entries in the public key

One application can have only one public key. But its value can reach up to 256KB in size which allows saving multiple data entries inside a single value. We recommend using JSON format for it.

Format example:

{
  'key': 'public',
  "value": '{ "color" : "red", "page_id" : "123456", "text" : "Get 10% off on checkout with this code: ABCDEFG" }'
}

Such JSON still counts as a single value. Parse it on the storefront with JavaScript JSON.parse() function converting data from a public key into a JavaScript object.

Request example:

Ecwid.OnPageLoaded.add(function(page){
  var data = Ecwid.getAppPublicConfig('client_id');
  data = JSON.parse(data);

  var color = data.color;
  var page_id = data.page_id;
  var text = data.text;
  var added;

  page_id = parseInt(page_id);

  if (page.categoryId == page_id && added !== true) {
    div = document.getElementsByClassName("ecwid-productBrowser")[0];
    div.innerHTML = text + div.innerHTML;
    
    // customize text style using color 
    // ...

    added = true;
  }
  else {
    return;
  }
});

Ecwid.getAppPublicConfig('client_id')

This method allows you to get public key on the storefront. You only need to add client_id of your application as a function parameter.

Request example:

Ecwid.OnPageLoaded.add(function(page){
  var publicConfig = Ecwid.getAppPublicConfig('client_id');
  console.log(publicConfig);
});