`, and the widget reads the logged-in player, the label/brand keys from the **Smartico SDK that is already running on that page**. That is the one prerequisite: the page you embed on must already initialize the Smartico SDK (the standard `_smartico.init(...)` integration your site uses for popups, missions, etc.). Because the Smartico SDK already knows the player and the label, a widget needs **no per-player parameters** - identity comes from the host page. ### Publishing and embedding (step by step) * **Publish.** In the Studio toolbar, click **Publish**. This builds the widget and pushes it live to the CDN.

* **Get Code opens automatically.** After a successful publish, the **Get Code** pop-up opens with your embed snippet. (You can also open it any time from the toolbar button to the right of Publish.)

* **Set the layout first (optional).** Open **Widget Layout** (the button next to Get Code) to choose: * **Container size** - self-expanding, or a fixed width/height in pixels. * **Fit** - `content` (the widget sizes to its own content) or `fill` (It fills the container you give it.

* **Copy the snippet.** It looks like this: ```html

``` * The `

` is the placeholder where the widget mounts; its `style` carries your container size (fixed width gives `width:Npx`, otherwise `width:100%`; a fixed height adds `height:Npx;overflow:auto`). * `_smartico.gamificationBlock({ ... })` mounts the widget. `dom_id` matches the placeholder, `url` points to your published widget bundle, and `fit` is your Widget Layout choice. > **Tip:** Re-publish whenever you make changes - the embed `url` stays the same, so you don't have to touch your site again; the new version propagates from the CDN. ### If your widget is about one specific thing Some widget templates are built around a single entity (one specific tournament, raffle, mini-game, or matchx/quiz template).

Those declare an **extra field** - a picker in the toolbar where you choose which entity to show. Your choice is baked into the embed `url` as a query parameter, so the published widget shows the right one.

### Check it before you embed Run **`/verify`** in the chat for a general review, then **`/widget-check`** - it audits the widget for anything that could escape its box or affect the host page's styles, and can fix it (`/widget-check fix all, don't ask`). This matters because a widget runs inside someone else's page.

### Examples to ask the assistant for * "A weekly leaderboard, top 10, with the current player's row highlighted and a countdown to reset." * "A missions strip showing the three missions closest to completion, with progress bars." * "A badge showcase grid for the player's account page." ### FAQ **The widget shows nothing on my site.** The host page must already run the Smartico tracker (`_smartico.init`). Paste the snippet after that init, and make sure the `dom_id` in the snippet matches the `

` id. Inside the Studio, an empty preview just means you haven't picked a **Preview as user** yet. **Where is the widget hosted?** On the Smartico widgets domain; the published bundle is the `url` in your snippet. Your page stays in control of where it sits and how big it is (via the `

` style / Widget Layout). **Will it break my site's styling?** No - a widget is isolated from the host page. And AI is instructed explicitly to keep styles isolated. Still, run `/widget-check` before embedding to catch anything that could leak to the main page. **How do I make it match my brand?** Set your label's brand guide once, and the assistant follows it on every build - see Set up your brand guide. You can also attach a screenshot or a Figma frame. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://help.smartico.ai/welcome/products/vibe-studio-beta/widgets.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.