Bootstrap Element

A barebones bootstrap element that will get you up and running in the blink of an eye. There is no real functionality in this element, and it is best used as a starting point for beginners. Download it from Github here.

Price Chart Element

A more functional example of an element. This element displays a given number of price plans, each with a given number of features. This example makes use of settings, content fields, Mustache loops, and LESS CSS. It also contains tooltips and a built-in tutorial. Use it in conjunction with our element tutorial.

Weebly Price Chart

Download it from Github here. If you’ll be doing the tutorial, you also need to download its assets.

Full Open Source Element Samples on GitHub

Elements created by Weebly and available in the App Center are also available in their source code at Github.

Back-end App Examples

This example app uses OAuth2 to subscribe to webhooks and then logs the webhook notification. There are two versions of the example - one is PHP and the other is NodeJS. Both live in a Git repository that you can clone and run on Heroku.

  • PHP: This version contains the server-side code for the application. It can be deployed to a Heroku server or your own server. The application.php file contains the methods for handling OAuth, parsing parameters from a request URL, processing the webhooks payload, and outputting messages from the webhooks to the messages.txt file (found in the messages directory). The index.php file accesses the client ID and secret from environment variables. In the lib/Util/Weebly directory, the WeeblyClient.php file builds and returns the URLs needed for OAuth and for making authenticated API calls. It haslo handles trading the authorization code for the access token. Other files in the lib/Util directory verify the HMAC hash and write log messages. All other files are needed by Heroku or other servers, for example to access third-party libs.
  • NodeJS: This is the NodeJS version of the server side code. It can also be deployed to Heroku. In the apps directory, oauth.js handles the OAuth flow and outputs messages to the /messages/messages.txt. The webhooks-router.js file manages the webhooks file and also outputs messages. The utility.js file handles hmac validation and generation. The /middleware/weebly.js file accesses the client ID and secret from environment variables or you can hardcode them in the server.js file. The rest of the files are needed by Heroku or other servers, for example to access third-party libs.

Download and review the code to better understand how to work with our OAuth implementation and how to work with webhooks. You can also use the examples as a starting point for your own app.

To use the sample apps:

  1. If not already done, create a developer account and register this sample app. You’ll need the client ID and secret key that gets generated when registering an app in order to use this sample.
  2. If using Heroku install the Heruko command line interface
  3. Clone the Github repo that contains the Weebly example code (or download the zip).
  4. Open the manifest.json file and for the callback_url entries, replace ROOT_URL with a URL that points to your server. For client_id, replace CLIENT_ID with your client ID (which is found on the app’s page in the Dev Admin portal).
  5. If using Heroku, run the following to set your app’s client ID and app’s secret key as environment variables. If you’re not using Heroku, then set these as variables in your environment, or add them to the code.
heroku create
heroku config:set WEEBLY_CLIENT_ID=[your_apps_client_id]
heroku config:set WEEBLY_SECRET_KEY=[your_apps_secret_key]
git push heroku master
heroku ps:scale web=1

Both the node and php servers use OAuth to authenticate. In both, the access token in written to the console. You’ll need the token to access the API. If using Heroku, you can access the logs using heroku-logs --tail.

If you want to run the app from a Weebly site:

  1. Create a zip file that contains only the manifest.json file.
  2. Upload the zip to Weebly.
  3. Install the uploaded zip to a test site. When you install it, the OAuth process is kicked off.

Help make these docs better!