Applies to version 5.14.1

elina Smart widget

How to use it

The elina smart widget can be implemented and customised by the customer or the agency managing the customer website.

  1. Upload the following files on your site:
    elina-smart-element.zip

  2. Write the following markup, making sure that:

{link to elina-smart-element.css} : absolute path of the file;

{link to elina-smart-element.js} : absolute path of the file;

{booking engine url} : absolute url of the booking engine;

so, for instance:

<link rel="stylesheet" href="https://www.yourwebsite.com/css/elina-smart-element.css">
  <script>
    var elinaGlobalConst = {
      elinaBEurl: "https://yourwebsite-bookings.elinapms.com/elina/",
      elinaServicesUrl: "https://yourwebsite-services.elinapms.com/",
    }
  </script>
  <div id="elina-smart-element"></div> 
  <script src="https://www.yourwebsite.com/js/elina-smart-element.js"></script>

This should be enough to display a generic element. See customisations options below.

 

Customisation options

The settings below need to be implemented as properties of var elinaGlobalConst object.
Only elinaBEurl is required on var elinaGlobalConst.


Datepicker options

Most of the options are the direct transpositions of the ones that can be found here: Airbnb React Date Picker - Github .
Please check there if the meaning of them is not clear.

Name

Type

Description

elinaBEurl

string (default: "https://currentdev-bookings.elinapms.com/elina/")

It’s the main URL of elina booking engine.

elinaServicesUrl

string (default: "https://currentdev-services.elinapms.com/")

It’s the URL of elina services. This is important to have for fetching elina areas and elina person classifications.

isProd

bool (default: true)

use false if you receive a CORS error when checking for availability of a single property. This usually happens when you work locally.

startDate

moment object (default: null)

if the date picker should display already a start date

endDate

moment object (default: null)

if the date picker should display already an end date

focusedInput

PropTypes.oneOf([START_DATE, END_DATE]) or null

 

displayFormat

string (default: “DD/MM/YYYY“)

 

culture

string (default: “en-GB“)

 

isRTL

bool (default: false)

 

renderMonthText

string (default: null)

 

renderDayContents

string (default: null)

 

unavailableDays

array<string> (default: null)

 

minimumNights

int (default: null)

 

minDate

moment object (default: null)

if timezone is a concern, today’s date can be passed here with locale of the elina system.

maxDate

moment object (default: null)

 

orientation

string (default: “horizontal“)

displays the calendar in portrait or landscape mode

>br/>

Dictionary options

Name

Default (all strings)

Description

datepickerText

“Choose your dates“

 

startDatePlaceholderText

“Start date“

 

endDatePlaceholderText

“End date“

 

submitButtonText

“Submit“

 

guestText

“Guests“

 

promoCodeText

“Promo code“

 

zoneText

“Area“

 

propertyTypeText

“Type“

 

loadingPanelText

“Loading…“

 

dropdownAll

"- All -"

First dropdown item on Areas selection

bookNowFor

"Book now from £{0}"

It will display on the submit button after a price has been fetched for the specified availability (requires: fetchAndDisplayElinaPrice true)

elina Customisation stuff

The following code snippet shows parameters that can be added to the widget code to customise its functionality.

elinaDateFormat: "MM/DD/YYYY",
  maxCapacity: 10,
  defaultGuestNumber: 2,
  promoCodeVisible: true,
  zone: null,
  propertyType: null,
  fetchElinaAvailability: true,
  fetchElinaZones: true,
  fetchElinaPersonClassification: true
  fetchAndDisplayElinaPrice: false
  isSmartBe: true
  displayPersonClassificationAsGroup: false

Parameter

Type

Description

elinaDateFormat

Date

The date format arrival and departure dates are being displayed

maxCapacity

integer

maximum number of guests to select in the drop down

defaultGuestNumber

integer

default number of guest

promoCodeVisible

boolean

to display the promo code option set to “True”

zone

integer (default value is NULL)

area id - to be used for mapping when widget is used on property landing page

propertyType

integer (default value is NULL)

property type id - to be used for mapping when widget is used on property landing page

fetchElinaAvailability

boolean

will show real time availability on the calendar for a specific zone and type combination. This only works when using the zone and type mapping for property landing pages

fetchElinaZones

boolean

creates a drop down list of areas from the elina system

fetchElinaPersonClassification

boolean

adds the option to select number of different guest types, e.g. adults, children etc.

fetchAndDisplayElinaPrice

boolean (default: false)

this will display the price from elina of the specified accommodation

isSmartBE

boolean (default: true)

if true, it will redirect the users to step 3 of the booking engine. If not, it will go straitght to step 4 (last page before booking confirmation)

displayPersonClassificationAsGroup

boolean (default: false)

requires Bootstrap.min.js to be installed

Layout

The following parameters can be used to customise the code and layout of the widget.

 formOrientation: "horizontal",
  submitButtonCssClass: "btn btn-primary mx-sm-3 mb-2",
  formGroupClass: "form-group mx-sm-3 mb-2",
  formControlClass: "form-control",
  guestPersonClassificationGroupButton: "btn btn-default dropdown-toggle" 
Sign up to receive updates about your elina system