API Integration Guide

This guide explains how to display your Oakline sessions on your own website. It is designed to be accessible even if you don't have advanced technical knowledge.

Step 1: Enable the API and Get Your Key

Before you can use the API, it must be activated for your account by Oakline support. Once enabled:

Log in to your Oakline Admin Dashboard.
Go to Settings > Integrations.
You will see your API Key (a code starting with oak_...).
Click Copy next to the key.

[!IMPORTANT] Keep your API key secure. It acts like a password that authorises your website to access your session data. Do not paste it into public repositories or client-side code that can be inspected.

Step 2: The Integration Code

Below is a ready-to-use code template. Copy and paste it into the page on your website where you want sessions to appear.

What to change:

const TENANT_SLUG = 'your-name'; → Replace with your Oakline subdomain (e.g. if your portal is forestfamilies.oakline.app, use 'forestfamilies').
const API_KEY = 'your-key-here'; → Paste the key you copied in Step 1.

Example Script:

<!-- Sessions will appear here -->
<div id="oakline-sessions-container">Loading sessions...</div>

<script>
  // --- CONFIGURATION ---
  const TENANT_SLUG = 'your-name';       // <-- CHANGE THIS
  const API_KEY     = 'your-key-here';   // <-- PASTE YOUR KEY
  // ---------------------

  async function loadOaklineSessions() {
    const container = document.getElementById('oakline-sessions-container');
    const url = `https://oakline.app/api/public/tenants/${TENANT_SLUG}/sessions`;

    try {
      const response = await fetch(url, {
        headers: { 'X-API-Key': API_KEY }
      });

      if (!response.ok) {
        container.innerHTML = '<p>Unable to load sessions right now.</p>';
        return;
      }

      const json = await response.json();

      if (!json.data || json.data.length === 0) {
        container.innerHTML = '<p>No sessions available at the moment.</p>';
        return;
      }

      let html = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;">';

      json.data.forEach(session => {
        const isFull = session.capacity.is_full;
        html += `
          <div style="border:1px solid #ddd;padding:15px;border-radius:8px;font-family:sans-serif;">
            ${session.image_url
              ? `<img src="${session.image_url}" style="width:100%;border-radius:5px;margin-bottom:10px;height:150px;object-fit:cover;">`
              : ''}
            <h3 style="margin:0 0 8px 0;">${session.title}</h3>
            <p style="font-size:0.9em;color:#666;margin:0 0 10px 0;">${session.description_short || ''}</p>
            <p style="margin:0 0 12px 0;"><strong>Price:</strong> £${session.price.amount.toFixed(2)}</p>
            ${isFull
              ? `<span style="display:inline-block;padding:10px;background:#eee;color:#999;border-radius:5px;width:100%;text-align:center;box-sizing:border-box;">Fully Booked</span>`
              : `<a href="${session.booking_url}" target="_blank"
                    style="background:${json.tenant?.theme_color || '#198754'};color:white;padding:10px;text-decoration:none;border-radius:5px;display:inline-block;text-align:center;width:100%;box-sizing:border-box;">
                    Book Now
                 </a>`
            }
          </div>
        `;
      });

      html += '</div>';
      container.innerHTML = html;

    } catch (error) {
      console.error('Error loading sessions:', error);
      container.innerHTML = '<p>An error occurred while loading sessions.</p>';
    }
  }

  loadOaklineSessions();
</script>

Frequently Asked Questions

Do I need to be a programmer?

Not necessarily. Most website builders (WordPress, Wix, Squarespace) have an "Insert HTML" or "Embed Code" block where you can paste the script above.

Will fully booked sessions still appear?

Yes — they appear with a "Fully Booked" label instead of a "Book Now" button. This lets parents see what you offer even when a session is at capacity.

How are sessions updated?

Automatically. Any changes you make in your Oakline dashboard (new sessions, capacity changes, cancellations) are reflected on your website within 60 seconds.

What if the API key is wrong?

The sessions container will show "Unable to load sessions right now." Check that you copied the full key correctly and that the API is enabled for your account.

Need help?

If you encounter technical difficulties, send this guide to your website developer or contact our support team.