▪️Widgets

A Widget is a drop-in gamification block you build in Vibe Studio and embed anywhere on your existing website - a leaderboard in the lobby sidebar, a missions strip across the top of the sports page, a badge wall on the account screen. You design the look; the live data flows in from Smartico.

When to use a widget

Use a widget when you want gamification inside your existing product, rather than on a separate page. Widgets run for logged-in players, so they show each player's own missions, balances, level, and rewards out of the box.

What you can put in a widget

Almost any Smartico mechanic: Missions, Levels, Tournaments, Leaderboards, Store, Avatars, Badges, Activity Log, Inbox, Raffles, Jackpots, Clans, or several blended into one surface. Vibe Studio builds the presentation; for how each mechanic itself works, see its own Help Center article.

How a widget reaches the player

A widget is a small JavaScript bundle hosted by Smartico (on the widgets domain). You don't link to it; you embed it. The host page mounts it into a <div>, 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:

• The <div> 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 <div> 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 <div> 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.