Skip to main content

Show / hide the widget (during gameplay)

Sometimes you don’t want the widget visible all the time — for example during a match, cutscene, or any “focus mode” moment where UI clutter is distracting.

This tutorial shows how to hide the widget temporarily and then show it again without destroying it.

What this does (and does not do)​

  • Hide: makes the overlay wrapper invisible (visibility: hidden).
  • Show: makes it visible again (visibility: visible).
  • It does not disconnect the widget, revoke tokens, or destroy the iframe.

If you want to fully remove the widget, use Savage.destroy() instead.

API methods​

The proxy exposes:

  • Savage.hideOverlay()
  • Savage.showOverlay()
  • Savage.isOverlayVisible() → boolean

When to call show/hide (example)​

Example: simple toggle​

function setWidgetVisible(visible) {
  if (!Savage.isOverlayInitialized()) return;

  if (visible) Savage.showOverlay();
  else Savage.hideOverlay();
}

// Hide during gameplay
setWidgetVisible(false);

// Show again in menus / lobby
setWidgetVisible(true);

Example: integrate with your game state​

type GameState = 'LOBBY' | 'PLAYING' | 'PAUSED' | 'RESULTS';

function onGameStateChange(state: GameState) {
  if (!Savage.isOverlayInitialized()) return;

  // Hide while actively playing; show in all other states
  if (state === 'PLAYING') {
    Savage.hideOverlay();
    return;
  }

  Savage.showOverlay();
}

Example: bind a hotkey (debug / QA)​

window.addEventListener('keydown', (e) => {
  if (e.key !== 'g') return; // press "g" to toggle
  if (!Savage.isOverlayInitialized()) return;

  if (Savage.isOverlayVisible()) Savage.hideOverlay();
  else Savage.showOverlay();
});

Notes​

  • If the overlay isn’t initialized yet, hideOverlay() / showOverlay() will warn and do nothing.
  • Hiding uses visibility, so the widget won’t intercept clicks while hidden.