# Adding Games Widget to Your Framer Site

## How to Embed a Playgama Games Widget in Framer (with React Code)

Looking to integrate a playable **Playgama HTML5 games widget** into your **Framer project**? Here's a complete step-by-step guide using a **custom React code component**.

### What You'll Need

* A Framer project
* A valid Playgama `widget_id` (e.g. `WA0000000000000`)
* Basic knowledge of React and Framer interface

***

### Step-by-Step Instructions

#### Step 1: Get Your **Playgama widget ID** (e.g. `WA0000000000000`):

* Log in to your [Playgama account](https://widgets.playgama.com/account/login).
* If you haven’t created a widget yet, do that from your dashboard.
* Once it’s ready, open the **embed code** — your `widget_id` is included there.
* If the widget already exists, just open its page and click the **\</> icon** to find the embed code.

***

#### Step 2: Open Your Project in Framer

1. Go to <https://framer.com>
2. Create a new project or open an existing one

***

#### Step 3: Add a Code Component

1. In the left sidebar, click **Code**
2. Click **+ Add Code File**
3. Name it `PlaygamaWidget.tsx` (or `.jsx`)
4. Paste the following code:

```tsx
import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

const scriptId = "playgama-widget-script"
const elementId = "widget-playgama"
const widgetId = "ADD_YOUR_WIDGET_ID_HERE" // Replace with your actual widget ID

export default function Widget(props) {
   React.useEffect(() => {
       if (!document.getElementById(scriptId)) {
           const script = document.createElement("script")
           script.id = scriptId
           script.src = "https://widgets.playgama.com/index.js"
           script.async = true
           document.head.appendChild(script)
       }

       window.playgama_widgets = window.playgama_widgets || { clbs: [] }
       window.playgama_widgets.clbs.push(() => {
           window.playgama_widgets.defineWidget({
               widget_id: widgetId,
               element_id: elementId,
           })
           window.playgama_widgets.showWidget(elementId)
       })

       return () => {
           window?.playgama_widgets?.destroyWidget?.(elementId)
           const sdk = document.getElementById(scriptId)
           if (sdk) sdk.remove()
       }
   }, [])

   return (
       <div id={elementId} style={{ width: "100%", height: "100%" }}>
           <div
               style={{
                   opacity: 0.2,
                   fontFamily: "sans-serif",
                   fontSize: "10px",
               }}
           >
               Powered by{" "}
               <a
                   href="https://playgama.com/"
                   target="_blank"
                   rel="noopener"
               >
                   Playgama
               </a>
           </div>
       </div>
   )
}

addPropertyControls(Widget, {})

```

**🚨 Make sure to insert your actual `widget_id` from the embed code.**

***

#### Step 4: Add the Games Widget to Your Canvas

1. Go back to the **design view (Canvas)**
2. Look for the newly created component named `Widget` in the **Insert menu**
3. Drag it onto the canvas
4. Resize it to your desired dimensions (e.g. **510×180**) — this controls the size of the game

***

#### Step 5: Preview and Publish

1. Click **Preview** to test the widget
2. The game will load dynamically via Playgama’s script
3. Once published, your users will be able to play the game directly on your Framer site

***

### Tips for Developers

* To make the widget fully responsive, wrap it inside a Frame or set its size dynamically using viewport units (`vw`, `vh`) or auto-scaling logic.
* The recommended size for the standard version with 3 games is **510×180 pixels** — this helps maintain a neat and well-proportioned appearance on both desktop and mobile screens.
* Keep in mind: the **maximum game height is 320 pixels**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.playgama.com/playgama/for-partners/embed-the-widget/adding-games-widget-to-your-framer-site.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.