Skip to main content

Fluid Virtual Integration for Sweepstakes

The Fluid Virtual, same as the standard Fluid Widget, is implemented as a web component integrated into the host page DOM. It is tailored for sweepstakes gameplay: users purchase virtual currency packs and redeem their winnings. By design, the Fluid widget script should get injected into the host site upon user authentication, followed by injecting the <fluid-virtual> web component into the DOM, providing required init attributes.

Automatic Init​

Init Params- operator id- user id- session id- locale- country code- currency code- virtual currencies- packs- (user data)Reactive Params- session id- transaction type- lock transaction type- open- balance- packs- user data- turned over percentage- success cta link- transaction attributeslogin => inject => initHost sitewidget

The <fluid-virtual> custom element expects several attributes required for initialisation (see the Attributes reference). If the required initialisation parameters are provided at injection, the widget will automatically initialise and be ready for use. This initialisation should occur once per user session, immediately after user authentication. A notification will indicate that the widget is ready for opening - it should not be allowed to open before this notification is emitted.

Once the session ends, the widget should be removed from the DOM to ensure proper shutdown. See Session handling for the full session lifecycle rules.

Attributes​

The full attribute reference lives on the Attributes page. Initial mandatory attributes for Automatic Init are: operator-id, session-id, user-id, locale, country, and currency.

Beyond the shared attributes, the Sweepstakes widget adds:

  • virtual-currencies - the virtual currencies held by the user, of type VirtualCurrencies, stringified as JSON. See Virtual currencies and balance.
  • packs - the packs available for purchase, of type PackSet, stringified as JSON. See Packs Data Object.
  • balance - the current user balances, of type VirtualBalance, stringified as JSON (unlike the main widget, where it is a plain number). See Virtual currencies and balance.

The values of the transaction attribute for the purchase and redeem flows are listed in the Attributes reference.

Contract version. The virtual-currencies, balance, and packs payloads are versioned. Set version: 2 to use the multi-currency shape. Payloads without a version field are still accepted, so existing integrations keep working. New integrations should send version: 2. See Backwards compatibility.

Notifications​

The widget reports its state and user actions through fluid-info, fluid-error and fluid-command DOM events. The full catalogue, including which messages the Sweepstakes widget emits, lives on the Events and errors page.

Example code​

The following is an example of what's to be injected to your website DOM upon user login for Automatic Init:

<script src="https://get.fluidpayments.io/index.js"></script>
<fluid-virtual
    operator-id="<your operator ID>"
    session-id="<authenticated user session ID>"
    user-id="<authenticated user ID>"
    user-data="<authenticated user details>"
    locale="<locale tag>"
    country="<authenticated user country>"
    currency="<user FIAT currency code>"
    lock-transaction-type="<false / true>"
    open="<false / true>"
    balance="<user current balances>"
    packs="<packs data>"
    success-cta-link="<link to URL/Path following successful transaction>"
    z-index="<z-index value>"
    transaction-attributes="<stringified json object of key-value pairs for payment provider>"
    virtual-currencies="<virtual currency data>"
>
</fluid-virtual>

It should stay present in the DOM for the time of user session.

The packs, virtual currency and user data object shapes, including versioning and backwards compatibility, are documented on the Data objects page.