Integration

REST API

Each project has a unique ID that you can copy from the dashboard. Use this ID to fetch scheduled notifications for that project.

API Endpoint

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

Example:

https://www.schedulehost.com/api/projects/d465f9c8-0cb7-4687-ae38-5dfa0a96ce88/notifications

Query Parameters

You can add query parameters to filter the results:

Example: https://www.schedulehost.com/api/projects/d465f9c8-0cb7-4687-ae38-5dfa0a96ce88/notifications?debug=0

Response Format

Example Response:

[
  {
    "id": "c4139d12-c4d5-4b0e-912e-2ba7ef7b9a6e",
    "projectId": "d465f9c8-0cb7-4687-ae38-5dfa0a96ce88",
    "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",
    "project": {
      "id": "d465f9c8-0cb7-4687-ae38-5dfa0a96ce88",
      "name": "My Website"
    }
  }
]

Schedule Task Properties

• id: Unique identifier for the schedule task
• projectId: ID of the project this task belongs to
• scheduledDatetimeStart: When the notification should start showing (ISO string or null)
• scheduledDatetimeEnd: When the notification should stop showing (ISO string or null)
• permanent: Boolean indicating if this is a permanent notification
• message: HTML content of the notification
• active: Boolean indicating if the notification is currently active
• createdAt/updatedAt: Timestamps for when the task was created/modified
• project: Basic project information (id and name)

Integration in Your Web App

You can use JavaScript to fetch and display notifications in your web application:

async function loadNotifications(projectId) {
  try {
    const response = await fetch(`https://www.schedulehost.com/api/projects/${projectId}/notifications`);
    const notifications = await response.json();
    
    notifications.forEach(notification => {
      // Create and display notification banner
      displayNotification(notification);
    });
  } catch (error) {
    console.error('Failed to load notifications:', error);
  }
}

function displayNotification(notification) {
  // Check if notification was already dismissed
  const dismissedKey = `notification_dismissed_${notification.id}`;
  if (localStorage.getItem(dismissedKey)) {
    return; // Skip if already dismissed
  }

  // Create notification element
  const banner = document.createElement('div');
  banner.innerHTML = `
    <div style="background: #3b82f6; color: white; padding: 12px; position: relative;">
      <div style="margin-right: 40px;">
        ${notification.message}
      </div>
      <button onclick="dismissNotification('${notification.id}')" 
              style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);">
        ×
      </button>
    </div>
  `;
  
  document.body.insertBefore(banner, document.body.firstChild);
}

function dismissNotification(notificationId) {
  localStorage.setItem(`notification_dismissed_${notificationId}`, 'true');
  // Remove the banner from DOM
  event.target.closest('div').remove();
}

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>