# Integrating a Game Widget via Google Ad Manager (GAM)

This method dynamically loads the widget into the ad slot, ensuring seamless integration.

**⚡️ 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: Create a New Creative in GAM

1. Navigate to your Google Ad Manager account.
2. Go to **Delivery > Creatives**.
3. Click **New creative**.
4. Select the advertiser for this creative.
5. Choose **Custom** as the creative type. Click **Continue**.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdmO_Xonx3rIPOJH8jQE-iyCiINs3e14wPwvX0WgS5lR3Zgta1NUjDBVbey00vIoOcPWcFLPxR8twb5yfQ7BxihZAfufzvLUjN5J_EpdGtfpIIeBo8MKwggWC70dpsRKgOZ1EGB?key=yO0qnw6Xp0toxjGXx1gxBQ" alt=""><figcaption></figcaption></figure>

#### Step 2: Configure the Creative

1. Give your creative a descriptive **Name** (e.g., "Playgama Widget Loader").
2. In the "Code snippet" section, paste the following code:

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
  <script>
    try {
      const iFrame = window?.frameElement;
      const widgetParent = iFrame?.parentNode;
      const { width: embedWidgetWidth = '', height: embedWidgetHeight = '' } = iFrame;
      widgetParent.style.height = embedWidgetHeight + 'px' || '300px';
      widgetParent.style.width = embedWidgetWidth + 'px' || '300px';

      const widgetID = "widget-playgama" + "-" + new Date().getTime();
      iFrame.style.display = 'none';

      const amIAliveScript = top.document.querySelectorAll("[src='https://widgets.playgama.com/index.js']")?.length === 0;
      if (amIAliveScript) {
        const widgetScript = document.createElement("script");
        widgetScript.setAttribute("src", "https://widgets.playgama.com/index.js");
        widgetScript.setAttribute("async", "true");
        widgetScript.setAttribute("id", "playgama-widget-script");

        top.document.head.appendChild(widgetScript);
      }

      top.playgama_widgets = top.playgama_widgets || { clbs: [] };
      top.playgama_widgets.clbs.push(() => {
        const playgamaOutDiv = document.createElement("div");
        playgamaOutDiv.setAttribute("id", widgetID);
        playgamaOutDiv.insertAdjacentHTML('beforeend', `<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>`);
        widgetParent.appendChild(playgamaOutDiv);
      });
      top.playgama_widgets.clbs.push(() => {
        top.playgama_widgets.defineWidget({
          widget_id: "ADD_YOUR_WIDGET_ID_HERE", // Replace with your actual widget ID
          element_id: widgetID,
        });
        top.playgama_widgets.showWidget(widgetID);
      });
    } catch {}
  </script>
</body>
</html>

```

**🚨 Don't forget to insert your actual `widget_id` from the embed code.**<br>

1. Ensure the **Target ad unit size** matches the size of the line item where this creative will be used.
2. Click **Save**.

#### Step 3: Assign Creative to a Line Item

1. Open an existing Line Item or create a new one that targets the ad inventory where you want the widget to appear.
2. Associate the new creative you just created with this line item.
3. Save the line item.

Once the line item is active, the Playgama widget will begin to serve on your website in the targeted ad units.

<br>
