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 |