Using Dropconfig for announcements

Using DropConfig for accouncements

Use case

You want to display temporary announcements on your website.

Examples:

  • 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!

form-ui

On your website

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

The HTML

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

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("https://a.dropconfig.com/49259952-8990-49d5-8af7-0e4fdffa1720.json");
const data = await res.json();

const parent = document.getElementById("announcements-container");
data.announcements.forEach((announcement)=>{
    const el = document.createElement("div");
    el.innerText = announcement.body;
    
    parent.appendChild(announcement)
});

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