Adding Games Widget to Your Tilda Site

How to Add a Playgama Games Widget to Your Tilda Website (Step-by-Step Guide)

Want to embed a Playgama games on your Tilda site? Whether you're showcasing a portfolio or boosting engagement, adding the Playgama games widget is quick and easy. This guide will walk you through each step — no coding skills required!

⚡️ Before You Begin

You'll need your Playgama Widget ID (e.g. WA0000000000000) to set things up.

Here’s how to find it:

  • Log in to your Playgama account.

  • If you haven’t created a widget yet, do it from the dashboard.

  • After creating it, you'll see an embed code — your personal widget_id is inside.

  • Already have a widget? Just open its page and click the </> icon to access the embed code again.

Step 1: Load the Playgama Script

First, you’ll add the Playgama script to your page’s <head> section so the widget can function correctly.

  1. Open your Tilda project

  2. Navigate to the page where you want the widget

  3. Click the Page Settings (⚙️ icon)

  4. Scroll to “Additional → HTML code for the HEAD section”

  5. Paste this code:

<script async src="https://widgets.playgama.com/index.js"></script>

  1. Save your changes

Step 2: Add the Playgama Games Widget with Custom Size

Now it’s time to embed the actual widget using a custom HTML block.

  1. Return to the page editor

  2. Click “+ Add Block”

  3. Select the “Other” category

  4. Choose block T123 – HTML Code

  5. Paste the following code into the block:

<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>

  • 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.

Step 3: Publish Your Page

Once the widget is added, simply click “Publish” to make it live on your site. Your embedded game should now appear exactly where you placed the block.

Pro Tips & Notes

  • Double-check your widget ID to ensure the game loads correctly

  • The widget will display directly on the page at the defined size

PreviousAdding Games Widget to Your WordPress SiteNextAdding Games Widget to Your Framer Site

Last updated