...
Rubiq Web Components are authenticated using Rubiq API Public authentication, and therefore require a PublicID. Contact a Fluid Account Manager for assistance with creating a PublicID, which can be created via the RubiqCloud Cloud Control app.
The PublicID is expected to be included in the page has an HTML META tag with name rsrbq-api-public-id, in the HTML HEAD section:
| Code Block | ||
|---|---|---|
| ||
<meta name="rsrbq-api-public-id" content="17293429-b6f4-4225-9d4a-523385141284"> |
The components know where the Rubiq API is, but if the components should run against a different API location, for example the test API, this is also configured using a META tag, named rsrbq-api-url:
| Code Block | ||
|---|---|---|
| ||
<!-- Remove in production: --> <meta name="rsrbq-api-url" content="https://testapiapi.test.dialogportalrubiq.com/v1net"> |
Adding components to a page
Web Components are added to HTML as custom elements which look like regular HTML tags, e.g.:
| Code Block |
|---|
<rs<rbq-lottery-countdown>Loading...</rsrbq-lottery-countdown> |
Any text or HTML inside the tags is rendered as usual, until the component custom elements have been defined, at which point their content is replaced with the correct web component body.
...
| Code Block | ||
|---|---|---|
| ||
<body>
<!-- Page body, including Rubiq Web Components, go here -->
<rs<rbq-lottery-countdown loading-message="Please wait...">
Please wait...
</rsrbq-lottery-countdown>
<!-- Load/activate Web Components -->
<script defer src="https://apisdk.dialogportalrubiq.comnet/components/lottery.js"></script>
</body> |
Web Components
The web components are unstyled or minimally styled, so they can easily be integrated into a website style. HTML Elements contained in the component bodies are give class names prefixed with rsrbq-, e.g. class="rsrbq-autocomplete-items", unless they are extremely generic, e.g. highlighted.
...
Input set on element directly in HTML:
| Code Block | ||
|---|---|---|
| ||
<rs<rbq-lottery-countdown loading-message="henter aktiv lotteriet..."></rsrbq-lottery-countdown> |
Input set on element dynamically using JavaScript:
| Code Block |
|---|
function reserve(packageSize) {
var cmpNumbers = document.querySelector('rsrbq-lottery-package-numbers');
cmpNumbers.setAttribute('package-size', packageSize);
} |
...
| Code Block |
|---|
function onLottery(lotteryEvent) {
console.log(lotteryEvent.detail.name);
}
var cmpCountdown = document.querySelector('rsrbq-lottery-countdown');
cmpCountdown.addEventListener('lottery', onLottery); |
...
lottery: All Lottery web components except <rs<rbq-lottery-purchase-failure> have a lottery event, which contains an object describing the active Lottery, or (in the case of <rs<rbq-lottery-purchase-success>) the Lottery that has just been purchased. The event contains these properties:
...
noActiveLottery: This event is emitted when no active Lottery is available.
...
<rbq-lottery-countdown>
Fetches the currently active Lottery and displays a self-updating countdown:
...
loading-message: The message displayed while the active Lottery is being fetched from the API
...
<rbq-lottery-countdown-upcoming>
Fetches the next Lottery to start (the next future lottery which has not yet begun) and displays a self-updating countdown to the lottery’s start date:
...
When there is no upcoming Lottery available, a custom message can be displayed (in addition to the noUpcomingLottery event being raised). Use an HTML element with the upcomingNone attribute, like this:
| Code Block | ||
|---|---|---|
| ||
<rs<rbq-lottery-countdown-upcoming loading-message="søger efter kommende lotterier..."> <div upcomingNone class="rsrbq-lottery-countdown-upcoming-none" style="display:none;"> Lotteriet er afsluttet. Et nyt lotteri starter snart. <a href="https://lotteries.com/check-winners/">Se om du har vundet her</a> </div> </rsrbq-lottery-countdown-upcoming> |
...
noUpcomingLottery: Similar to the standard noActiveLottery event
...
<rbq-lottery-quickdraw>
Fetches the currently active Lottery and if the quickdraw deadline has not passed, displays a message, e.g.:
“Hvis du spiller med inden d. 23/5 deltager du også i Hurtigtrækning om en ekstrapræmie på 1000”
...
<rbq-lottery-package-numbers>
Requests a “package” of Lottery numbers and displays them. This component also has a button used to refresh the numbers.
...
| Code Block | ||
|---|---|---|
| ||
var cmpNumbers = document.querySelector('rsrbq-lottery-package-numbers');
console.log("ReservationID: " + cmpNumbers.reservation.id); |
...
numbersReceived: Emitted when a batch of numbers is available
...
<rbq-lottery-purchase-details>
Presents a form for users to enter their details, in order to complete the purchase. Some of the inputs for this component are required; if any of reservationID, successUrl or failureUrl are missing, an error message will be displayed instead of the form.
...
reservationID: The ID of the reserved package that is being purchased. This should be retrieved from the <rs<rbq-lottery-package-numbers> component.
successUrl: The URL that the user should be redirected to after a successful purchase (should contain an <rs<rbq-lottery-purchase-success> component).
failureUrl: The URL that the user should be redirected to after they cancel a purchase (should contain an <rs<rbq-lottery-purchase-failure> component).
...
statusChanges: Emitted when the form validation state changes.
...
<rbq-lottery-purchase-success>
To be used in a “success” page, the result of a purchase callback. The component reads the purchase order ID from the URL and completes the purchase. It also outputs the lottery and reservation details in events, allowing the details to be displayed.
...
size: Number of tickets purchasedprice: Amount paid
...
<rbq-lottery-purchase-failure>
To be used in a “failure” page, the result of an unsuccessful purchase callback. The component reads the purchase order ID from the URL and cancels the purchase.
...