Set up a webpage for display

Use the provider’s display URL

Choose Add online content in the media picker and select Webpage. Paste the provider’s public HTTPS fullscreen or kiosk URL, including its query parameters. The page must allow embedding. dsigns fills the assigned region; the provider controls menus and navigation inside its page.

Choose refresh and loading limits

Open Advanced webpage settings. Refresh every accepts 0 to keep the page open, or 30–86,400 seconds between refreshes after readiness. Loading timeout accepts 5–120 seconds. Choose Require a ready message for a page you control so a frame that has not loaded its data uses fallback.

Fit the dashboard to its region

Browser width and height set the page’s internal viewport; 0 follows the card. Use 320–7,680 pixels for a fixed viewport. Zoom scales the page from 25% to 200%. Crop from left/top moves that viewport inside the card. This does not scroll the document or remove a provider’s frame restrictions. Test the result at its actual screen size.

Enable scrolling on a page you manage

Enable controls for a webpage I manage. Set an initial scroll position, an optional delay and auto-scroll speed. The integration below scrolls the root document downward, pauses five seconds at the bottom and returns to the top. A dashboard with a separate scrolling panel needs its own handler for that panel. Ordinary third-party websites cannot be scrolled or scripted through this iframe.

Connect a key action

Choose a key action only when your page implements window.dsignsHandleKey and returns true after handling it. For example, map f to the dashboard’s own kiosk mode. This is a named application action, not a physical keypress. Browser fullscreen, login, permission prompts and other trusted-user actions cannot be forced this way.

Install the integration

// Add to a public dashboard that you control. Its frame policy must allow your players.
(() => {
  const allowed = new Set([
    'https://dsigns.bitprecision.com',
    'https://dsigns-dev.bitprecision.chatgpt.site',
    'https://com.bitprecision.dsigns'
  ]);
  // Desktop and BrightSign use a loopback composition host with a random port.
  const trusted = origin => allowed.has(origin) || /^http:\/\/127\.0\.0\.1:\d+$/.test(origin);
  let frame = 0;
  addEventListener('message', async event => {
    const c = event.data;
    if (event.source !== parent || !trusted(event.origin) || c?.type !== 'dsigns:control' || c.version !== 1) return;
    const reply = ok => parent.postMessage({type:'dsigns:control-result',id:c.id,ok}, event.origin);
    if (![c.scrollX,c.scrollY,c.autoScrollSpeed].every(Number.isFinite) || c.scrollX < 0 || c.scrollY < 0 || c.scrollX > 100000 || c.scrollY > 100000 || c.autoScrollSpeed < 0 || c.autoScrollSpeed > 200) { reply(false); return; }
    cancelAnimationFrame(frame);
    scrollTo(c.scrollX, c.scrollY);
    // Optional: implement your dashboard's own kiosk toggle or navigation here.
    // Example: window.dsignsHandleKey = async key => { if(key === 'f') { setKioskMode(true); return true; } return false; };
    // Do not use requestFullscreen(): browsers require a real user gesture.
    if (c.key && (!window.dsignsHandleKey || await window.dsignsHandleKey(c.key) !== true)) { reply(false); return; }
    if (c.autoScrollSpeed) {
      let previous = performance.now(), position = scrollY, pauseUntil = 0;
      const step = now => {
        const dt = Math.min((now - previous) / 1000, .1); previous = now;
        const bottom = Math.max(0, document.documentElement.scrollHeight - innerHeight);
        if (pauseUntil && now >= pauseUntil) { position = 0; pauseUntil = 0; }
        if (!pauseUntil && bottom > 0) { position = Math.min(bottom, position + c.autoScrollSpeed * dt); scrollTo(c.scrollX, position); if(position >= bottom) pauseUntil = now + 5000; }
        frame = requestAnimationFrame(step);
      };
      frame = requestAnimationFrame(step);
    }
    reply(true);
  });
  addEventListener('pagehide', () => cancelAnimationFrame(frame));
  // Call this after your dashboard has actually finished loading its data.
  parent.postMessage({type:'dsigns:ready',controlsVersion:1}, '*');
})();

Reuse and test the saved item

The same settings follow the library item into a fullscreen playlist, Content widget, screen background or card background. Save a new item to change its URL or settings, replace the old selection and publish. Refresh webpages in a layout preview reloads its visible webpages. On a player, Recovery & diagnostics → Restart output reloads that screen and starts the layout at page one.

Plan for an outage

Use a downloaded image/video fallback or Hide widget / skip playlist item. Refreshing needs a network connection and may briefly show a loading page. Ready checks and integration errors can trigger fallback, but the browser cannot diagnose every third-party embedding failure. Test loss and return of connectivity on the target hardware.