Adding Widget to Your WordPress Site

How to Add the Playgama Widget to Your WordPress Website (Step-by-Step)

Looking to embed the Playgama widget on your WordPress site? Whether you want it on all pages or just one, this guide walks you through the exact steps to add the Playgama widget using functions.php. No plugins needed — just clean, native WordPress code!

To get your own Widget ID (e.g., WA0000000000000), follow these steps:

1. Log in to your Playgama account.

2. Create a new widget in your dashboard.

3. Once it's created, check the embed code — your unique widget_id will be included there.

4. If your widget is already created, go to its page and click the </> button to view the embed code.

Step 1: Open Your Theme’s functions.php File

Using FTP or your hosting file manager, navigate to:

/data/html/wp-content/themes/<THEME_NAME>/functions.php

Replace <THEME_NAME> with your active theme's folder name.

---

Step 2: Load the Playgama SDK Script

Paste this code inside the functions.php file to enqueue the Playgama JavaScript SDK:

add_action( 'wp_enqueue_scripts', function() {
 wp_enqueue_script(
   'playgama',
   esc_url( 'https://widgets.playgama.com/index.js' ),
   [],
   '1.0.0',
   [ 'strategy' => 'async' ],
 );
} );

This ensures the Playgama script is loaded efficiently on the frontend of your site.

---

Step 3: Initialize the Widget

Option A: Show the widget on all pages

Add this snippet to functions.php if you would like to initialize the widget on every page:

add_action( 'wp_footer', function() {
 echo '<script nonce="widget-playgama">
   window.playgama_widgets = window.playgama_widgets || { clbs: [] };
   window.playgama_widgets.clbs.push(() => {
     window.playgama_widgets.defineWidget({
       widget_id: "ADD_YOUR_WIDGET_ID_HERE",
       element_id: "widget-playgama"
     });
     window.playgama_widgets.showWidget("widget-playgama");
   });
 </script>';
});

🔁 Don't forget to replace widget_id with your own Widget ID!

Next, add this HTML code wherever you want the widget to appear on your site:

<div id="widget-playgama" style="width: 510px; height: 180px; margin: 10px auto; padding: 0 20px;">
  <div style="opacity: 0.2;font-family: sans-serif;font-size: 10px">
    Powered by <a href="https://playgama.com/" target="_blank" rel="noopener">Playgama</a>
  </div>
</div>

---

Option B: Show the widget on specific pages only

If you only want the widget on selected pages (like your homepage, contact page, or a landing page), you may embed the initialization script directly where the widget should appear. See the next step.

Step 4: Insert the Widget HTML in Your Page or Template

Wherever you want the Playgama widget to appear, add this HTML snippet:

<div id="widget-playgama" style="width: 510px; height: 180px; margin: 10px auto; padding: 0 20px;">
  <div style="opacity: 0.2;font-family: sans-serif;font-size: 10px">
    Powered by <a href="https://playgama.com/" target="_blank" rel="noopener">Playgama</a>
  </div>
</div>

<script nonce="widget-playgama">
  window.playgama_widgets = window.playgama_widgets || { clbs: [] };
  window.playgama_widgets.clbs.push(() => {
    window.playgama_widgets.defineWidget({
      widget_id: "ADD_YOUR_WIDGET_ID_HERE", // Don't miss this part
      element_id: "widget-playgama"
    });
    window.playgama_widgets.showWidget("widget-playgama");
  });
</script>

Place it in your page content (using a custom HTML block) or directly inside your template file (e.g., data/html/wp-content/themes/<THEME_NAME>/templates/page.html).

✅ Be sure to use your own widget_id instead of the example!

---

Tips for Developers

• You can change the width and height values in the style attribute to adjust the widget size.

• The widget is fully responsive, but for the basic version with 3 games, we recommend a size of 510×180 pixels to ensure a clean, balanced look on both desktop and mobile.

• Max game height is 320 px.

• It works with any custom or child theme

• Script is loaded asynchronously to avoid slowing down your site

• No need for third-party plugins

• Clean and SEO-friendly integration