Integration

RESTAPI

Each project has a unique ID, and you can copy the value in the dashboard.

https://www.schedulehost.com/api/projects/{project_id}/notifications

Example:

https://www.schedulehost.com/api/projects/proj_gjrh1gppx8pxxwnak826zsh1/notifications

Example Response:

[
  {
    "id": "notif_rnyfr6rcefofja29gc0rowly",
    "projectId": "proj_gjrh1gppx8pxxwnak826zsh1",
    "scheduledDatetimeStart": "",
    "scheduledDatetimeEnd": "",
    "permanent": true,
    "message": "<p>Django developers: Is your template system causing more problems than it solves? Please check <a href=\"https://saashammer.com/blog/rethinking-django-template-part-1/\" target=\"_blank\" rel=\"noopener\">ReThinking Django Template</a></p>",
    "active": true,
    "createdAt": "2025-07-31T02:26:36.000Z",
    "updatedAt": "2025-07-31T02:26:36.000Z",
  }
]

In your web app, you can use JS to send request and consume response to fit your custom needs.

SDK

For developer who want to quickly integrate, you can also try our SDK package.

This JavaScript SDK allows you to easily display scheduled notifications from your ScheduleHost backend on any website.

How It Works

• Initialization:
  Call ScheduleHost.init({ projectId, debug, ...options }) to fetch and display notifications for a specific project.

• API Request:
  The SDK builds a request to https://www.schedulehost.com/api/projects/{projectId}/notifications, including any additional options as query parameters. Boolean options are converted to 1 or 0.

• Display Logic:
  For each notification received:

  • If the notification has not been dismissed before (checked via localStorage), a banner is created at the top of the page showing the message and a close button.
  • When the close button is clicked, the banner is removed and the notification is marked as "read" in localStorage so it won't show again.

• Global Access:
  The SDK attaches itself to the global window object as window.ScheduleHost, so you can call it from anywhere in your site's JavaScript.

Example Usage

<script type="text/javascript"
        src="https://www.schedulehost.com/schedulehost.js"
        defer
>
</script>
<script>
  document.addEventListener('DOMContentLoaded', async (event) => {
      window.ScheduleHost && window.ScheduleHost.init({
        projectId: "{{ DJANGO_SETTINGS.SCHEDULE_HOST_PROJECT_ID }}",
      });
  })
</script>
<style>
  .scheduled-notification-banner {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #009579;
    color: white;
  }

  .scheduled-notification-banner > div {
    text-align: center;
    flex-grow: 1;
  }

  .scheduled-notification-banner a {
    color: white;
    text-decoration: underline;
  }

  .scheduled-notification-banner a:hover {
    color: white;
  }

  .scheduled-notification-close-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
  }

  .scheduled-notification-close-icon {
    fill: white;
    height: 20px;
    width: 20px;
    vertical-align: middle;
  }
</style>

Style

Now the SDK would help display a topbar notification, and below are some css code which makes it look elegant for reference

<style>
  .scheduled-notification-banner {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #009579;
    color: white;
  }

  .scheduled-notification-banner > div {
    text-align: center;
    flex-grow: 1;
  }

  .scheduled-notification-banner a {
    color: white;
    text-decoration: underline;
  }

  .scheduled-notification-banner a:hover {
    color: white;
  }

  .scheduled-notification-close-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
  }

  .scheduled-notification-close-icon {
    fill: white;
    height: 20px;
    width: 20px;
    vertical-align: middle;
  }
</style>