Adding Widget to Your Framer Site

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

Looking to integrate a playable Playgama HTML5 game 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.

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

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