App Settings Panel

Important:
During development, you’ll build the App Settings panel using our UI-lib. If your app is currently using our old UI-lib, contact your account manager to switch over to our new UI-lib.
Overview

Every site component has an App Settings panel that allows Wix users to customize the app and its content. The capabilities you offer in this panel – and the user experience – can determine whether users will choose your app.

Follow this guide to create the right user experience for your App Settings panel. The goal is to make it easy for users to set up and customize your site component.

Note:
Your app must be consistent with the Wix experience – and we’ll help you get there. You’ll get feedback on everything from UI text and user experience, to marketing materials.

You might already have a great product, but we want it to be a success with Wix users.

Have a multicomponent app? Create a separate settings panel for each site component. For example, the Wix Forum app has two site components: a page for the forum itself, and a login widget. Each component has its own settings panel.

Note:
The App Settings panel is for Wix users only – not site visitors.
Before You Start

Do some prep work before you start designing (it’ll save you time in the long run):

  1. Make a list of settings & features in your app. Have this list handy, so that you’ll be able to quickly organize your settings into tabs.
  2. Get to know our App Settings template. Play around with the starter template so that you have an idea of how our tabs and UI controls work.
  3. Check out our UI controls. Our UI-lib has ready-made UI controls, like toggles, drop-down lists, buttons, and more. We’ll go over a few common UI controls below.
Panel Structure

You’ll use our starter template as a starting point to create your panel – just customize it according to your app’s specific settings and features (that’s where the list you made comes in handy).

Here’s a quick look at how to structure your panel menu. Decide which tabs (Main, Settings, Text, Layout, Design, Animations, and Support) and action links (Add-ons and Upgrade) are relevant for your app.

In the next few sections, we’ll walk you through each of these tabs and action links.

Here are a few general guidelines:

  • The Main tab is a must. Put it first, and always open your panel to this tab.
  • Keep the divider in place. In our starter template, there’s a divider between all the setup tabs and the Support tab – don’t remove it. It keeps the panel organized between tabs that help users set up their app, and other tabs and action links.
  • Stick to these tabs, in the order that we outlined above. This will create a better user experience, because users are already familiar with our standard structure.
    • If you do need a custom tab, keep the name short – we recommend up to 150 px (around 15 characters).
    • In some cases, it makes sense for the panel to have a different order. For example, if the options in your Settings tab depend on the layout the user chose, then the Layout tab should come before the Settings tab (like the FAQ app). If you think your menu should have a different order – talk to us.
Assets

Here’s a quick reference of the PSDs and design files we have for the App Settings panel. Go ahead and download the files relevant to your app.

Note that we also have a collection of UI controls used in the settings panel.

Add-ons

Have any add-on components in your app? Use these visual aids to help you design a modal with your app’s add-ons.

Connecting an account

Follow the flow in this PSD.

Checkbox with Text Input

Learn more about this UI control.

Date picker

Learn more about this UI control.

Draggable list

Learn more about this UI control.

Drill-down to organize settings

If one of your tabs is cluttered with too many settings, consider creating categories and allow users to drill down to customize the settings. Follow these design files.

Free trial

Have a free trial? Follow this PSD.

Premium features

Use this PSD as a guide for adding the premium icon.

Text input (double)

Learn more about this UI control.

Thumbnails

When showing users different options (e.g., for layouts or animations), use the guidelines in this PSD.

Tip:
Looking for something else? Talk to your account manager.
Main Tab

This is where you’ll help users start setting up your app. Decide what your app’s main action is  – and make this the “CTA” (call to action) in this tab.

Usually, this would be the first action users will need to take in setting up your app. Go through the examples and style guides below to get an idea of common CTAs.

Important:
The Main tab must be the first tab in your panel. Also, always open your panel to this tab.

How to design this tab:

 

  1. Let users know what your app does. Place your app icon and a short description (3 lines max) at the top.
  2. Show users what their first steps should be. Add 1 or 2 CTA buttons that send users to your app’s main actions – see our examples and style guides below to figure out what your app’s CTA should be.
    • Add a button that sends users to your app’s main action (btn-confirm-primary class).
    • (Optional) Add a second button that sends users to another important action in your app (btn-confirm-secondary class). The length of this button should be the same as the button above.
  3. If your app has a premium version, add an upgrade banner. At the bottom of the Main tab, add a button (btn-upgrade-banner class) and a short sentence explaining why users should upgrade. Add a long divider above the banner, to separate it from the rest of your Main tab.
  4. If users must do the main action, make that clear. When users skip the main action and go to the next tab, display this red notification to let them know that they missed an important step. When users hover over the notification, display a tooltip with a short explanation. The notification (with its tooltip) is already built-in to the panel tabs UI control – use the showTabNotification function.
Note:
Offering a free trial for your app? Once the trial expires, display a notification/ message in the Main tab, to let the user know that the trial expired.

Examples and style guides

To get you started in choosing your app’s main CTA, here are a few examples:

  • Users need to upload or enter data. If the user’s main task is to manage data, like text for a blog or images for a gallery, your CTA button should open a modal so that users can easily upload and enter content.
  • Users need to manage or set up the app in the dashboard. Your CTA button should open your dashboard so that users can set up your app and learn more about how to manage your app later. For example, users might need to add products in an eCommerce app or create a menu in a restaurant app.
  • Users need to login/sign up for your service or a third-party account like Facebook. Before you make this your CTA, talk to your account manager. If your account manager approves the use of accounts in your app, your CTA button should open a modal that guides users in signing up/logging into their account. Download & follow this style guide
Note:
Is the account for a back-office service? Your CTA button should open your dashboard component – see the example above.
  • Your app setup is pretty simple. If users don’t need to connect an account, and you don’t have a dashboard component, then your app’s main action should be one of your app’s settings. 
Settings Tab

This is where you’ll guide users in setting up the app and defining general functionality, for example:

  • Enabling/disabling features
  • Defining regional settings (app’s language on the live site, measurement units, currency, etc.)
  • Uploading images and other media files
  • Defining privacy/sharing settings

How to design this tab:

  • Map out your app’s general settings, and find the right UI control for it. You can see a list of all our UI controls. Here are some common examples:

– A list of functionalities that users can enable/disable, or a list of elements that users can choose whether to show/hide on the live site – use the toggle switch for each one.

– Text settings – use text input fields. (If your app has many short text fields to customize, create a dedicated Text tab.)

– Image uploads: use the image preview UI control to allow users to replace your app’s demo image. When users click on the button, open the Wix Media Manager so that users can choose an image they already uploaded to Wix servers.

Note
: Since users are replacing an image, make two minor changes to the image preview UI control – the button text should be Replace Image, and the icon should be image-change.

– Audio/document uploads: add a button (btn-confirm-primary class, with the plus icon). When users click on this button, open the Wix Media Manager so that users can choose a file they already uploaded to Wix servers. After users select their file(s), change the icon to image-change.

– Account settings – to allow users to activate an account with public data, use the text input field with validation.

  • What’s next?  Once you know which settings should be in this tab and you have the right UI control for each one, finalize the design of this tab:
    1. Create the right flow by organizing the settings within the tab.
    2. Add our key UI elements (tooltips, dividers, and more).
Text Tab

Usually, text fields should be part of your Settings tab. However, if your app has many short text fields (like titles) that users need to edit, add a dedicated Text tab.

Note:
Do users need to add a lot of text in your app, like a blog? Instead of having a Text tab, open a modal from one of the other tabs and let users customize the text in a bigger window.

How to design this tab:

  • Add a field for each text setting. Use the text input UI control (or the text input with a button).
  • Add default text. This text will be displayed in your app on the live site, until the user changes it.
  • What’s next?  Once you know which settings should be in this tab and you have the right UI control for each one, finalize the design of this tab:
    1. Create the right flow by organizing the settings within the tab.
    2. Add our key UI elements (tooltips, dividers, and more).
Layout Tab

This is where you’ll show users the different layouts available for your app.  Make the layouts different enough from each other so that users can easily choose the right one.

Note:
If most of the options in the Settings tab depend on the app’s layout, then put the Layout tab before the Settings tab (like the FAQ app).

How to design this tab:

  • Show users a set of thumbnails with all the layout options. Each thumbnail should have the name of the layout and a visual representation of how the content is arranged.
    • Use the blank thumbnails in this PSD as a starting point.
    • Have many different layouts? Make the thumbnails smaller so that you can fit more thumbnails in a row. (We have a few different size options in the PSD.)
  • When a user chooses a layout thumbnail, show advanced options for this layout. Each layout can have different options, like the alignment, number of columns and rows, spacing between elements, and more. For example:
  • What’s next?  Once you know which settings should be in this tab and you have the right UI control for each one, finalize the design of this tab:
    1. Create the right flow by organizing the settings within the tab.
    2. Add our key UI elements (tooltips, dividers, and more).
Design Tab

This is where users will customize the color, font, and styles for different elements in your app.

Important:
Have a premium version of your app? Keep in mind that all users must be able to change your app’s colors and fonts – so include these options in your app’s free version.

How to design this tab:

  • Let users change your app’s colors. Add a color picker for each element that users can customize. We have two color pickers:

Color picker with opacity – allows users to change the color and adjust the opacity.

Color picker – allows users to change the color only.

  • Let users change the font and color of text elements. Add our font and color picker UI control, which opens the color picker (without opacity) and the font picker:
  • What’s next?  Once you know which settings should be in this tab and you have the right UI control for each one, finalize the design of this tab:
    1. Create the right flow by organizing the settings within the tab.
    2. Add our key UI elements (tooltips, dividers, and more).
Animations Tab

This is where users can choose your app’s animation style. The Animations tab isn’t part of our starter template – add it if your widget is an animation, or your app has animation effects.

How to design this tab:

  • Show users all the animation options. There are two ways to do this:
    1. (Recommended) Thumbnails – use our blank thumbnails (available in this PSD).
      • In each thumbnail, display the name of the animation and its icon.
      • When users hover over the thumbnail, show a preview of the widget with this  animation.
    2. Dropdown list – if you don’t have icons for your animations, show the options in a dropdown list. When users choose an animation, show a preview of the widget with this  animation.
  • What’s next?  Once you know which settings should be in this tab and you have the right UI control for each one, finalize the design of this tab:
    1. Create the right flow by organizing the settings within the tab.
    2. Add our key UI elements (tooltips, dividers, and more).
Support Tab

This is where you’ll tell users how they can reach out to you. 

Note:
Keep the Support tab right below the divider (as it is in our starter template).

How to design this tab:

Take these sections that are already in our starter template, and add your information:

  • Developer Info – Information about how users can contact you, like a support email, phone number, etc.
  • App Review – A link to your app’s reviews tab so that users can easily leave feedback. Use the Wix.Settings.openReviewInfo SDK method.
  • Connect With Us – Allow users to send you a message directly from this tab.
Note:
Looking for a place to add FAQs? Add your FAQ content in the Dev Center (when you add your app details), and users can access it from the help icon at the top of the settings panel. Don’t put FAQ content in the Support tab.
Your App’s Add-Ons

Have a multicomponent app? Make it easy for users to add your app’s site components – they’ll be able to add widgets that weren’t added when the user installed your app, or add your page component again (if you enabled this option in the Dev Center).

How to do this:

Add an Add-ons action link in your panel menu (a button with class btn-nav). When users click on the link, open a modal – use the Wix.Settings.openModal method.

How to design the modal:

Download our visual aids to help you design – this zip file includes a style guide, PSD, and more.

  1. Explain each add-on component. For each one, add an image/icon, a name, and a short description.
  2. Is your add-on a page, fixed-position widget, or a widget that appears on all pages? Have an Add to Site button (with class btn-confirm-primary). When users click it, add the component to the site – use the Wix.Settings.addComponent method in the SDK.
  3. Is your add-on a regular widget? Have an Add to Page dropdown list. Open the list of pages in the user’s site (use the Wix.Settings.getSiteMap SDK method) so that users can choose where to add the widget, and then add the widget to this page (use Wix.Settings.addComponent).
Your App’s Upgrade Link

Make it easy for users to upgrade your app:

  1. Add an upgrade link in your panel menu. Use a button with class btn-upgrade-nav. It should the last item in your panel.
  2. Link to your billing page. When users click Upgrade, send them directly to your billing page (use the Wix.Settings.openBillingPage SDK method).
Organize Each Tab

Organize each tab so that your setup flow is easy for users to follow.  

1. Display the most important settings first. This way, users won’t miss important setup tasks.

2. Group related settings together. This makes it easier for users to set up your app. Create a section for each group, and use section dividers to separate the groups. For example:

Does each section have more than 4-5 settings? Create categories and allow users to drill down to customize the settings. Download and follow these design files to help you get started. For example:

3. Gradually expose advanced settings. First, use a toggle to allow users to enable/disable features. Then, show advanced options if a user enables this feature. For example:

4. Plan how settings impact what’s shown in other tabs. If the user chooses something in one tab, you may need to show/hide options in other tabs. For example, let’s say users can choose whether to display a title in your app. In this case, if the user decides to show the title, your Design tab would show design settings for the title.

5. Have a page app? If you have a different settings for each page in your app, add a dropdown list at the top so that the user can first select the page.

Add the Key UI Controls

We’ll go over just a few of the key UI controls that you’ll use in your settings panel, and explain how to use them. (We have more UI controls that you can use – check out the full list.)

  • Use dividers to separate UI controls. Use one of these dividers:
    • Short dividers – to separate UI controls that are related and affect each other
    • Long dividers (full-width) – when the UI controls aren’t directly related

  • Help users understand complicated settings with tooltips. This way, you can avoid cluttering the tab with long explanations. Be concise and helpful:
    • Tell users what they need to know, and keep it short (3 lines max).
    • Don’t repeat what you’ve already said in the panel.

Almost all of our ready-made UI controls have tooltips built-in. If you’re using React, you can wrap any of our UI-lib components (or native HTML) with our tooltip.

  • Mark premium features. Add our premium icon next to these features. When users hover over the icon, display a tooltip with more information about the feature. Download this PSD as a guide to help you add the premium icon.
  • When a setting has a few options that users need to choose from – which UI control should you use?
    • Features that users can enable/disable, or elements that users can show/hide: Use toggles when you have up to 3 features/elements, and use checkboxes if you have a list of 3-4+ features/elements.
    • You’re giving users a few options but they can only choose one: Use radio buttons for up to 3 options, and use a dropdown list if you have more than 3 options.

Sensitive Data

Does your app have sensitive data, like payment info? Show it to site owners only, and hide it from contributors

On the server-side, identify the user. If a contributor is logged in, hide the setting and follow one of the example images below.

When only one setting in the App Settings panel should be hidden:

Hide the setting and add a short description to let contributors know what this setting does and that it’s for site owners only.

When the entire tab in the App Settings panel should be hidden:

Hide all settings in this tab and add a short description to let contributors know what this tab is for and that it’s for site owners only.

In-App Purchases (Beta)

Offering in-app purchases? Design the pricing page that shows users the different packages/plans for in-app purchases.

Was this page helpful?

What can we do to improve it?

What did you like about it?