App Settings for Site Extensions

Update the app with user changes

When users change a setting in your app, update the app right away in the Wix Editor, but don’t change the app on the live site until the user publishes the site. Here’s how:

1. Store two sets of data: Store both the data that’s visible in the Wix Editor and settings panel, and the data in the live site.
2. Update the app in the Wix Editor immediately: Show the app with these latest changes in the Wix Editor (including the App Settings panel). There are two ways to do this, depending on whether the user changed the color/font, or other values like numbers/text/booleans.
3. Wait for the user to publish the site before updating the app in the live site: Listen for the SITE_PUBLISHED event in the addEventListener method. When SITE_PUBLISHED is issued, update the app in the live site.

Update colors and fonts

For color and font settings, use our custom wix-param attribute in both the website extension and in the App Settings panel.

When users change your app’s font or color, we’ll automatically update the app with these changes.

Update numbers, booleans, text and other values

When users change your app’s settings (except the color and font), here’s how to update your app right away in the Wix Editor:

1. Detect changes that the user makes in the App Settings panel:
   1. For Wix UI controls that use wix-param to save a number or boolean: listen for the STYLE_PARAMS_CHANGE event in the addEventListener method.
   2. For Wix UI controls that don’t use wix-param: use the onChange or onClick function.
2. Update your database/backend server immediately: This is only relevant for UI controls that aren’t using wix-param. (If the UI control uses wix-param, the change is already saved in the Wix site – so there’s no need to update your server.)  
3. Show the changes in your app: For better user experience, don’t refresh your app. Here’s what to do instead:
   1. In the App Settings panel: Use triggerSettingsUpdatedEvent to send an update event to the extension.
   2. In the extension itself: Use addEventListener and listen for these events:
      1. SETTINGS_UPDATED event – for UI controls that don’t use wix-param
      2. STYLE_PARAMS_CHANGE – for UI controls that use wix-param
   3. Update the app with the new settings.