A Weebly app is a package that can contain a number of different components used in a Weebly site - elements that are dragged onto a page and provide functionality, dashboard cards that report analytics, backend services that manage mailing lists, etc. In this tutorial, we’ll create an app that contains an element that when dragged onto a page, allows users to display complicated pricing plans.

The first thing you need to do when creating an element is determine the look, feel, and functionality of the element and then determine which parts need to be configurable by the web site owner.

Here’s a screenshot of the Price Chart we’ll be developing in this tutorial:

Weebly Price Chart
The Weebly Price Chart

We want the user to be able to edit all thte text and to edit the button size. We’ll use Weebly tags in our HTML template to create those. We’ll also need to create the table using HTML.

To create the configurable functionality of the price chart, we’ll use settings. Settings display in a dialog where the user can set them as they want.

We’ll create settings for these:

  • The number of plans (represented by the number of columns)
  • The number of features (metrics) per plan
  • Justification of the price chart element in the parent column on the page (left, right, or center)
  • Where to place the button: in the bottom row or in the top row with the price
  • The currency symbol to use
  • Color for backgrounds, number and border

By making these configurable, the user has control over much of the look and feel of the element.

Now we need to decide how to display these settings to the user in the Settings dialog. Since the settings for the number of plans and features affect the layout of the table, let’s group those together in the dialog, and group the rest of the settings together since they all affect the display. And since it’s important that users understand plans and features, let’s add a tooltip to both those settings.

We have our design determined, so let’s get started!