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.
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.phpfile 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
index.phpfile accesses the client ID and secret from environment variables. In the
WeeblyClient.phpfile 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/Utildirectory 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.jshandles the OAuth flow and outputs messages to the
webhooks-router.jsfile manages the webhooks file and also outputs messages. The
utility.jsfile handles hmac validation and generation. The
/middleware/weebly.jsfile accesses the client ID and secret from environment variables or you can hardcode them in the
server.jsfile. 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:
- 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.
- If using Heroku install the Heruko command line interface
- Clone the Github repo that contains the Weebly example code (or download the zip).
- Open the
manifest.jsonfile and for the
ROOT_URLwith a URL that points to your server. For
CLIENT_IDwith your client ID (which is found on the app’s page in the Dev Admin portal).
- 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.
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
If you want to run the app from a Weebly site:
- Create a zip file that contains only the
- Upload the zip to Weebly.
- Install the uploaded zip to a test site. When you install it, the OAuth process is kicked off.