# 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](https://widgets.playgama.com/account/login).
* 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:

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

6. 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:

```html
<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.&#x20;

***

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

***
