@revolugo/elements-next

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',
  )

  // Revolugo Elements configuration
  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:

// Define your callback in RevolugoElements.ready() so it will be called when the library is initialized.
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