Using Dropconfig for announcements

Using DropConfig for accouncements

Use case

You want to display temporary announcements on your website.


  • You are going to have website maintenance.
  • You want to notify users that terms of service have changed.
  • You are having a sale.

The dropconfig

Let’s set up a dropconfig with information we will use for announcements.

We will use the following JSON:

  "announcements": [
      "title": "We are going down for maintenance",
      "body": "Between Monday 11pm and Tuesday 6am will be having scheduled maintenance. We appologize for the interruption",
      "start_date": "2019-01-28T23:00:03+0000",
      "end_date": "2019-01-29T06:00:03+0000",
      "closeable": true

In Dropconfig editor’s raw-JSON mode this looks like: raw

Using form-view

Now that we have a basic structure we can easily use the Form UI to create and edit announcements without ever touching JSON again!


On your website

Note: this demo code will use ES6 javascript features for clarity


       <title>Annoucements Demo</title>
        <div id="announcements-container"></div>
        <script src="/path/to/javascript.js"></script>

The JavaScript

We will grab the document and inject the announcements into the DOM.

Note: we use the access URL of the demo dropconfig in the code-example below. You would need to replace the URL with the access-URL of your dropconfig.

const res = await fetch("");
const data = await res.json();

const parent = document.getElementById("announcements-container");
    const el = document.createElement("div");
    el.innerText = announcement.body;

This small example shows how easy it is to integrate things into your website using dropconfig.