Widget positioning
The placement of the compact widget is a critical decision in user experience (UX) because the user interfaces (UI) of thousands of games, whether they are slot games or live casino games, can vary. The compact widget might obstruct vital parts of the game, such as buttons, especially on mobile devices.
The widget can be placed anywhere in the HTML or positioned on top of the game.
By default, the widget is draggable (isDraggable: true), allowing players to move it so that
it does not obstruct important game elements. Since different games have different layouts, players can reposition the widget as needed.
In its draggable state, the widget uses a fixed position (position: fixed).
To change the initial position, add a CSS style to the container div, such as:
<div id="gamityWidgetRoot" style="position: fixed; z-index: 50; top: 3rem; right: 2rem;"></div>If you want the widget to remain in a static, predefined position, set isDraggable: false. In this case, the widget will show up within its container.
The widget should not be placed inside any DOM element (or its ancestors, such as a site header) that uses position: fixed, as this may prevent the widget from being fully visible in its expanded state.
Widget size
The widget’s size does not directly depend on the host site’s or game layer’s font size,
meaning it does not respect rem. This is because each site or game layer can define its own base font size
(and therefore its own definition of rem), which could result in a disproportionate widget.
To still give the host control over the widget’s size — beyond the meaningful default size the widget already provides — the size can be adjusted
using an explicit font-size in the style attribute of the container <div> (it must be provided in the style attribute). For example:
<div id="gamityWidgetRoot" style="...other styles such as above...; font-size: 20px"></div>