You’ll work with Weebly’s REST API to create new integrations and elements, extending the features Weebly offers to help meet our user’s many needs. You’ll be given access to APIs, code samples, and snippets to help you easily and quickly create new, and useful apps for Weebly users.

Why Build a Weebly App?

Save design time:

Maybe you’re a web designer building sites for specific markets, and you want a new element that you can drag and drop onto a page to save some time. For example, say you build custom sites for restaurants, and you want all your sites to have a killer menu. You might develop a custom menu element. ​

Monetize your ideas by building an app to sell in the Weebly App Center:

Weebly offers a great platform for building sites, but we don’t specialize in everything that our users may want and/or need. That’s where you come in. If you build an app that adds functionality to Weebly you will be able to sell it through the Weebly App Center and get access to over 40 Million users. You keep 70% of all sales (Weebly gets the remaining 30%).

What are Weebly Apps

Weebly apps are bundles that contain one or more of these: backend services, snippets, elements, dashboard cards, and themes.

More on what these are, below.

App bundles are ZIP files that you, as a developer, provide Weebly. Users of Weebly access your app from the Weebly App Center, and install the app onto one or more of their Weebly sites.

All Weebly apps use a manifest to configure certain aspects of the app, such as name, version, and URLs used for installation and management. Weebly apps that require access to user and site information or otherwise need to access the Weebly API, must implement the OAuth process. This flow allows your customer to grant the app permission to be installed access specific data.

Backend Services and Snippets

Backend services are apps that integrate directly with Weebly via the REST API to provide some sort of additional functionality, like analyzing eCommerce orders, synching products, or managing site membership. ​One example of a backend app is Paid Members. This app makes it easy to associate site membership with digital goods so that a site owner can sell access to content, like videos or tutorials. In the app (whose interface resides on an external site), the site owner creates rules that associate a product to a specific member group. When a customer attempts to buy that product, the app accesses the Weebly API to create a membership.

Paid Members app management page
Paid Members app management page

Snippets are similar to backend apps, except they run on the front-end rather than the backend and include code that’s added to every page on the site. For example, an analytics app might include a snippet on every page that gathers metrics.

​To implement a backend service or snippet, you need to create the interface between the Weebly site and the app functionality that lives on your external site. Configuration can be handled from your external site, or you might use an element or a dashboard card.

More about backend services and snippets here.

Elements

Weebly elements display in the Editor’s element tray and users drag and drop them onto a page in order to build their site.

Dragging an element from the tray to a page
Dragging an element from the tray to a page

Elements often have configurable settings that change their rendering or functionality. Here’s a screenshot of the Price Chart’s settings.

Basic settings for the Weebly Price Chart
Basic settings for the Weebly Price Chart

To develop an element, you need to design and create the icon for the element tray, configure the settings, and provide the HTML template, CSS, and JavaScript necessary for the element to display both in the editor and function on the published site. If the element needs access to the Weebly API, then you also need to implement our OAuth flow.

Here’s the Price Chart as it displays once dropped in the editor (it displays the same way on a published page).

Price Chart as it displays once settings are configured

Learn more about developing an element here. ​

Dashboard Cards

Dashboard cards are dynamic cards that display on the Site Home page of the Weebly Editor. They show information from an installed app or provide a place to configure and maintain an app. For example, a dashboard card for a site analytic app might display the most important analytics in a dashboard card. Here’s a Site Home page showing the default Weebly dashboard cards along with the dashboard card for the Promote app and for the StoreMetrics app:

Dashboard cards on the Site Home page

​Dashboard cards link to takeovers that display more detailed information. For example, when you click the open rate statistic for an email campaign on the Promote dashboard card, the takeover shows all statistics for that promotion.

Dashboard takeover

Not every app needs a dashboard card, but for many apps (especially backend and snippet apps for which there usually isn’t any UI), it provides a convenient way for customers to manage and engage with your app.

Learn more about dashboard cards here. ​

Themes

Themes provide the general look and feel for a site. Unlike other app types, themes are not sold in the Weebly App Center. Instead, you distribute themes as zip files to users who then import them into their sites. Themes determine the color, button styles, fonts, and even flows to create a cohesive, consistent web site experience for Weebly customers.

​Here’s a site using the Slick theme.

Site using the Slick theme

​Here’s the same site using the Birdseye theme:

Same site, but using the Birdseye theme

Note that the content doesn’t change, but things like the menu location, main colors, and fonts do. You can use the built-in Weebly code editor to develop your theme, or use any code editor you prefer. You’ll work with HTML, CSS, and JSON.

Learn more about themes here.

App Installation Flow and Authentication

If your app requires access to user or site information, or needs to access the Weebly API for other info, the app needs to get permission from the user to access this data. This permission-granting is handled by an OAuth2 flow.

When a user installs an app, Weebly uses information that you’ve configured in your app to determine the data that your app needs access to. We send a hash of that data to your app’s site, where your app must decode and validate that hash. Upon validation, Weebly sends your site an authorization code that you return to Weebly along with your app’s secret key in exchange for a permanent token. You store this token and the app uses it to access the API on behalf of that particular user and site.

Learn about our installation and OAuth flow here.

Where are Weebly Apps Found?

Weebly site owners can search or browse for apps in the Weebly App Center.

The Weebly App Center

Site owners can browse through collections, categories and sub-categories, can filter based on ratings, popularity, freshness, or for free apps, and can search using keywords.

Each app has a details page that describes the app, explains the pricing, displays ratings, and provides an install button. Apps can also have an optional live demo site where you can showcase the app in action.

App Details page in the App Center

​Site owners access apps from the Editor, and can also visit the App Center from here.

Accessing the App Center and apps from the Weebly Editor

They manage and uninstall apps from the Manage Apps page.

Managing installed apps

First Steps . . .

To get started, you need to create a developer account. Once created, you’ll have access to a test site where you can play with Weebly, install and test your app, and review your app in the App Center. You’ll also be able to create an optional demo site for your app.

If you’re creating an element, go ahead and try our tutorial. It’ll teach you everything you’ll need to create your first Weebly element!

Sample Apps

We’ve created sample apps to help you get started. The Bootstrap element is a very simple app, while the Pricing Chart app shows a bit more complexity. We also have sample apps that use our OAuth flow for authentication. All of our sample apps and Weebly Elements are open sourced and available on Github for you!

App Development Lifecycle

While you develop your app, it remains in a draft state. You can continue to work on it, and have as many draft versions as you like, uploading new draft versions as you go. Once you’re done with development and you’ve run through the App Policy Review Checklist, you can [submit[(pf_apps_submit_review.html) to us and we’ll review it. Once we approve it, you release it into the App Center.

​You can submit only one version for review at a time, and only one version can be released and active in the App Center at any given time. Once your app is released to the App Center, you can begin working on another draft that you may then submit for review. When that draft is accepted and released to the App Center, the previous version is removed and archived.

You can delete draft versions and approved versions of your app as you need to. The lifecycle looks like this:

App development lifecycle

​Have Questions?

If you have any questions while you’re building your app, or suggestions for how we can improve the APIs or the documentation, use the Submit a Bug link in the Dev Admin.


Help make these docs better!