WPG Widget Style Showroom

01

Current brand system

WPG Native

The familiar World Poker Guide foundation.

Black fintech surfaces, Sora headlines, Hanken Grotesk body copy and the restrained WPG gold gradient.

Implementation shiftWPG brand baseline

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #131418;
  --wpg-card-bg: #1a1c21;
  --wpg-text: #f4f5f7;
  --wpg-muted: #9aa0aa;
  --wpg-accent: #d4af37;
  --wpg-button-bg: linear-gradient(180deg, #f3d27a, #d4af37);
  --wpg-button-text: #14110a;
}

#wpg-widget .wpg-game-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}

#wpg-widget .wpg-game-card::before {
  content: "";
  position: absolute;
  inset: 15px auto 15px 0;
  width: 3px;
  background: #d4af37;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

02

Editorial · Utility · Light

Nordic Data Table

The widget becomes a clean data table.

Cards lose their card-like appearance and become structured rows with subtle columns and text-link actions.

Implementation shiftRows, not cards

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #ffffff;
  --wpg-card-bg: transparent;
  --wpg-text: #171717;
  --wpg-muted: #6d6d67;
  --wpg-accent: #171717;
  --wpg-button-bg: transparent;
  --wpg-button-text: #171717;
}

#wpg-widget .wpg-game-list {
  gap: 0;
  border-top: 1px solid #d8d9d4;
}

#wpg-widget .wpg-game-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  min-height: 74px;
  border: 0;
  border-bottom: 1px solid #d8d9d4;
  border-radius: 0;
  background: transparent;
}

#wpg-widget .wpg-button {
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

03

Premium · Dramatic · Centered

Casino Gold Suite

A private-room presentation.

A centered club crest, large game panels and full-width gold actions make the widget feel like a luxury concierge panel.

Implementation shiftCentered suite panel

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #11100e;
  --wpg-card-bg: #191713;
  --wpg-text: #fffaf0;
  --wpg-muted: #a99d85;
  --wpg-accent: #d9b96f;
  --wpg-button-bg: linear-gradient(180deg, #efd58b, #d9b96f);
  --wpg-button-text: #171006;
}

#wpg-widget .wpg-widget__header {
  flex-direction: column;
  text-align: center;
}

#wpg-widget .wpg-game-card {
  min-height: 118px;
  align-items: flex-start;
  flex-direction: column;
  padding: 22px;
}

#wpg-widget .wpg-button {
  width: 100%;
  margin-top: 4px;
  border-radius: 999px;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

04

Nightclub · Electric · Modular

Neon Grid

Three games become three glowing tiles.

The list switches into a responsive card grid with neon borders, corner status labels and bottom-aligned actions.

Implementation shiftResponsive tile grid

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: rgba(16,8,28,.88);
  --wpg-card-bg: rgba(28,13,47,.84);
  --wpg-text: #ffffff;
  --wpg-muted: #a8a0b8;
  --wpg-accent: #ff42d0;
  --wpg-button-bg: #30f2e2;
  --wpg-button-text: #041313;
}

#wpg-widget .wpg-game-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#wpg-widget .wpg-game-card {
  min-height: 230px;
  align-items: stretch;
  flex-direction: column;
  border: 1px solid rgba(255,66,208,.35);
}

#wpg-widget .wpg-button {
  width: 100%;
  margin-top: auto;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

05

Felt · Brass · Traditional

Classic Poker Ledger

Part card room, part handwritten ledger.

The header becomes a left rail while the games read as compact entries on green felt with warm brass details.

Implementation shiftPermanent identity rail

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #123825;
  --wpg-card-bg: transparent;
  --wpg-text: #fff7df;
  --wpg-muted: #c6bda4;
  --wpg-accent: #d6a85e;
  --wpg-button-bg: #e1b86f;
  --wpg-button-text: #25170a;
}

#wpg-widget .wpg-widget {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-rows: auto auto;
}

#wpg-widget .wpg-widget__header {
  grid-row: 1 / 3;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(214,168,94,.35);
}

#wpg-widget .wpg-game-card {
  border: 0;
  border-bottom: 1px dashed rgba(214,168,94,.35);
  border-radius: 0;
  background: transparent;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

06

Resort · Playful · Layered

Miami Floating Stack

The cards break out of the rigid list.

Offset game cards, oversized round actions and a sunset palette create a playful resort-club implementation.

Implementation shiftOffset layered stack

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: rgba(255,255,255,.78);
  --wpg-card-bg: #ffffff;
  --wpg-text: #1b2842;
  --wpg-muted: #667085;
  --wpg-accent: #ff647d;
  --wpg-button-bg: #16cbb5;
  --wpg-button-text: #062824;
}

#wpg-widget .wpg-game-card:nth-child(1) {
  transform: translateX(-26px) rotate(-1deg);
}

#wpg-widget .wpg-game-card:nth-child(2) {
  transform: translateX(25px) rotate(1deg);
  z-index: 2;
}

#wpg-widget .wpg-button {
  width: 66px;
  height: 66px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}

#wpg-widget .wpg-button::after {
  content: "→";
  font-size: 1.55rem;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

07

Formal · Navy · Structured

Royal Sidebar

A dashboard with a permanent identity rail.

The header becomes a vertical sidebar and the game list occupies a formal content panel with numbered rows.

Implementation shiftTwo-column dashboard

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #10224c;
  --wpg-card-bg: transparent;
  --wpg-text: #f7f9ff;
  --wpg-muted: #aab6d0;
  --wpg-accent: #c9d3e6;
  --wpg-button-bg: #e7edf8;
  --wpg-button-text: #0b1834;
}

#wpg-widget .wpg-widget {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}

#wpg-widget .wpg-widget__header {
  grid-row: 1 / 3;
  min-height: 430px;
  flex-direction: column;
  align-items: flex-start;
  border-right: 1px solid rgba(201,211,230,.28);
}

#wpg-widget .wpg-game-list {
  counter-reset: game;
}

#wpg-widget .wpg-game-card {
  counter-increment: game;
}

#wpg-widget .wpg-game-card::before {
  content: "0" counter(game);
  color: #c9d3e6;
  font-family: Georgia, serif;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

08

Vintage · Coupon · Red

Retro Vegas Tickets

Each game becomes an admission ticket.

Dashed perforations, clipped corners and badge-like request actions make the widget feel like vintage casino ephemera.

Implementation shiftPerforated ticket system

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #fff7e8;
  --wpg-card-bg: #fff7e8;
  --wpg-text: #2d2119;
  --wpg-muted: #78685b;
  --wpg-accent: #c63e31;
  --wpg-button-bg: #c63e31;
  --wpg-button-text: #fff8e8;
}

/* Keep the main header clean — perforation belongs only to tickets. */
#wpg-widget .wpg-widget__header {
  border: 0;
  border-bottom: 1px solid rgba(198,62,49,.34);
}

#wpg-widget .wpg-game-card {
  border: 2px dashed #c63e31;
  border-radius: 2px;
  clip-path: polygon(
    0 0, calc(100% - 12px) 0,
    100% 12px, 100% 100%,
    12px 100%, 0 calc(100% - 12px)
  );
}

#wpg-widget .wpg-game-card::after {
  content: "ADMIT ONE";
  position: absolute;
  right: 124px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

#wpg-widget .wpg-button {
  border-radius: 2px;
  box-shadow: 3px 3px 0 #6d211a;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

09

Architectural · Quiet · Spacious

Hotel Concierge

Almost no visible interface chrome.

The widget becomes a refined hospitality list with generous whitespace, hairline dividers and discreet arrow actions.

Implementation shiftWhitespace-led list

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #f4efe8;
  --wpg-card-bg: transparent;
  --wpg-text: #302820;
  --wpg-muted: #74695e;
  --wpg-accent: #8a6744;
  --wpg-button-bg: transparent;
  --wpg-button-text: #4a3728;
}

#wpg-widget .wpg-game-list {
  gap: 0;
}

#wpg-widget .wpg-game-card {
  min-height: 112px;
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid rgba(74,55,40,.22);
  border-radius: 0;
  background: transparent;
}

#wpg-widget .wpg-button {
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

10

Dense · Operational · Live widget

Industrial Terminal

A compact operations console.

The games become dense table rows with fixed columns, uppercase labels and safety-orange actions. This section can run live.

Implementation shiftDense operational table

Implementation codeComplete embed

Complete copy-paste example: create the mount point, add the scoped CSS, then load the WPG script. Replace PASTE_WIDGET_KEY_HERE with the key generated for the club in WPG Admin and make sure the website domain is allowed for that installation.

<!-- 1. Add the widget mount point where it should appear -->
<div id="wpg-widget"></div>

<!-- 2. Style the widget from the host website -->
<style>
#wpg-widget {
  --wpg-bg: #303030;
  --wpg-card-bg: #3a3a3a;
  --wpg-text: #f5f5f2;
  --wpg-muted: #b4b4ae;
  --wpg-accent: #ff6b2c;
  --wpg-button-bg: #ff6b2c;
  --wpg-button-text: #171717;
}

#wpg-widget .wpg-game-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  min-height: 66px;
  padding: 12px 14px;
  border: 0;
  border-left: 8px solid #ff6b2c;
  border-radius: 0;
}

#wpg-widget .wpg-game-card__name,
#wpg-widget .wpg-button {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

/* Optional LIVE indicator added by the host website */
#wpg-widget .wpg-widget__header::after {
  content: "LIVE";
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 12px 6px 30px;
  border: 1px solid rgba(69, 229, 143, .62);
  border-radius: 999px;
  color: #45e58f;
  background:
    radial-gradient(circle at 15px 50%,
      #45e58f 0 4px,
      rgba(69, 229, 143, .18) 5px 8px,
      transparent 9px),
    rgba(69, 229, 143, .10);
  box-shadow: 0 0 14px rgba(69, 229, 143, .12);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  animation: wpg-live-pill 1.35s ease-in-out infinite;
}

@keyframes wpg-live-pill {
  0%, 100% {
    filter: brightness(.95);
    box-shadow: 0 0 10px rgba(69, 229, 143, .10);
  }
  50% {
    filter: brightness(1.25);
    box-shadow: 0 0 24px rgba(69, 229, 143, .42);
  }
}
</style>

<!-- 3. Load WPG and paste the club's widget key below -->
<script
  src="https://worldpoker.guide/widget/v1.js"
  data-widget-key="PASTE_WIDGET_KEY_HERE"
  async>
</script>

One widget.Any brand.

WPG Native

The familiar World Poker Guide foundation.

Nordic Data Table

The widget becomes a clean data table.

Casino Gold Suite

A private-room presentation.

Neon Grid

Three games become three glowing tiles.

Classic Poker Ledger

Part card room, part handwritten ledger.

Miami Floating Stack

The cards break out of the rigid list.

Royal Sidebar

A dashboard with a permanent identity rail.

Retro Vegas Tickets

Each game becomes an admission ticket.

Hotel Concierge

Almost no visible interface chrome.

Industrial Terminal

A compact operations console.