hoteliga - User contributions [en]

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:58:25Z

Nerdy: /* Introduction */

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

* Bootstrap css

* jQuery

* Custombox css

* Custombox js and

* Custombox legacy js

1) Bootstrap and 2) jQuery are usually implemented inside websites, so only the Custombox needs to be included.

Implementations steps

1. Download this [[File:file]], and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.

3. backgroundColor – Set background color for the popup

4. textColor – Set text color for the message

5. textFontFamily – Set the font family for the message

6. textFontSize – Set font size for the message

7. buttonBackground – Set button background color

8. buttonTextColor – Set button text color

9. domain – Your domain name

10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

== Common questions ==

+ <b>I changed the text, title and image, but the same content appears. Why doesn’t it change?</b>

- Since Hoteliga Popup uses cookies, you can see the changes only 24 hours after the moment cookies were created, but, the new content will appear to new visitors.

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:57:53Z

Nerdy: /* Introduction */

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:57:12Z

Nerdy: /* Implementation */

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use Hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

* Bootstrap css

* jQuery

* Custombox css

* Custombox js and

* Custombox legacy js

1) Bootstrap and 2) jQuery are usually implemented inside websites, so only the Custombox needs to be included.

Implementations steps

1. Download this [[File:file]], and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.

3. backgroundColor – Set background color for the popup

4. textColor – Set text color for the message

5. textFontFamily – Set the font family for the message

6. textFontSize – Set font size for the message

7. buttonBackground – Set button background color

8. buttonTextColor – Set button text color

9. domain – Your domain name

10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

== Common questions ==

+ <b>I changed the text, title and image, but the same content appears. Why doesn’t it change?</b>

- Since Hoteliga Popup uses cookies, you can see the changes only 24 hours after the moment cookies were created, but, the new content will appear to new visitors.

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:56:13Z

Nerdy:

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use Hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

* Bootstrap css

* jQuery

* Custombox css

* Custombox js and

* Custombox legacy js

1) and 2) are usually implemented inside websites, so only the Custombox needs to be included.

Implementations steps

1. Download this [[File:file]], and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.

3. backgroundColor – Set background color for the popup

4. textColor – Set text color for the message

5. textFontFamily – Set the font family for the message

6. textFontSize – Set font size for the message

7. buttonBackground – Set button background color

8. buttonTextColor – Set button text color

9. domain – Your domain name

10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

== Common questions ==

+ <b>I changed the text, title and image, but the same content appears. Why doesn’t it change?</b>

- Since Hoteliga Popup uses cookies, you can see the changes only 24 hours after the moment cookies were created, but, the new content will appear to new visitors.

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:52:40Z

Nerdy: /* Implementation */

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use Hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

* Bootstrap css

* jQuery

* Custombox css

* Custombox js and

* Custombox legacy js

1) and 2) are usually implemented inside websites, so only the Custombox needs to be included.

Implementations steps

1. Download this [[File:file]], and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.

3. backgroundColor – Set background color for the popup

4. textColor – Set text color for the message

5. textFontFamily – Set the font family for the message

6. textFontSize – Set font size for the message

7. buttonBackground – Set button background color

8. buttonTextColor – Set button text color

9. domain – Your domain name

10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:48:38Z

Nerdy: /* Implementation */

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use Hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

* Bootstrap css

* jQuery

* Custombox css

* Custombox js and

* Custombox legacy js

1) and 2) are usually implemented inside websites, so only the Custombox needs to be included.

Implementations steps:

1. Download this file (download link for custombox folder with 3 files, css and js), and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.

3. backgroundColor – Set background color for the popup

4. textColor – Set text color for the message

5. textFontFamily – Set the font family for the message

6. textFontSize – Set font size for the message

7. buttonBackground – Set button background color

8. buttonTextColor – Set button text color

9. domain – Your domain name

10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:48:04Z

Nerdy: /* Customization */

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use Hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

· Bootstrap css

· jQuery

· Custombox css

· Custombox js and

· Custombox legacy js

1) and 2) are usually implemented inside websites, so only the Custombox needs to be included.

Implementations steps:

1. Download this file (download link for custombox folder with 3 files, css and js), and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.

3. backgroundColor – Set background color for the popup

4. textColor – Set text color for the message

5. textFontFamily – Set the font family for the message

6. textFontSize – Set font size for the message

7. buttonBackground – Set button background color

8. buttonTextColor – Set button text color

9. domain – Your domain name

10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:47:05Z

Nerdy: /* Implementation */

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use Hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

· Bootstrap css

· jQuery

· Custombox css

· Custombox js and

· Custombox legacy js

1) and 2) are usually implemented inside websites, so only the Custombox needs to be included.

Implementations steps:

1. Download this file (download link for custombox folder with 3 files, css and js), and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.
3. backgroundColor – Set background color for the popup
4. textColor – Set text color for the message
5. textFontFamily – Set the font family for the message
6. textFontSize – Set font size for the message
7. buttonBackground – Set button background color
8. buttonTextColor – Set button text color
9. domain – Your domain name
10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

How to Integrate a Popup Window in Your Website With an Offer From Your hoteliga Account

2020-09-01T10:46:36Z

Nerdy:

== Introduction ==
If you want to have special offers for specific days, and want to promote them on your website, you can use Hoteliga popup. This popup will be the first thing to open when a user visits your website. It can contain a title, message, image and a button. On button click, it will open the Booking Engine so the user can search for those days.

It has a simple implementation, works on mobile devices, and can be customized to match your website style (see “Customization” section). It also uses browser cookies with an expiration time of 24hours, which makes it easy and fast for the browser to access.

Another feature of the popup is that if language is not specified in the options and your website supports different languages, it will get the browser language and set that language as default for the popup. If your website doesn’t support that language, it falls back to English or your default website language.

== Implementation ==

Hoteliga popup has some dependencies that need to be included in your website:

· Bootstrap css

· jQuery

· Custombox css

· Custombox js and

· Custombox legacy js

1) and 2) are usually implemented inside websites, so only the Custombox needs to be included.
Implementations steps:

1. Download this file (download link for custombox folder with 3 files, css and js), and add it to your website js folder.

2. Include the files in your website, ex:
<pre><link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script></pre>

3. Add this inside your <body> tag:

<pre><div id="modal" style="display: none;"></div></pre>

4. Insert this code inside your Site.js

<pre>var options = {
openEffect: 'fadein',
language: 'en',
textColor: 'red',
backgroundColor: 'white',
textFontFamily: 'Arial',
textFontSize: '12px',
buttonBackground: 'red',
buttonTextColor: 'white',
domain: "domainname",
apiEndpoint: "api"
};
$("#modal").hoteligaModal(options);</pre>

== Customization ==
Hoteliga popup supports 10 optimizations:

1. openEffect – Popup supports multiple transitions that can be applied to your modals to add smooth open and close animations to your page. They are:

a. Fadein
b. Slide
c. Newspaper
d. Fall
e. Sidefall
f. Blur
g. Flip
h. Sign
i. Superscaled
j. Slit
k. Rotate
l. Letmein
m. Makeway
n. Slip
o. Corner
p. Slidetogether
q. Scale
r. Door
s. Push
t. Contentscale
u. Swell
v. Rotatedown
w. Flash

Find demos by clicking [https://dixso.github.io/custombox/#effects here].

2. language – Choose default language for the message and button text inside popup. If this is set, browser language will be ignored.
3. backgroundColor – Set background color for the popup
4. textColor – Set text color for the message
5. textFontFamily – Set the font family for the message
6. textFontSize – Set font size for the message
7. buttonBackground – Set button background color
8. buttonTextColor – Set button text color
9. domain – Your domain name
10. apiEndpoint –

* Options 9 and 10 are required for the popup to work. Meanwhile, if other options like color, background color, font family or font size of the text and button are not set, they will be inherited from your website. And again, if the language option is not set, browser language will be the default language.

How to Customize the Look and Feel of the Booking Engine

2019-09-12T16:02:07Z

Nerdy: /* Details Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' text color
| btn-primary
| <pre>.btn-primary {
color: #000!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of the text
| searchResults
| <pre>#searchResults {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the modify search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the modify search text
| modifySearch
| <pre>#modifySearch {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the room type modal
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the room type modal text
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the terms modal
| termsModal modal-content
| <pre>#termsModal .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the terms modal text
| termsModal modal-content
| <pre>#termsModal .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the text color
| options
| <pre>#options {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the payment box background color
| options well
| <pre>#options well {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|-
| Change the room decription and payment box background color
| details well
| <pre>#details well {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:58:36Z

Nerdy: /* Options Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' text color
| btn-primary
| <pre>.btn-primary {
color: #000!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of the text
| searchResults
| <pre>#searchResults {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the modify search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the modify search text
| modifySearch
| <pre>#modifySearch {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the room type modal
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the room type modal text
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the terms modal
| termsModal modal-content
| <pre>#termsModal .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the terms modal text
| termsModal modal-content
| <pre>#termsModal .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the text color
| options
| <pre>#options {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the payment box background color
| options well
| <pre>#options well {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:55:45Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' text color
| btn-primary
| <pre>.btn-primary {
color: #000!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of the text
| searchResults
| <pre>#searchResults {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the modify search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the modify search text
| modifySearch
| <pre>#modifySearch {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the room type modal
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the room type modal text
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the terms modal
| termsModal modal-content
| <pre>#termsModal .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the terms modal text
| termsModal modal-content
| <pre>#termsModal .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:54:59Z

Nerdy: /* Results Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of the text
| searchResults
| <pre>#searchResults {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the modify search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the modify search text
| modifySearch
| <pre>#modifySearch {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the room type modal
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the room type modal text
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the terms modal
| termsModal modal-content
| <pre>#termsModal .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the terms modal text
| termsModal modal-content
| <pre>#termsModal .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:52:09Z

Nerdy: /* Results Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the modify search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the modify search text
| modifySearch
| <pre>#modifySearch {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the room type modal
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the room type modal text
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the terms modal
| termsModal modal-content
| <pre>#termsModal .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the terms modal text
| termsModal modal-content
| <pre>#termsModal .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:50:51Z

Nerdy: /* Results Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the modify search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the room type modal
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the room type modal text
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the terms modal
| termsModal modal-content
| <pre>#termsModal .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the terms modal text
| termsModal modal-content
| <pre>#termsModal .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:49:18Z

Nerdy: /* Results Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the modify search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the room type modal
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the room type modal text
| roomTypeModalLabel modal-content
| <pre>#roomTypeModalLabel .modal-content {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:43:53Z

Nerdy:

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the Modify Search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {
display: none;
}

#options .show-more-txt {
display: block;
}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:43:00Z

Nerdy: /* Results Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|-
| Change the background color of the Modify Search box
| modifySearch
| <pre>#modifySearch {
background-color: #000;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:40:14Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
| <pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:39:54Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the slideshow arrows
| slick-prev slick-next
<pre>.slick-prev:before, .slick-next:before {
color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:36:49Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {
background-color: #ffccc!important;
border-color: #ffccc!important;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {
background-color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:36:23Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box and alert error box
| alert-info
|<pre>.alert-info, .alert-danger {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box and alert error box text
| alert-info
|<pre>.alert-info, .alert-danger {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:34:36Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box
| alert-info
|<pre>.alert-info {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the info box text
| alert-info
|<pre>.alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:33:51Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box
| alert-info
|<pre>.alert-info {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:33:36Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of the info box
| alert-info
|<pre>#options .alert-info {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T15:33:17Z

Nerdy: /* Options Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T10:10:12Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set buttons' color
| btn-primary
| <pre>.btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the background color of the info box
| alert-info
|<pre>#options .alert-info {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T10:01:11Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change buttons' color
| btn-primary
| <pre>.btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the background color of the info box
| alert-info
|<pre>#options .alert-info {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T10:00:26Z

Nerdy: /* Options Page */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the background color of the info box
| alert-info
|<pre>#options .alert-info {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T09:59:06Z

Nerdy: /* General Elements */

== Introduction ==
The changes of the look and feel of the booking engine can be done via the [https://developer.mozilla.org/en-US/docs/Web/CSS CSS] language. A person with basic web development skills can easily follow these instructions.

The final CSS layout can be set in the Booking Engine => Appearance area where the CSS field is located.

== General Elements ==
Elements used in this section style all pages.

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Set the default background color of body
| body
|<pre>body {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Set the default background color of header
| header
| <pre>#header {
background:#fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the background color of language and currency dropdown
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
background-color: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of language and currency dropdown text
| header dropdown-toggle dropdown-menu
| <pre>#header .dropdown-toggle, #header .dropdown-menu {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenities and navigation buttons
| highlighted
| <pre>.highlighted {
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Search Page ==
Page ID:

<pre>#search</pre>

{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#search .visa-card-icon {
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#search .payment-method-icons {
display: none;
} </pre>
|
|-
| Add background color
| search
| <pre>search {
background: #000;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Add background image
| search
| <pre>search {
background: url("") no-repeat center center fixed;
-webkit-background-size: cover;
-background-size: cover;
-background-size: cover;
-size: cover;
}</pre>
| Inside parentheses ("") put the url of the image
|-
| Hide background image
| search
| <pre>#search {
background: none;
}</pre>
|
|-
| Change color of main text
| search h2
| <pre>#search h2{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of search form text
| search searchForm
| <pre>#search #searchForm{
color: #ffccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change color of main box
| search well
| <pre>#search well{
color: rgba(245, 245, 245, 1);
}</pre>
| Change the last digit between 0.1 - 1 for opacity.
|-
| Change calendar background color
| daterangepicker

calendar-table
| <pre>#search .daterangepicker, .calendar-table, .daterangepicker:after{
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change calendar selected dates color
| daterangepicker td.active

calendar-table
| <pre>#search .daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #ffcccc;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Results Page ==
Page ID:

<pre>#searchResults</pre>
{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Replace content with a “Terms” button
| terms-conditions-content

terms-conditions-btn
| <pre>#searchResults .terms-conditions-content{
display: none;
}

#searchResults .terms-conditions-btn{
display: block;
}</pre>
|
|}

== Options Page ==
Page ID:

<pre>#options</pre>

{| class="wikitable"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Display Children Policy content on demand using a button
| children-policy-txt

show-more-txt
|<pre>#options .children-policy-txt {

display: none;

}

#options .show-more-txt {

display: block;

}</pre>
|
|-
| Change the background color of the info box
| alert-info
|<pre>#options .alert-info {

background-color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of the text inside info box
| alert-info
|<pre>#options .alert-info {

color: #fff;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of amenity
| highlighted
| <pre>#options .highlighted {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change the color of navigation icons
| highlighted
| <pre>#options .fa-circle {

color: #ffccc;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|-
| Change buttons' color
| btn-primary
| <pre>#optios .btn-primary {

background-color: #ffccc!important;
border-color: #ffccc!important;

}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== Details Page ==
Page ID:

<pre>#details</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Hide specific Card icons
| visa-card-icon

master-card-icon

amex-card-icon

diners-card-icon

discover-card-icon

master-pass-card-icon

alpha-bank-icon

paypal-card-icon

maestro-card-icon
| <pre>#details .visa-card-icon{
display: none;
}</pre>
|
|-
| Hide all card icons
| payment-method-icons
|<pre>#deatils .payment-method-icons{
display: none;
} </pre>
|
|-
| Hide specific payment method description
|
cash

paypal

bank-deposit

bank-full-amount

two-checkout

cash-checkin

eurobank

veritrans

alpha-bank

cash-credit-card

redsys

paypal-pre

bank-deposit-checkin

fideli-pay

cash-credit-card-vault

alpha-bank-master-pass

moneris

sampath

cash-credit-card-checkin-vault

asia-pay
| <pre>#details .cash{
display: none;
}</pre>
|
|-
| Hide all payment method descriptions
| payment-method-descriptions
| <pre>#details .payment-method-descriptions{
display: none;
}</pre>
|
|}

== Manage My Reservation Page ==
Page ID:

<pre>#desc</pre>
{| class="wikitable" style="text-align: left;"
! Area / Elements
! Class names
! Implementation
! Comments
|-
| Change the color of amenity icons
(find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].)
| highlighted
| <pre>#desc .highlighted{
color: #fff;
}</pre>
| Find hex codes [https://www.quackit.com/css/css_color_codes.cfm here].
|}

== About the Property page ==

== Credit Card Page ==

How to Customize the Look and Feel of the Booking Engine

2019-09-12T09:52:51Z

Nerdy: /* General Elements */

How to Customize the Look and Feel of the Booking Engine

2019-09-12T09:45:38Z

Nerdy: /* Search Page */

How to Customize the Look and Feel of the Booking Engine

2019-09-12T09:43:08Z

Nerdy: /* Search Page */

How to Add the Booking Engine Search Widget in Your Website

2019-09-12T09:13:34Z

Nerdy:

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

Suppose you want to prioritize ID 2.

[[File:Roomtype_by_ID.png|1000px]]

After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

Second, place the following code in your CSS file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 10; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});

});
</pre>

'''Find the example [https://jsfiddle.net/hoteliga/ux5m6bx2/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/okcvmsL1// here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'fitur'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&av={6}'.format(domain, df, myf, dt, myt, promocode, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/gv6wdnuj/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T11:19:30Z

Nerdy: /* Redirecting to the general search form with priority display of room type */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

Suppose you want to prioritize ID 2.

[[File:Roomtype_by_ID.png|1000px]]

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 10; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});

});
</pre>

'''Find the example [https://jsfiddle.net/hoteliga/ux5m6bx2/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/okcvmsL1// here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'fitur'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&av={6}'.format(domain, df, myf, dt, myt, promocode, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/gv6wdnuj/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T11:17:31Z

Nerdy: /* Redirecting to the general search form with priority display of room type */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 10; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});

});
</pre>

'''Find the example [https://jsfiddle.net/hoteliga/ux5m6bx2/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/okcvmsL1// here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'fitur'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&av={6}'.format(domain, df, myf, dt, myt, promocode, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/gv6wdnuj/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T11:14:52Z

Nerdy: /* Showing only available properties */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 10; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});

});
</pre>

'''Find the example [https://jsfiddle.net/hoteliga/ux5m6bx2/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/okcvmsL1// here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'fitur'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&av={6}'.format(domain, df, myf, dt, myt, promocode, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/gv6wdnuj/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T11:13:07Z

Nerdy: /* Adding a search form with priority display of room type */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 10; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});

});
</pre>

'''Find the example [https://jsfiddle.net/hoteliga/ux5m6bx2/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/okcvmsL1// here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'fitur'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&av={6}'.format(domain, df, myf, dt, myt, promocode, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/kwvhp0d9/1/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:49:43Z

Nerdy: /* Adding a search form */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 10; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});

});
</pre>

'''Find the example [https://jsfiddle.net/hoteliga/ux5m6bx2/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/kwvhp0d9/ here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'fitur'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&av={6}'.format(domain, df, myf, dt, myt, promocode, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/kwvhp0d9/1/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:43:53Z

Nerdy: /* Showing only available properties */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

'''Find the example [https://jsfiddle.net/g5rfyvem/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/kwvhp0d9/ here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'fitur'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&av={6}'.format(domain, df, myf, dt, myt, promocode, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/kwvhp0d9/1/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:39:55Z

Nerdy: /* Showing only available properties */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

'''Find the example [https://jsfiddle.net/g5rfyvem/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/kwvhp0d9/ here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:38:26Z

Nerdy: /* Adding a search form with priority display of room type */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

'''Find the example [https://jsfiddle.net/g5rfyvem/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/kwvhp0d9/ here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:34:44Z

Nerdy: /* Adding a search form */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

'''Find the example [https://jsfiddle.net/g5rfyvem/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:30:04Z

Nerdy: /* Showing only available properties */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

'''Find the example [https://jsfiddle.net/7ysu6n1x/1/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:29:17Z

Nerdy: /* Adding a search form with priority display of room type */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

'''Find the example [https://jsfiddle.net/7ysu6n1x/1/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:28:40Z

Nerdy: /* Adding a search form */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

'''Find the example [https://jsfiddle.net/7ysu6n1x/1/ here].'''

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:28:25Z

Nerdy: /* Redirecting to the general search form with priority display of room type */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/7ysu6n1x/ here].'''

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

Find the example [https://jsfiddle.net/7ysu6n1x/1/ here].

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:28:08Z

Nerdy: /* Redirecting to the general search form */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

'''Find this example [https://jsfiddle.net/yeq06tax/1/ here].'''

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

Find this example [https://jsfiddle.net/7ysu6n1x/ here].

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

Find the example [https://jsfiddle.net/7ysu6n1x/1/ here].

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:26:02Z

Nerdy: /* Adding a search form */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

Find this example [https://jsfiddle.net/yeq06tax/1/ here].

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

Find this example [https://jsfiddle.net/7ysu6n1x/ here].

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

Find the example [https://jsfiddle.net/7ysu6n1x/1/ here].

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>

How to Add the Booking Engine Search Widget in Your Website

2019-09-09T09:19:01Z

Nerdy: /* Redirecting to the general search form with priority display of room type */

==Introduction==
Having the hoteliga booking engine is an important step ahead in order to receive direct reservations to your property.

However, without letting your website users know of the existence of it, won't help them check availability and proceed with bookings.

Hoteliga team provides the tools to your web developer to integrate a link or a widget into your existing website.

== Redirecting to the general search form ==

A way to do achieve this, is to add a button that links your existing website to the Booking engine.

- First, add this link to your HTML file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre><a href="https://book.hoteliga.com/demohoteliga" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

- Then, add the styling in the Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

Find this example [https://jsfiddle.net/yeq06tax/1/ here].

== Redirecting to the general search form with priority display of room type ==
This can be achieved using '''rtid''' on home page. '''Rtid''' refers to the room type ID, that is, the type of apartment you want to prioritize in search results.

- After adding the "book now" button next to each compartment, you put the '''rtid=number''' of the page in the link as follows:

Eg, for prioritizing room type ID 2:

<pre><a href="https://book.hoteliga.com/demohoteliga?rtid=2" class="hoteliga-button">
<span><i class="fa glyphicon fa-chevron-circle-right" style="padding-right:5px;"></i>Book now</span>
</a></pre>

and when the search is completed the user will again see room type ID 2 first.

Always remember to replace the '''demohoteliga''' with your hoteliga domain.

- And add the styling in Css file:

<pre>.hoteliga-button {
padding: 10px;
border: 1px solid #000;
}
.hoteliga-button:active, .hoteliga-button:hover, .hoteliga-button:visited, .hoteliga-button:link {
color: inherit;
text-decoration: none;
}</pre>

Find this example [https://jsfiddle.net/7ysu6n1x/ here].

== Adding a search form ==
A widget, as mentioned before, is a standalone area component that performs a certain function. In this case, this widget contains a search form, so guests can select dates without leaving the website.

When guests select a specific room on the hotel website for specific dates, and clicks "book now", they will be redirected to Booking Engine and continue from this point.

Using this widget searching becomes way faster, since we avoid redirection to Booking engine's home page.

Implementation of the search form widget is separated into 3 parts.

- First, place the following code in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Second, place the following code in your CSS file:

<pre>.hoteligaForm{
border: 1px solid black;
padding: 30px;
width: fit-content;
}
.hoteligaForm,
input,
button {
margin-bottom: 20px;
font-size: 16px;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100%;
text-align: center;
}
#searchBtn {
color: white;
width: 100%;
background-color: blue;
}</pre>

- And third, place the following code in your JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 5; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}'.format(domain, df, myf, dt, myt, promocode)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode);
location.href = url;
});
});
</pre>

== Adding a search form with priority display of room type ==
Rtid refers to the room type ID, that is, the type of apartment you want to prioritize in search results. If you plan to put a separate search widget next to each room type on the accommodation website, then:

Suppose you want to show ID 2 first

[[File:Roomtype_by_ID.png|1000px]]

- Place the room type ID in the search widget on the site next to the compartment you want to search.

[[File:Room_type_ID_form.png|800px]]

Eg, for the room type with ID 2 to be prioritized, set the number in the value attribute.

'''<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />'''

Add this in your HTML file:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="2" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Update the relevant CSS class from "Appearance" on the machine in the correct color, so the selected room type stands out with different background-color.

[[File:Css_background_change_roomTypeId.png]]

Then, in the Css file add the styling:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- Add this code in the JavaScript file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}'.format(domain, df, myf, dt, myt, promocode, rtid)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid);
location.href = url;
});
});</pre>

The result is the first selected partition with the optional color set in CSS.

[[File:Result_roomTypeId.png|1000px]]

== Showing only available properties ==
When you want to show only the available rooms in the search just use available (av) attribute as below:

'''<input type="hidden" id="av" name="roomTypeId" value="1" />'''

- In the HTML file add the search form:

<pre><div class="hoteligaForm">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="hidden" id="roomTypeId" name="roomTypeId" value="6" />
<input type="hidden" id="av" name="roomTypeId" value="1" />
<label for="promocode">promo code</label>
<input type="text" id="promocode" name="promocode" />
<button id="searchBtn">Search</button>
</div></pre>

- Styling of the form achieved by adding this code in your Css file:

<pre>.hoteligaForm,
input,
button {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 100px;
text-align: center;
}
#searchBtn {
color: white;
background-color: blue;
}</pre>

- And finally, adding this code in you JS file, and replace the '''demohoteliga''' with your hoteliga domain:

<pre>var minArrivalOffset = 0; // minimum days ahead that one can book
var minStayDays = 3; // minimum stay in days at hotel
var maxStayDays = 31; // maximum stay in days at hotel
var numberOfMonths = 1; // how many months to display in pop-up calendar
var dateFormat = 'd/m/yy'; // or yy-mm-dd
var domain = 'demohoteliga'; // your hoteliga domain here

// helper function that returns a date in the future based on days offset
function getOffsetDate(dateRel, offset) {
if (dateRel == null) dateRel = new Date();
return new Date(dateRel.getFullYear(), dateRel.getMonth(), dateRel.getDate() + offset);
}

// returns the month and year of a date as hoteliga booking engine requires
function getMonthYearFromDate(inputDate) {
return (inputDate.getMonth() + 1) + '-' + inputDate.getFullYear();
}

// event that fires when the user selects a date in the 'from'
// date picker. Min/max allowed dates in the 'to' datepicker
// are adjusted in this case
function onSelectDatepicker(selectedDate) {
if (this.id == 'from') {
var dateMin = $('#from').datepicker("getDate");
$('#to').datepicker("option", "minDate", getOffsetDate(dateMin, minStayDays));
$('#to').datepicker("option", "maxDate", getOffsetDate(dateMin, maxStayDays));
}
}

// this creates string formatting functionality
// used by getHoteligaResultsUrl()
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}

// generates the hoteliga results page where the user will
// be redirected when the 'search' button is clicked
function getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av) {
return 'https://book.hoteliga.com/{0}/search/results?df={1}&myf={2}&dt={3}&myt={4}&promo={5}&rtid={6}&av={7}'.format(domain, df, myf, dt, myt, promocode, rtid, av)
}

// code running on page load
$(function() {

// initialize the two datepickers
$("#from, #to").datepicker({
dateFormat: dateFormat,
defaultDate: getOffsetDate(null, minArrivalOffset),
minDate: getOffsetDate(null, minArrivalOffset),
changeMonth: true,
numberOfMonths: numberOfMonths,
onSelect: onSelectDatepicker
});

// show initial values (from-to) on textboxes
$("#from").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset));
$("#to").datepicker().datepicker("setDate", getOffsetDate(null, minArrivalOffset + minStayDays));

// redirect to results page on click of 'search' button
$("#searchBtn").bind("click", function() {
var df = $("#from").datepicker("getDate").getDate();
var dt = $("#to").datepicker("getDate").getDate();
var myf = getMonthYearFromDate($("#from").datepicker("getDate"));
var myt = getMonthYearFromDate($("#to").datepicker("getDate"));
var promocode = $("#promocode").val();
var rtid = $("#roomTypeId").val();
var av = $("#av").val();
var url = getHoteligaResultsUrl(domain, df, myf, dt, myt, promocode, rtid, av);
location.href = url;
});
});</pre>