External Integration API

Endpoint

POST https://cronolog.ca/api/auth/magic_link

Request headers

Authorization: Bearer YOUR_API_KEY
Content-Type: application/x-www-form-urlencoded

Request body parameters

Success response 200 OK

{
  "url": "https://cronolog.ca/auth/magic?t=TOKEN"
}

Open this URL in a popup window. It is single-use and expires in 15 minutes.

Error responses

Example — curl

# New event
curl -X POST https://cronolog.ca/api/auth/magic_link \
  -H "Authorization: Bearer clk_YOUR_KEY_HERE" \
  --data-urlencode "return_to=https://example.com/timeline"

# Edit an existing event
curl -X POST https://cronolog.ca/api/auth/magic_link \
  -H "Authorization: Bearer clk_YOUR_KEY_HERE" \
  --data-urlencode "return_to=https://example.com/timeline" \
  --data-urlencode "event_id=42"

Client-side JavaScript

// 1. Fetch a magic link from your own server (never expose the API key here).
async function openEditPopup(eventId) {
  const res  = await fetch('/your-server/magic-link', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ eventId })
  })
  const { url } = await res.json()

  // 2. Open the popup.
  const popup = window.open(
    url,
    'cronolog-edit',
    'width=780,height=700,resizable=yes,scrollbars=yes'
  )

  // 3. Listen for the result.
  window.addEventListener('message', function handler(event) {
    if (event.origin !== 'https://cronolog.ca') return
    const { type, eventId } = event.data

    if (type === 'cronolog:saved')  { /* event created or updated */ }
    if (type === 'cronolog:deleted') { /* event was deleted */ }

    window.removeEventListener('message', handler)
    popup?.close()
  })
}

// "Add event" — omit eventId
function openNewEventPopup() {
  return openEditPopup(null)
}

postMessage payload

When the popup closes after a successful save or delete, your page receives a window.message event with this shape:

{
  type:    "cronolog:saved"   // or "cronolog:deleted"
  eventId: 42                 // Cronolog event ID (0 for a newly created event)
}

Server — generate a magic link

# Pseudo-code — adapt to your server framework

POST /your-server/magic-link
  body: { eventId: 42 }           # or null for new event

→ POST https://cronolog.ca/api/auth/magic_link
    Authorization: Bearer $CRONOLOG_API_KEY
    return_to: https://example.com/timeline-page
    event_id:  42                  # omit if creating new

← { "url": "https://cronolog.ca/auth/magic?t=TOKEN" }

→ return { url } to the browser

Client — open popup and handle result

const CRONOLOG_ORIGIN = 'https://cronolog.ca'

document.querySelectorAll('[data-edit-event]').forEach(btn => {
  btn.addEventListener('click', async () => {
    const eventId = btn.dataset.editEvent || null

    // 1. Ask your server for a magic link.
    const res = await fetch('/your-server/magic-link', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ eventId })
    })
    if (!res.ok) { console.error('Could not get magic link'); return }
    const { url } = await res.json()

    // 2. Open the popup.
    window.open(url, 'cronolog-edit', 'width=780,height=700,resizable=yes,scrollbars=yes')
  })
})

// 3. Listen for save/delete confirmation from the popup.
window.addEventListener('message', event => {
  if (event.origin !== CRONOLOG_ORIGIN) return

  const { type, eventId } = event.data

  if (type === 'cronolog:saved') {
    console.log('Event saved, Cronolog ID:', eventId)
    // e.g. refetch your timeline JSON and re-render
  }

  if (type === 'cronolog:deleted') {
    console.log('Event deleted, Cronolog ID:', eventId)
    // e.g. remove the event from the DOM
  }
})

HTML — edit buttons

<!-- Edit an existing event -->
<button data-edit-event="42">Edit event</button>

<!-- Add a new event (no ID needed) -->
<button data-edit-event="">Add event</button>