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