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
):
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
Go to https://framer.com
Create a new project or open an existing one
Step 3: Add a Code Component
In the left sidebar, click Code
Click + Add Code File
Name it
PlaygamaWidget.tsx
(or.jsx
)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 Games Widget to Your Canvas
Go back to the design view (Canvas)
Look for the newly created component named
Widget
in the Insert menuDrag it onto the canvas
Resize it to your desired dimensions (e.g. 510×180) — this controls the size of the game
Step 5: Preview and Publish
Click Preview to test the widget
The game will load dynamically via Playgama’s script
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.
Last updated