Agents guide to the InfoSlides galaxy

This guide shows how to design a slide template and connect live data to it: The data can be a queue number, meter readings, scores or just about anything your own system knows and wants on a screen. It is written for AI agents and developers working through the InfoSlides API, the infoslides CLI or the MCP server, and it works the same for a person using the dashboard.

Every plan includes one live data slide, the free plan too. Professional and higher plans have no limit.

How it fits together

1. A template is HTML and CSS with {{field}} placeholders.
2. A slide uses the template in a slideshow. Adding it creates a push source for it: the place its data is sent to.
3. Your system pushes data to the push source whenever something changes. The source keeps only the latest data.
4. The screen shows it. The slide stays hidden until the first data arrives, so nobody ever sees an empty layout.

1. Design the template

A template is one screen, designed at 1920 x 1080. Write the HTML for the slide body and the CSS for its look. Anywhere a value should appear, write its field name in double braces:

<div class="qb">
  <div class="qb-label">Now serving</div>
  <div class="qb-ticket">{{nowServing}}</div>
  <div class="qb-room">{{room}}</div>
  {{#waitMinutes}}
  <div class="qb-wait">About {{waitMinutes}} min wait</div>
  {{/waitMinutes}}
  <div class="qb-bar"><span style="--p:0{{capacityPct}}"></span></div>
</div>

.qb { display:flex; flex-direction:column; justify-content:center; height:100%;
      padding:6vh 5vw; background:#0f766e; color:#fff; font-family:Inter, sans-serif; }
.qb-label  { font-size:3vh; letter-spacing:.15em; text-transform:uppercase; }
.qb-ticket { font-size:22vh; font-weight:900; line-height:1; }
.qb-room   { font-size:6vh; font-weight:700; }
.qb-wait   { font-size:3vh; opacity:.8; margin-top:2vh; }
.qb-bar    { height:1.5vh; margin-top:4vh; border-radius:99px; background:rgba(255,255,255,.2); }
.qb-bar span { display:block; height:100%; border-radius:inherit; background:#5eead4;
               width:calc(var(--p) * 1%); }

The rules that make a template work well on a live screen:

• Every {{field}} becomes a data field. The fields are text; send numbers already formatted the way they should read ("1,240", "A-142").
• Hide what has no value with a section: {{#field}} ... {{/field}} is shown only when the field has a value that is not empty, "0" or "false".
• Let data drive the visuals, not the markup. Put a number into a CSS custom property, as in style="--p:0{{capacityPct}}", and let the CSS draw the bar. The leading 0 keeps the bar empty rather than full when the value is missing (064 still reads as 64).
• Send states, not colours. A field like {{status}} used as a class (class="room is-{{status}}") lets the CSS choose words and colours for busy, ready or cleaning. The data says what is true; the template decides how it looks.
• Lists are numbered fields. Templates have no loops, so a list of four is next1 to next4. Wrap each item in its own section so a short list hides the empty ones.
• Branding is free. {{TenantLogo}} and {{AccentColor}} are filled in automatically from the workspace. They are not data fields.
• No scripts and no external stylesheets. A template with <script> or CSS @import cannot play live in HTML mode, and scripts are stripped there. Use CSS for everything; CSS animation works when the screen plays in HTML mode.
• Send plain text. Values go into the template as you send them, so do not send HTML inside a value.
• Size for a room, not a laptop. Use viewport units (vh, vw) so the design scales to every screen, and keep the smallest text around 2vh. If the screen shows a news ticker, leave the bottom tenth of the slide free.

2. Create the template

Send the HTML and CSS with "dataMode": "push". That marks it as a template whose data is pushed to it.

POST /v1/templates
Authorization: Bearer isk_admin_...

{
  "title": "Clinic queue",
  "html": "<div class=\"qb\">...</div>",
  "css": ".qb { ... }",
  "dataMode": "push"
}

The response has the template's id. On a plan without AI Studio, one push template can be created this way for the free live data slide.

3. Add it to a slideshow

POST /v1/slideshows/{slideshowId}/slides/dynamic

{ "templateId": "...", "createPushKey": true }

The response has the slide's id, its sourceId, and with createPushKey a pushKey (isk_dp_...). The key is shown only once: store it now. It can do exactly one thing, push data to this source, so it is safe to hand to the system that sends the data. Create more later with POST /v1/sources/{sourceId}/keys.

4. Push data

curl -X POST "https://infoslides.app/v1/sources/{sourceId}/data" \
  -H "Authorization: Bearer isk_dp_..." \
  -H "Content-Type: application/json" \
  -d '{"nowServing":"A-142","room":"Room 2","waitMinutes":"12","capacityPct":"64"}'

• Send the whole object each time; the source keeps only the latest one.
• The payload is checked against the template: required fields must be there and have the right type. Extra fields are ignored. Add ?dryRun=true to check a payload without storing it.
• The response gives receivedAt, the time the data was stored.
• Push when something changes, not on a timer. Each change is rendered for the screen.

5. Check it and put it on a screen

• GET /v1/sources/{sourceId} shows lastReceivedAt and isShowingData.
• GET /v1/slides/{slideId}/preview.png shows the slide as it will look.
• To play it: POST /v1/devices, assign the slideshow with POST /v1/devices/{id}/schedule, and open the playerUrl from GET /v1/devices/{id}/stream.

When data stops

A push source can hide its slide when no data has arrived for a while. Set Hide the slide when no data has arrived for (minutes) on the source in the dashboard. When the clinic closes and the queue system stops sending, the slide leaves the screen by itself, and it comes back with the next push.

In the dashboard

Push sources are listed under Sources. Instead of fetch controls, each one shows when data last arrived, or Waiting for the first data. Connect opens its push address, a Create key button, a ready-to-run example and the list of its keys, where a key can be revoked.

[Screenshot] A push source on the Sources page with the Connect panel open: push address, a newly created key and the curl example.

Plans

• Every plan: one live data slide, meaning one push source feeding one slide. On plans without AI Studio, one push template for it, designed in code (HTML and CSS).
• Professional and higher: no limit on push sources, slides or templates.
• Going past the allowance returns EntitlementRequired with an upgrade link.