Revolugo Elements
Revolugo Elements UI library
How to use
Initialization
Include the Revolugo Elements tag in the head
section of your page and edit the config to suit your needs.
N.B: The configuration options are explained below.
<script>
;(function (r, e, v, o, l, u, g) {
r[l] = r[l] || {
ready: function (y) {
r[l]._ready = y
},
}
;(u = e.createElement(v)), (g = e.getElementsByTagName(v)[0])
u.src = o + '?' + new Date().getTime()
g.parentNode.insertBefore(u, g)
})(
window,
document,
'script',
'https://cdn.jsdelivr.net/npm/@revolugo/elements',
'RevolugoElements',
)
RevolugoElements.config = {
apiEnvironment: 'LIVE',
apiKey: 'my-api-key',
locale: 'fr-FR',
theme: { primary: '#007fff' },
}
</script>
Using components
To use a Revolugo web component, include the corresponding tag in the body
section of your page, and provide parameters in the tag attributes.
For example:
<revolugo-hotel-search
check-in-date="2023-10-10"
check-out-date="2023-10-11"
latitude="48.85826"
longitude="2.29452"
/>
Subscribing to events
Events will be published on an event bus by the Revolugo Elements library. Subscribing to them is easy:
RevolugoElements.ready(function () {
RevolugoElements.eventBus.$on('hotel-offers:retrieved', function (payload) {
console.log(payload)
})
})
Configuration options
Name | Type | Requirement | Default | Description |
---|
apiEnvironment | string | Optional | LOCAL | The Revolugo environment to use. Must be one of these: LIVE , SANDBOX , STAGING , LOCAL |
apiKey | string | Mandatory | | Your Revolugo API Key |
locale | string | Optional | en-US | The language used in components. Must be en-US or fr-FR |
theme | object | Optional | { primary: '#007fff', secondary: '#64B5F6', success: '#4CAF50' } | Color theme for the components. All keys are optional |