hoteliga - User contributions [en]

SES.Hospedajes

2024-11-28T14:23:53Z

Milka: /* Enable SES Hospedajes Web Service */

== '''Setting up automatic Spanish police upload (SES.Hospedajes)''' ==

As with the new law changes of obligatory data sending to the Spanish police hoteliga has made the needed changes accordingly, so the customers will be able to accomplish this.
In order to be able to use the automatic upload of the data sending to the Spanish police, customers will need to set up some settings and add credentials.

== Enable SES Hospedajes Web Service ==

In order to connect hoteliga to your SES.Hospedajes platform you need to enable the "web service" option for your account.

To enable the web services

1. Visit the SES Hospedajes page.

If it's the first time you create an account for SES Hospedajes, you will have to complete the account creation setup in the same [https://sede.mir.gob.es/opencms/export/sites/default/es/procedimientos-y-servicios/hospedajes-y-alquiler-de-vehiculos/ SES.Hospedajes].

2. In the table look for "Acceso al registro de establecimiento y entidades" and click in the "@" button in the "Acceso" column.

[[File:registro de establecimientos y propiedades.png|850px]]

3. Search for the "Mis datos registrados" and click in the button.

[[File:mis datos registrados.png|850px]]

4. Here's you'll see your account data, find the checkbox ad the end of the form for "send communications via web service"

5. Check this box and save the changes.

[[File:click servicio web.png|850px]]

After saving, you will receive and email from "no-reply@hospedajes.mir.es" with the credentials required to connect hoteliga with your SES.Hospedajes account.

[[File:credenciales servicio web.png|850px]]

The information highlighted in yellow it's the data you need to add in hoteliga in order to establish the connection:

"Código de arrendador"

"Código de establecimiento"

"Usuario"

"Contraseña"

'''''Note:''' This user and password generated by the SES Hospedajes system helps to make the connection with hoteliga and it's different from your user and password used for the login in the SES system.''

== Connect your SES account in hoteliga ==

Once you have created your SES Hospedajes account and activated the web service, you are ready to make the connection in Chekin. To connect you account:

First the following setting “Enable automatic data upload to Spanish police (SES.Hospedajes)” found under '''Option => Settings => Reservation Options''', needs to be enabled.

[[File:Enable SES_Hospedajes.png|850px]]

After this under '''Options=> Tools''' customers will be able to see the new sub menu '''“Spanish police”''' where the property data and mappings need to be set.

[[File:Tools_Spanish_Police_SES_Hospedajes.png|850px]]

Under properties the customer needs to add the property and company data.

[[File:New Property.png|850px]]

After that mappings need to be set for each room depending if the rooms are under the same or different property. When clicking one of the room in the mapping grid the following window opens and the customer can select the account that he set before by the dropdown under friendly name. If the customer has one property he/she can select the property and select update all rooms so all rooms will be mapped with this value, otherwise if there are different properties customers can also map rooms separately one by one.

[[File:Spanish Police Mappings - hoteliga.png|850px]]

[[File:ses mapping.png|850px]]

With the steps above the customer has prepared the configuration needed for the upload and the reservation data will be sent to the police on reservation creation.
For the guests data, the customer can see additional data that he needs to add when registering guests under reservation. After adding the guests, customers can click the send data to police button which will send the data to Spanish police and customers will get notification later if there have been any errors with the data sent or if it has been sent successfully.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:26:04Z

Milka: /* If You Already Have SPF Records */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' property can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

The '''aspf''' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address or to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>"v=spf1 include:amazonses.com ~all"</pre>

This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''include:amazonses.com''' Allows your own domain as the MAIL FROM domain when sending using amazon the server
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.

==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>"v=spf1 ip4:188.164.201.250 include:_spf.google.com include:amazonses.com ~all"</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in the case amazon missing from the record to add:
<pre>include:amazonses.com</pre>
before ~all like in the example above.
By adding this, you 're essentially approving the Amazon server to send emails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:25:43Z

Milka: /* If You Already Have SPF Records */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' property can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

The '''aspf''' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address or to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>"v=spf1 include:amazonses.com ~all"</pre>

This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''include:amazonses.com''' Allows your own domain as the MAIL FROM domain when sending using amazon the server
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.

==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>"v=spf1 ip4:188.164.201.250 include:_spf.google.com include:amazonses.com ~all"</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in the case amazon missing from the record to add:
<pre>include:amazonses.com</pre>
before ~all like in the example above.
By adding this, you 're essentially approving the Amazon server to send emails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:22:30Z

Milka: /* If You Don't Have SPF Records At All */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' property can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

The '''aspf''' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address or to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>"v=spf1 include:amazonses.com ~all"</pre>

This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''include:amazonses.com''' Allows your own domain as the MAIL FROM domain when sending using amazon the server
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.

==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:10:53Z

Milka: /* If You Already Have DMARC Records */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' property can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

The '''aspf''' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:10:35Z

Milka: /* If You Already Have DMARC Records */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' property can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

The '''aspf''' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:10:20Z

Milka: /* If You Already Have DMARC Records */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' property can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).

The '''aspf''' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).
From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:09:40Z

Milka: /* If You Already Have DMARC Records */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' property can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).
The '''aspf'' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).
From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:08:18Z

Milka: /* Adding DMARC Records to Your Internet Domain */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some DMARC settings, there must be already some TXT records with something like this:
<pre>"v=DMARC1; p=none;"</pre>

the '''p''' value can have value of 'none', 'quarantine', or 'reject'. If the value is set to quarantine the mails that don't have DMARC setup will go to spam mails and if it is set to reject emails without DMARC set, won't be received and rejected. So the best is to set the value to none so all emails will proceed with sending.

Additional way that the DMARC record can look is
<pre>v=DMARC1; p=quarantine; adkim=s; aspf=s</pre>
The '''adkim''' indicates whether strict or relaxed DKIM Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).
The '''aspf'' indicates whether strict or relaxed SPF Identifier Alignment mode is required by the Domain Owner. Valid values can be 'r' (relaxed) or 's' (strict mode).
From our side we suggest both of this properties adkim and aspf to be set with values 'r' that means relaxed mode.

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T12:00:12Z

Milka: /* Adding DMARC Records to Your Internet Domain */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Already Have DMARC Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T11:58:43Z

Milka: /* Adding DMARC Records to Your Internet Domain */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

==If You Don't Have DMARC Records At All==

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T11:57:16Z

Milka: /* Adding DMARC Records to Your Internet Domain */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;"</pre>

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T11:57:01Z

Milka: /* Adding DMARC Records to Your Internet Domain */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of <pre>"v=DMARC1; p=none;</pre>.

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T11:56:01Z

Milka: /* Adding DMARC Records to Your Internet Domain */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of '''_dmarc.yourdomain.com''' and a value of '''"v=DMARC1; p=none;"'''.

Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-04-18T11:54:57Z

Milka: /* Adding DMARC Records to Your Internet Domain */

=Introduction=
The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails.

Those e-mails are sent with the sender being the e-mail that is defined in the basic settings of the property (Settings⇒Basic data) and are sent through Amazon mail server.

If you have also the hoteliga booking engine, the reservation confirmation e-mails are also sent through the same Amazon server.

Recently Google and Yahoo announced new sending requirements that will go into effect in February 2024, which should be applied also to mails sent trough the Amazon server. While these changes will require you to take a few new steps, enacting these measures will help improve deliverability and fix the issues with mails not sent or sent to spam.

This can be done by adjusting your domain's DNS settings. For example, if your internet domain is hotel.com, then you or your technical contact need to access the control panel of your hosting provider and go to the DNS section of hotel.com and do some adjustments.

'''Note:''' If your sender e-mail is not based on your own domain (e.g. info@hotel.com) but is a Gmail, Yahoo!, Hotmail or similar account, then you won't be able to do these adjustments and most probably e-mails sent through hoteliga won't be delivered at all or will enter the spam folder of the recipient.

The technical term for allowing hoteliga's e-mail server to send emails on your behalf is called '''Sender Policy Framework (SPF)'''.

=Adding DMARC Records to Your Internet Domain=
Log in to the control panel of your hosting provider. '''Note:''' The hoteliga support team is not authorized to assist you with logging in to your internet domain control panel. If you are not sure how to do this, please contact your technical IT contact.

After successful log in, go to the DNS settings of your internet domain (e.g. hotel.com), create and save a TXT record with a name of _dmarc.yourdomain.com and a value of "v=DMARC1; p=none;".
Replace yourdomain.com with the domain you're setting up. Some domain hosts automatically add yourdomain.com after the initial value—contact your domain provider for any specifics.

==If You Don't Have SPF Records At All==
In that case, all you need to do is to add a new record of type TXT after all the other records you already have (e.g. of type A, CNAME etc.). That TXT record is actually a specially formatted line that actually says "allow this IP address to be the sender of e-mails on behalf of me". The content of the TXT record should be as follows:
<pre>v=spf1 ip4:40.113.112.27 ~all</pre>
This command consists of the following parts:
* '''v=spf1''' Sets the SPF version that is used.
* '''ip4:40.113.112.27''' Allow the IP address (of protocol version 4) 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
* '''~all''' Indicates that servers that are not listed previously are not authorized to send e-mails.
==If You Already Have SPF Records==
If you have already some SPF settings, there must be already some TXT records with something like this:
<pre>v=spf1 a mx ip4:136.243.149.225 include:mailgun.org include:zoho.com -all</pre>
or this:
<pre>v=spf1 ip4:188.164.201.250 ip4:188.164.201.231 +a +mx ~all</pre>
or any TXT record starting with '''v=spf1''' and after that one or more '''ip4:''' prefixes followed by IP addresses or multiple '''include:''' prefixes with domains (e.g. mailgun.org for transactional e-mails).

What you need to do in this case is to edit this configuration and just add the following in between:
<pre>ip4:40.113.112.27</pre>
By adding this, you 're essentially approving the IP address 40.113.112.27 (hoteliga's e-mail server) to send e-mails on your behalf.
After doing that, save the changes in your DNS setup.

You should be able to send e-mails from within the hoteliga PMS and the hoteliga booking engine (if activated) without any problems.

How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup

2024-03-04T11:41:58Z

Milka: Created page with "=Introduction= The hoteliga PMS has a template system where the user can prepare and send from inside a reservation various preset and personalized e-mails. Those e-mails are..."

PMS

2024-03-04T11:40:26Z

Milka:

PMS stands for Property Management System

== Main Functionality ==
hoteliga PMS has the following features:

'''Reservations Management'''
:*[[The Dashboard (Home Page)|dashboard]]
:*[[The Reservations Calendar|reservations calendar]]
:*[[The Reservations Table|reservations table]]
:*[[The Room Layout|room layout]]
'''[[Customer Management]]'''
:*[[customer reservation history|customer reservation history]]
:*[[transactions|Transactions]]
:*[[customer categorization|Customer Categorization]]
'''Guest Management'''
:*[[Guest details|Guest details]]
:*[[Guest reports|Guest reports]]
'''Agencies Management'''
:*[[Contracts]]
:*[[Agencies_Management#Transactions|transactions]]
:*[[Agencies_Management#Balances|balances]]
:*[[Booking agency Setup|Booking agency]]
'''[[Housekeeping]]'''
:*plans
:*tasks
:*mobile app
'''[[Invoicing]]'''
:*taxes
:*counters
:*[[templates]]
:*[[reports]]
:*[[QR code myData]]
'''[[Room Maintenance]]'''

'''[[Export Data for the Authorities]]'''
:*police and statistics authorities
'''[[Automation]]'''
:*automated emails

== Key Characteristics ==
* Highly localizable (languages, currencies, taxation)
* Multiple [[Contracts|contracts]]
* [[Price Lists|Price lists]] season-based or day-by-day
* [[Users|User management]]
* Dynamic [[Templates|templates]]
* Many general and detailed [[Reports|reports]]
* Optional integrated direct connections with OTAs ([[Channel Manager|hoteliga channel manager]]) or third-party channel managers
* Optional integration with [[Booking Engine|hoteliga booking engine]]
* [[API]] available for custom applications
* [[Connected Rooms]]

== The User Interface ==
* [[The Dashboard (Home Page)]]
* [[The Reservations Calendar]]
* [[The Reservation Window]]
* [[The Room Layout]]
* [[Other Settings]]

== Key Concepts ==
* Simplified Look, Easy to Understand
* [[The Normal and the Agreed Price|Normal price and agreed price]]
* Overbooking allowed (and highlighted)
* Room capacity on room level, not on room-type level
* No night audits
* Similar user experience in desktop and mobile

== HOW-TO's ==
* How to [[Property Setup|setup your property]]
* How to [[Room Setup|set room types, room groups and rooms]]
* How to [[Special prices Setup|set special prices]]
* How to [[Booking agency Setup|create a booking agency]]
* How to [[Housekeeping Setup|set rules for housekeeping]]
* How to [[Extra charges|add extra charges]]
* How to [[Change Board name|change board name]]
* How to [[Create New Users|create new users]]
* How to [[Create Vouchers|create new vouchers]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS with the new DMARC and DKIM setup|ensure delivery of e-mails sent through the PMS with the new DMARC and DKIM setup]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS]]

== Integrations ==
* '''[[Chekin]]'''

PMS

2024-03-04T11:39:38Z

Milka:

PMS stands for Property Management System

== Main Functionality ==
hoteliga PMS has the following features:

'''Reservations Management'''
:*[[The Dashboard (Home Page)|dashboard]]
:*[[The Reservations Calendar|reservations calendar]]
:*[[The Reservations Table|reservations table]]
:*[[The Room Layout|room layout]]
'''[[Customer Management]]'''
:*[[customer reservation history|customer reservation history]]
:*[[transactions|Transactions]]
:*[[customer categorization|Customer Categorization]]
'''Guest Management'''
:*[[Guest details|Guest details]]
:*[[Guest reports|Guest reports]]
'''Agencies Management'''
:*[[Contracts]]
:*[[Agencies_Management#Transactions|transactions]]
:*[[Agencies_Management#Balances|balances]]
:*[[Booking agency Setup|Booking agency]]
'''[[Housekeeping]]'''
:*plans
:*tasks
:*mobile app
'''[[Invoicing]]'''
:*taxes
:*counters
:*[[templates]]
:*[[reports]]
:*[[QR code myData]]
'''[[Room Maintenance]]'''

'''[[Export Data for the Authorities]]'''
:*police and statistics authorities
'''[[Automation]]'''
:*automated emails

== Key Characteristics ==
* Highly localizable (languages, currencies, taxation)
* Multiple [[Contracts|contracts]]
* [[Price Lists|Price lists]] season-based or day-by-day
* [[Users|User management]]
* Dynamic [[Templates|templates]]
* Many general and detailed [[Reports|reports]]
* Optional integrated direct connections with OTAs ([[Channel Manager|hoteliga channel manager]]) or third-party channel managers
* Optional integration with [[Booking Engine|hoteliga booking engine]]
* [[API]] available for custom applications
* [[Connected Rooms]]

== The User Interface ==
* [[The Dashboard (Home Page)]]
* [[The Reservations Calendar]]
* [[The Reservation Window]]
* [[The Room Layout]]
* [[Other Settings]]

== Key Concepts ==
* Simplified Look, Easy to Understand
* [[The Normal and the Agreed Price|Normal price and agreed price]]
* Overbooking allowed (and highlighted)
* Room capacity on room level, not on room-type level
* No night audits
* Similar user experience in desktop and mobile

== HOW-TO's ==
* How to [[Property Setup|setup your property]]
* How to [[Room Setup|set room types, room groups and rooms]]
* How to [[Special prices Setup|set special prices]]
* How to [[Booking agency Setup|create a booking agency]]
* How to [[Housekeeping Setup|set rules for housekeeping]]
* How to [[Extra charges|add extra charges]]
* How to [[Change Board name|change board name]]
* How to [[Create New Users|create new users]]
* How to [[Create Vouchers|create new vouchers]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS with the new DMARC and DKIM setup]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS]]

== Integrations ==
* '''[[Chekin]]'''

PMS

2024-03-04T11:39:10Z

Milka:

PMS

2024-03-04T11:38:36Z

Milka:

PMS stands for Property Management System

== Main Functionality ==
hoteliga PMS has the following features:

'''Reservations Management'''
:*[[The Dashboard (Home Page)|dashboard]]
:*[[The Reservations Calendar|reservations calendar]]
:*[[The Reservations Table|reservations table]]
:*[[The Room Layout|room layout]]
'''[[Customer Management]]'''
:*[[customer reservation history|customer reservation history]]
:*[[transactions|Transactions]]
:*[[customer categorization|Customer Categorization]]
'''Guest Management'''
:*[[Guest details|Guest details]]
:*[[Guest reports|Guest reports]]
'''Agencies Management'''
:*[[Contracts]]
:*[[Agencies_Management#Transactions|transactions]]
:*[[Agencies_Management#Balances|balances]]
:*[[Booking agency Setup|Booking agency]]
'''[[Housekeeping]]'''
:*plans
:*tasks
:*mobile app
'''[[Invoicing]]'''
:*taxes
:*counters
:*[[templates]]
:*[[reports]]
:*[[QR code myData]]
'''[[Room Maintenance]]'''

'''[[Export Data for the Authorities]]'''
:*police and statistics authorities
'''[[Automation]]'''
:*automated emails

== Key Characteristics ==
* Highly localizable (languages, currencies, taxation)
* Multiple [[Contracts|contracts]]
* [[Price Lists|Price lists]] season-based or day-by-day
* [[Users|User management]]
* Dynamic [[Templates|templates]]
* Many general and detailed [[Reports|reports]]
* Optional integrated direct connections with OTAs ([[Channel Manager|hoteliga channel manager]]) or third-party channel managers
* Optional integration with [[Booking Engine|hoteliga booking engine]]
* [[API]] available for custom applications
* [[Connected Rooms]]

== The User Interface ==
* [[The Dashboard (Home Page)]]
* [[The Reservations Calendar]]
* [[The Reservation Window]]
* [[The Room Layout]]
* [[Other Settings]]

== Key Concepts ==
* Simplified Look, Easy to Understand
* [[The Normal and the Agreed Price|Normal price and agreed price]]
* Overbooking allowed (and highlighted)
* Room capacity on room level, not on room-type level
* No night audits
* Similar user experience in desktop and mobile

== HOW-TO's ==
* How to [[Property Setup|setup your property]]
* How to [[Room Setup|set room types, room groups and rooms]]
* How to [[Special prices Setup|set special prices]]
* How to [[Booking agency Setup|create a booking agency]]
* How to [[Housekeeping Setup|set rules for housekeeping]]
* How to [[Extra charges|add extra charges]]
* How to [[Change Board name|change board name]]
* How to [[Create New Users|create new users]]
* How to [[Create Vouchers|create new vouchers]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS with the new DMARC and DKIM setup]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS]]

== Integrations ==
* '''[[Chekin]]'''

How to Ensure Delivery of E-mails Sent Through the PMS

2024-03-04T11:37:04Z

Milka:

How to Ensure Delivery of E-mails Sent Through the PMS

2024-03-04T11:36:32Z

Milka:

PMS

2024-03-04T11:25:35Z

Milka: /* HOW-TO's */

PMS stands for Property Management System

== Main Functionality ==
hoteliga PMS has the following features:

'''Reservations Management'''
:*[[The Dashboard (Home Page)|dashboard]]
:*[[The Reservations Calendar|reservations calendar]]
:*[[The Reservations Table|reservations table]]
:*[[The Room Layout|room layout]]
'''[[Customer Management]]'''
:*[[customer reservation history|customer reservation history]]
:*[[transactions|Transactions]]
:*[[customer categorization|Customer Categorization]]
'''Guest Management'''
:*[[Guest details|Guest details]]
:*[[Guest reports|Guest reports]]
'''Agencies Management'''
:*[[Contracts]]
:*[[Agencies_Management#Transactions|transactions]]
:*[[Agencies_Management#Balances|balances]]
:*[[Booking agency Setup|Booking agency]]
'''[[Housekeeping]]'''
:*plans
:*tasks
:*mobile app
'''[[Invoicing]]'''
:*taxes
:*counters
:*[[templates]]
:*[[reports]]
:*[[QR code myData]]
'''[[Room Maintenance]]'''

'''[[Export Data for the Authorities]]'''
:*police and statistics authorities
'''[[Automation]]'''
:*automated emails

== Key Characteristics ==
* Highly localizable (languages, currencies, taxation)
* Multiple [[Contracts|contracts]]
* [[Price Lists|Price lists]] season-based or day-by-day
* [[Users|User management]]
* Dynamic [[Templates|templates]]
* Many general and detailed [[Reports|reports]]
* Optional integrated direct connections with OTAs ([[Channel Manager|hoteliga channel manager]]) or third-party channel managers
* Optional integration with [[Booking Engine|hoteliga booking engine]]
* [[API]] available for custom applications
* [[Connected Rooms]]

== The User Interface ==
* [[The Dashboard (Home Page)]]
* [[The Reservations Calendar]]
* [[The Reservation Window]]
* [[The Room Layout]]
* [[Other Settings]]

== Key Concepts ==
* Simplified Look, Easy to Understand
* [[The Normal and the Agreed Price|Normal price and agreed price]]
* Overbooking allowed (and highlighted)
* Room capacity on room level, not on room-type level
* No night audits
* Similar user experience in desktop and mobile

== HOW-TO's ==
* How to [[Property Setup|setup your property]]
* How to [[Room Setup|set room types, room groups and rooms]]
* How to [[Special prices Setup|set special prices]]
* How to [[Booking agency Setup|create a booking agency]]
* How to [[Housekeeping Setup|set rules for housekeeping]]
* How to [[Extra charges|add extra charges]]
* How to [[Change Board name|change board name]]
* How to [[Create New Users|create new users]]
* How to [[Create Vouchers|create new vouchers]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS with the new DMARC and DKIM setup]]

== Integrations ==
* '''[[Chekin]]'''

PMS

2024-03-04T11:24:56Z

Milka: /* HOW-TO's */

PMS stands for Property Management System

== Main Functionality ==
hoteliga PMS has the following features:

'''Reservations Management'''
:*[[The Dashboard (Home Page)|dashboard]]
:*[[The Reservations Calendar|reservations calendar]]
:*[[The Reservations Table|reservations table]]
:*[[The Room Layout|room layout]]
'''[[Customer Management]]'''
:*[[customer reservation history|customer reservation history]]
:*[[transactions|Transactions]]
:*[[customer categorization|Customer Categorization]]
'''Guest Management'''
:*[[Guest details|Guest details]]
:*[[Guest reports|Guest reports]]
'''Agencies Management'''
:*[[Contracts]]
:*[[Agencies_Management#Transactions|transactions]]
:*[[Agencies_Management#Balances|balances]]
:*[[Booking agency Setup|Booking agency]]
'''[[Housekeeping]]'''
:*plans
:*tasks
:*mobile app
'''[[Invoicing]]'''
:*taxes
:*counters
:*[[templates]]
:*[[reports]]
:*[[QR code myData]]
'''[[Room Maintenance]]'''

'''[[Export Data for the Authorities]]'''
:*police and statistics authorities
'''[[Automation]]'''
:*automated emails

== Key Characteristics ==
* Highly localizable (languages, currencies, taxation)
* Multiple [[Contracts|contracts]]
* [[Price Lists|Price lists]] season-based or day-by-day
* [[Users|User management]]
* Dynamic [[Templates|templates]]
* Many general and detailed [[Reports|reports]]
* Optional integrated direct connections with OTAs ([[Channel Manager|hoteliga channel manager]]) or third-party channel managers
* Optional integration with [[Booking Engine|hoteliga booking engine]]
* [[API]] available for custom applications
* [[Connected Rooms]]

== The User Interface ==
* [[The Dashboard (Home Page)]]
* [[The Reservations Calendar]]
* [[The Reservation Window]]
* [[The Room Layout]]
* [[Other Settings]]

== Key Concepts ==
* Simplified Look, Easy to Understand
* [[The Normal and the Agreed Price|Normal price and agreed price]]
* Overbooking allowed (and highlighted)
* Room capacity on room level, not on room-type level
* No night audits
* Similar user experience in desktop and mobile

== HOW-TO's ==
* How to [[Property Setup|setup your property]]
* How to [[Room Setup|set room types, room groups and rooms]]
* How to [[Special prices Setup|set special prices]]
* How to [[Booking agency Setup|create a booking agency]]
* How to [[Housekeeping Setup|set rules for housekeeping]]
* How to [[Extra charges|add extra charges]]
* How to [[Change Board name|change board name]]
* How to [[Create New Users|create new users]]
* How to [[Create Vouchers|create new vouchers]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|ensure delivery of e-mails sent through the PMS]]
* How to [[How to Ensure Delivery of E-mails Sent Through the PMS|DMARC and DKIM setup]]

== Integrations ==
* '''[[Chekin]]'''

Templates

2022-02-28T09:34:50Z

Milka:

With templates you can adjust and personalize the view of the following:

* e-mails about reservations (confirmation e-mail, instructions on how to get to the property, "thank you" e-mail etc.)
* Invoices (including receipts, payment receipts, credit invoices)
* Registration card (including similar forms, such as the ones for police authorities)
* Folio
* ...

== Accessing Templates==

Accessing templates can be done through:

'''Options⇒ Settings⇒ Templates'''

[[File:tem_list_en.png]]

In this list, there are some templates already registered by the system. The type of the template is displayed in the 3rd column '''("Type")'''.

'''New template:''' Is used for creating a new template.

'''Show filter:''' Is used for searching templates in the list, using the available filters.

== Creating a New Template ==
A new template can be created by following these steps:

''' Options⇒ Settings⇒ Templates⇒ New template'''

[[File:tem_new_en.png]]

'''1. Title:''' The name of the template should be inserted in this field.

'''2. Template type :''' It defines what kind of template will be created. Further details are included in the table below.

'''3. Language:''' The correct selection of the language ensures that the recipient of the template (invoice, email etc) will understand the content.

'''4. Subject:''' It is valid only in case that a template is used for emails, e.g. "thank you for your stay" etc.

'''5. Content:''' This is the main part of the template. Formatting is possible using the standard formatting buttons like included in Microsoft Word. If the view is limited, the button "full screen" shows a larger view.

'''6. Ok:''' To save the registration.

{| class="wikitable"
! colspan="2" style="text-align: center;" | Template Types
|-
| Reservation
| It is related to a reservation and it is used for emails e.g. confirmation of the reservation,"thank you" e-mail,

instructions how to come to the hotel etc.
|-
| Invoice
| This is a standard layout with fields that should include specific information for invoicing, e.g. the counter,customer's billing

information, various taxes applied etc.
|-
| Receipt
| This is a similar concept to invoice but used only in Greece. It does not apply to other countries.
|-
| Payment receipt
| This is a similar concept to invoice but used only in Greece. It does not apply to other countries.
|-
| Reservation request
| This is related to the e-mail that is automatically generated by the booking engine. It is called "request" because the reservations coming from the

booking engine have to be confirmed by the hotelier or the property manager first.
|-
| Registration card
| This is a kind of form given to the customer to sign and accept the terms of the property e.g. any damage takes place, the customer

is liable for.
|-
| Credit invoice
| It belongs to the invoicing documents used to credit or return money to the customer.
|-
| Folio
| It is a hotel business term that includes the total amount of the charges that a customer should pay so far. It is like a proforma

invoice. For example, a customer has scheduled to stay in a hotel for 10 nights and the 5th one he wants to know what is the total

amount he owes for extra charges, minibar etc. This template will include these charges.
|}

==Use of Templates==

===Templates Related to Reservations===

====Reservation====
[[File:tem_res_email_en.png]]

All the "reservation" templates are included in the tab "E-mail" of a reservation window.

When one of them is selected, it is automatically populated by the system with data like the name, address etc.

====Registration Card====
[[File:Tem res reg card en.png]]

After clicking the '''"registration card"''' button the following window opens.

[[File:Tem res reg card 2 en.png]]

All the "registration card" templates are included in this drop-down list.
When one of them is selected, it is automatically populated by the system with the predefined data.

====Folio====
[[File:Tem res folio en.png]]

After clicking the "folio" button the following window opens.

MISSING PHOTO

All the "folio" templates are included in this drop-down list. When one of them is selected, it is automatically populated by the system with the predefined data.

''real folio at the end of the presentation''

====Reservation request====
The "reservation request" template type is used for the e-mails that are sent automatically by the Booking Engine.

They include the reservation information that is useful to the customers.

'''Options⇒ Booking Engine⇒ E-mail'''

[[File:Tem be en.png]]

Every activated language can be connected to various templates. In the example, only the English language is activated, so the respective templates are appeared.

===Templates Related to Invoicing===
The "invoice", "credit invoice" and "receipt" are related to invoicing.

At this step of the invoicing procedure, the system requests the template to be defined.

[[File:Tem credit 1 en.png]]

When the template is selected from the drop-down list, it is automatically populated by the system with the predefined data.

===Templates Related to Payments===

[[File:tem_res_rec_en.png]]

In the tab '''"Payments"''', a payment should be selected '''(1)''' and then the '''"2. Receipt"''' button should be clicked.

[[File:tem_res_rec_2_en.png]]

In this window the system requests the template to be defined.

When a template is selected, it is automatically populated by the system with data like the name, address etc.

This receipt has no legal validity. It is just a proof of receiving money.

==How to Edit the Content of a Template==
The formatting of the template content is possible by using the tools given by the system.

First of all, there are the standard formatting buttons -like included in Microsoft Word- that allow, for example the letters to be bold, the alignment in the center etc. If a user feels comfortable with HTML code, then he/she can go to '''View ⇒ Source Code''' and make any change in the window that opens. By clicking "Ok" the changes are reflected directly to the template content.

Every template type has its own family or set of fields that allow the system to retrieve the information needed depending on the case.

For example, in a reservation e-mail, if it is typed:

:"Dear Mr. '''<nowiki>{{firstname}} {{lastname}}</nowiki>''', your reservation is confirmed."

the result can be:

:"Dear Mr. '''Michael Willson''', your reservation is confirmed"

Sometimes, a field can have '''nested''' fields. If a field is followed by a block surrounded with '''curly braces''' ( '''{...}''' ), then, it has nested fields.

In order to access a nested field, dot (.) notation should be used, like in the example below:

:"Dear Mr. '''<nowiki>{{customer.firstname}} {{customer.lastname}}</nowiki>''', your reservation is confirmed."

A field can also represent an array. If a field's name is followed by '''double brackets''', then it is an array of set of other fields, which are listed in the following block denoted by curly braces.

In such cases, we have to use the index and access the '''set of fields'''. Example is given below for accessing price of reservation for Folio.

:"Price of the reservation is '''{{reservations[0].price}}'''"

Note, that every field is followed by a semicolon and the self-description, except for the ones with nested fields.

There are two sets of reservation fields, depending on whether the reservation is single or it's part of a group of reservations:

=== Reservation (Single) ===

{| class="wikitable"
! field
! is populated with
|-
| <nowiki>{{ reservationId }}</nowiki>
| the hoteliga reservation ID, e.g. 2325
|-
| <nowiki>{{ lastname }}</nowiki>
| the last name of the customer, e.g. "Willson"
|-
| <nowiki>{{ firstname }}</nowiki>
| the first name of the customer, e.g. "Michael"
|-
| <nowiki>{{ datefrom }}</nowiki>
| the arrival date of the reservation, e.g. 24/08/2017. Date formatting will follow regional settings
|-
| <nowiki>{{ dateto }}</nowiki>
| the departure date of the reservation, e.g. 31/08/2017. Date formatting will follow regional settings
|-
| <nowiki>{{ nights }}</nowiki>
| the number of the total nights registered in the reservation, e.g. 7
|-
| <nowiki>{{ adults }}</nowiki>
| the number of the adults registered in the reservation, e.g. 2
|-
| <nowiki>{{ children }}</nowiki>
| the number of the children registered in the reservation, e.g. 2
|-
| <nowiki>{{ board }}</nowiki>
| the localized description of the board, based on the template language
|-
| <nowiki>{{ totalprice }}</nowiki>
| the total price of the reservation in the property's currency, e.g. 448,00 EUR
|-
| <nowiki>{{ balance }}</nowiki>
| the balance of the reservation in the property's currency, e.g. 368,00 EUR
|-
| <nowiki>{{ roomtype }}</nowiki>
| the title of the room type, based on the template language
|-
| <nowiki>{{ roomtitle }}</nowiki>
| the title of the room
|-
| <nowiki>{{ notes }}</nowiki>
| notes about the reservation
|-
| <nowiki>{{ customernotes }}</nowiki>
| notes about the customer
|-
| <nowiki>{{ bookingagencytitle }}</nowiki>
| the title of the booking agency
|-
| <nowiki>{{ bookingagencycode }}</nowiki>
| the booking agency code
|-
| <nowiki>{{ allPlannedPayments }}</nowiki>
| the list of all planned payments in the reservation
|-
| <nowiki>{{ totalPlannedPayments }}</nowiki>
| the total amount of the planned payments in the reservation
|}

=== Reservation (Group) ===

{| class="wikitable"
! field
! is populated with
|-
| <nowiki>{{ lastname }}</nowiki>
| the last name of the customer, e.g. "Willson"
|-
| <nowiki>{{ firstname }}</nowiki>
| the first name of the customer, e.g. "Michael"
|-
| <nowiki>{{ customernotes }}</nowiki>
| ...
|-
| <nowiki>{{ bookingagencytitle }}</nowiki>
| ...
|-
| <nowiki>{{ bookingagencycode }}</nowiki>
| ...
|-
| <nowiki>{{ totalpricegroup }}</nowiki>
| ...
|-
| <nowiki>{{ balancegroup }}</nowiki>
| ...
|-
| <nowiki>{{ reservations }}</nowiki>
| ...
|-
| <nowiki>{{ allPlannedPayments }}</nowiki>
| the list of all planned payments in the group
|-
| <nowiki>{{ totalPlannedPayments }}</nowiki>
| the total amount of the planned payments in the group
|}

===Invoice===
{| class="wikitable"
! parent object
! parent object
! field
! it is populated with
|-
| lines
|
| <nowiki>{{ netSubtotal }}</nowiki>
| the net amount of the subtotal formatted with currency code
|-
| lines
|
| <nowiki> {{ netSubtotalCurrency }}</nowiki>
|
|-
| lines
|
| <nowiki>{{ grossSubtotal }}</nowiki>
| the gross amount of the subtotal formatted with currency code
|-
| lines
|
| <nowiki>{{ grossSubtotalCurrency }}</nowiki>
|
|-
| lines
|
| <nowiki>{{ serviceStart }}</nowiki>
| starting day of reservation for that particular line of invoice
|-
| lines
|
| <nowiki>{{ serviceEnd }}</nowiki>
| ending day of reservation for that particular line of invoice
|-
| lines
|
| <nowiki>{{ serviceDuration }}</nowiki>
| duration of reservation for that particular line of invoice
|-
| lines
|
| <nowiki>{{ itemType }}</nowiki>
|
|-
| lines
|
| <nowiki>{{ numAdults }}</nowiki>
| number of adults for this particular line of invoice
|-
| lines
|
| <nowiki>{{ numChildren }}</nowiki>
| number of children for this particular line of invoice
|-
| lines
|
| <nowiki>{{ quantity }}</nowiki>
| number of days or items for this particular line of invoice
|-
| lines
|
| <nowiki>{{ itemDescription }}</nowiki>
|
|-
| lines
|
| <nowiki>{{ grossUnitPrice }}</nowiki>
| gross price of the item
|-
| lines
|
| <nowiki>{{ grossUnitPriceCurrency }}</nowiki>
|
|-
| lines
|
| <nowiki>{{ netUnitPrice }}</nowiki>
| net price of the item
|-
| lines
|
| <nowiki>{{ netUnitPriceCurrency }}</nowiki>
|
|-
| lines
| taxes
| <nowiki>{{ percentage }}</nowiki>
| amount of tax in percentage
|-
| lines
| taxes
| <nowiki>{{ amount}}</nowiki>
|
|-
| lines
| taxes
| <nowiki>{{ amountCurrency }}</nowiki>
|
|-
| lines
| taxes
| <nowiki>{{ breakdown }}</nowiki>
|
|-
| lines
| taxes
| <nowiki>{{ rawAmount }}</nowiki>
|
|-
| lines
|
| <nowiki>{{ netSubtotalRaw }}</nowiki>
|
|-
| lines
|
| <nowiki>{{ reservationId }}</nowiki>
| Id of the reservation
|-
|
|
| <nowiki>{{ totalNumAdults }}</nowiki>
| the total number of adults in the reservation
|-
|
|
| <nowiki>{{ totalNumChildren }}</nowiki>
| the total number of children in the reservation
|-
|
|
| <nowiki>{{ totalNumPersons }}</nowiki>
| the total number of persons in the reservation
|-
|
|
| <nowiki>{{ totalNet }}</nowiki>
| net amount of reservation
|-
|
|
| <nowiki>{{ totalNetCurrency }}</nowiki>
|
|-
|
|
| <nowiki>{{ totalGross }}</nowiki>
| gross amount of reservation
|-
|
|
| <nowiki>{{ totalGrossCurrency }}</nowiki>
|
|-
|
|
| <nowiki>{{ totalGrossBefore }}</nowiki>
|
|-
|
|
| <nowiki>{{ totalGrossBeforeCurrency }}</nowiki>
|
|-
|
|
| <nowiki>{{ totalUninvoicedPayments }}</nowiki>
|
|-
|
|
| <nowiki>{{ totalUninvoicedPaymentsCurrency }}</nowiki>
|
|-
|
|
| <nowiki>{{ remainingBalance }}</nowiki>
|
|-
|
|
| <nowiki>{{ remainingBalanceCurrency }}</nowiki>
|
|-
|
|
| <nowiki>{{ extraTaxes }}</nowiki>
|
|-
| totalTaxes
|
| <nowiki>{{ percentage }}</nowiki>
|
|-
| totalTaxes
|
| <nowiki>{{ amount }}</nowiki>
|
|-
| totalTaxes
|
| <nowiki>{{ amountCurrency }}</nowiki>
|
|-
| totalTaxes
|
| <nowiki>{{ title }}</nowiki>
|
|-
| totalTaxes
|
| <nowiki>{{ breakdown }}</nowiki>
|
|-
| totalTaxes
|
| <nowiki>{{ rawAmount }}</nowiki>
|
|-
|
|
| <nowiki>{{ totalTax }}</nowiki>
|
|-
|
|
| <nowiki>{{ totalTaxCurrency }}</nowiki>
|
|-
|
|
| <nowiki>{{ date }}</nowiki>
|
|-
|
|
| <nowiki>{{ number }}</nowiki>
|
|-
|
|
| <nowiki>{{ numbervalue }}</nowiki>
|
|-
|
|
| <nowiki>{{ series }}</nowiki>
|
|-
|
|
| <nowiki>{{ lastname }}</nowiki>
|
|-
|
|
| <nowiki>{{ firstname }}</nowiki>
|
|-
|
|
| <nowiki>{{ taxid }}</nowiki>
|
|-
|
|
| <nowiki>{{ taxid2 }}</nowiki>
|
|-
|
|
| <nowiki>{{ occupation }}</nowiki>
|
|-
|
|
| <nowiki>{{ address1 }}</nowiki>
|
|-
|
|
| <nowiki>{{ address2 }}</nowiki>
|
|-
|
|
| <nowiki>{{ city }}</nowiki>
|
|-
|
|
| <nowiki>{{ zip }}</nowiki>
|
|-
|
|
| <nowiki>{{ country }}</nowiki>
|
|-
|
|
| <nowiki>{{ rooms }}</nowiki>
|
|-
|
|
| <nowiki>{{ notes }}</nowiki>
|
|-
|
|
| <nowiki>{{ bookingAgencyReferenceCodes }}</nowiki>
|
|-
|
|
| <nowiki>{{ guests }}</nowiki>
|
|-
|
|
| <nowiki>{{ stayFrom }}</nowiki>
|
|-
|
|
| <nowiki>{{ stayTo }}</nowiki>
|
|}

===Registration Card===

{| class="wikitable"
! parent object
! field
! it is populated with
|-
|
| <nowiki> {{ todayDateEspanol }} </nowiki>
|
|-
|
| <nowiki> {{ todayHourEspanol }} </nowiki>
|
|-
|
| <nowiki> {{ hotelInternationalTitle }} </nowiki>
|
|-
|
| <nowiki> {{ hotelDomesticTitle }} </nowiki>
|
|-
|
| <nowiki> {{ reservationId }} </nowiki>
| Id of the reservation
|-
|
| <nowiki> {{ arrivalDate }} </nowiki>
| date of arrival
|-
|
| <nowiki> {{ departureDate }} </nowiki>
| date of departure
|-
|
| <nowiki> {{ numAdults }} </nowiki>
| number of adults
|-
|
| <nowiki> {{ numChildren }} </nowiki>
| number of children
|-
|
| <nowiki> {{ boardTitle }} </nowiki>
|
|-
|
| <nowiki> {{ bookingAgencyReferenceCode }} </nowiki>
| reference code of the booking agency
|-
|
| <nowiki> {{ bookingAgencyTitle }} </nowiki>
| title of the booking agency
|-
|
| <nowiki> {{ roomTitle }} </nowiki>
| title of the room
|-
|
| <nowiki> {{ roomTypeTitle }} </nowiki>
| title of the room type
|-
|
| <nowiki> {{ customerFirstName }} </nowiki>
| first name of the customer
|-
|
| <nowiki> {{ customerLastName }} </nowiki>
| last name of the customer
|-
|
| <nowiki> {{ reservationNotes }} </nowiki>
| notes about reservation
|-
|
| <nowiki> {{ customerTaxId }} </nowiki>
| tax id of the customer
|-
|
| <nowiki> {{ customerEmail }} </nowiki>
| email of the customer
|-
|
| <nowiki> {{ customerPhone }} </nowiki>
| phone number of the customer
|-
|
| <nowiki> {{ customerAddress }} </nowiki>
| address of the customer
|-
|
| <nowiki> {{ customerZipCode }} </nowiki>
| zip code of the customer
|-
|
| <nowiki> {{ customerCity }} </nowiki>
| city of the customer
|-
|
| <nowiki> {{ totalExtraTaxes }} </nowiki>
| total amount of extra taxes
|-
|
| <nowiki> {{ totalWithoutExtraTaxes }} </nowiki>
| total amount without extra taxes
|-
|
| <nowiki> {{ totalAgreedPrice }} </nowiki>
|
|-
|
| <nowiki> {{ totalPayments }} </nowiki>
|
|-
|
| <nowiki> {{ totalWithExtraTaxes }} </nowiki>
| total amount with extra taxes
|-
|
| <nowiki> {{ balance }} </nowiki>
|
|-
|
| <nowiki> {{ customerCountry }} </nowiki>
| country of the customer
|-
|
| <nowiki> {{ numGuests }} </nowiki>
| number of guests
|-
|
| <nowiki> {{ totalWithoutExtraTaxes }} </nowiki>
| total amount without extra taxes
|-
| idDocTypes
| <nowiki> {{ id }} </nowiki>
| document type id
|-
| idDocTypes
| <nowiki> {{ title }} </nowiki>
| document type title
|-
| sexes
| <nowiki> {{ id }} </nowiki>
| sex id
|-
| sexes
| <nowiki> {{ title }} </nowiki>
| sex title
|-
| guests
| <nowiki> {{ salutationId }} </nowiki>
| salutation type id
|-
| guests
| <nowiki> {{ salutation }} </nowiki>
| salutation type
|-
| guests
| <nowiki> {{ customerLastName }} </nowiki>
| last name of the customer
|-
| guests
| <nowiki> {{ customerLastName2 }} </nowiki>
| middle name of the customer
|-
| guests
| <nowiki> {{ customerFirstName }} </nowiki>
| first name of the customer
|-
| guests
| <nowiki> {{ lastName }} </nowiki>
| last name
|-
| guests
| <nowiki> {{ lastName2 }} </nowiki>
| middle name
|-
| guests
| <nowiki> {{ firstName }} </nowiki>
| first name
|-
| guests
| <nowiki> {{ dateOfBirth }} </nowiki>
| date of birth
|-
| guests
| <nowiki> {{ dateOfBirth2 }} </nowiki>
|
|-
| guests
| <nowiki> {{ nationalityCountryName }} </nowiki>
|
|-
| guests
| <nowiki> {{ idDocType }} </nowiki>
| document type
|-
| guests
| <nowiki> {{ idDocTypeEspana }} </nowiki>
|
|-
| guests
| <nowiki> {{ idDocNumber }} </nowiki>
| document number
|-
| guests
| <nowiki> {{ idDocTitle }} </nowiki>
| document title
|-
| guests
| <nowiki> {{ idDocIssueDate }} </nowiki>
| document issue date
|-
| guests
| <nowiki> {{ idDocIssueDate2 }} </nowiki>
|
|-
| guests
| <nowiki> {{ provinceName }} </nowiki>
| name of the province
|-
| guests
| <nowiki> {{ sex }} </nowiki>
| sex
|-
| guests
| <nowiki> {{ sex2 }} </nowiki>
|
|-
| guests
| <nowiki> {{ checkinDate }} </nowiki>
| date of checking in
|-
| guests
| <nowiki> {{ checkinDate2 }} </nowiki>
|
|-
| guestPairs
| <nowiki> {{ salutationId }} </nowiki>
| salutation type id
|-
| guestPairs
| <nowiki> {{ salutation }} </nowiki>
| salutation type
|-
| guestPairs
| <nowiki> {{ customerLastName }} </nowiki>
| last name of the customer
|-
| guestPairs
| <nowiki> {{ customerLastName2 }} </nowiki>
| middle name of the customer
|-
| guestPairs
| <nowiki> {{ customerFirstName }} </nowiki>
| first name of the customer
|-
| guestPairs
| <nowiki> {{ lastName }} </nowiki>
| last name
|-
| guestPairs
| <nowiki> {{ lastName2 }} </nowiki>
| middle name
|-
| guestPairs
| <nowiki> {{ firstName }} </nowiki>
| first name
|-
| guestPairs
| <nowiki> {{ dateOfBirth }} </nowiki>
| date of birth
|-
| guestPairs
| <nowiki> {{ dateOfBirth2 }} </nowiki>
|
|-
| guestPairs
| <nowiki> {{ nationalityCountryName }} </nowiki>
|
|-
| guestPairs
| <nowiki> {{ idDocType }} </nowiki>
| document type
|-
| guestPairs
| <nowiki> {{ idDocTypeEspana }} </nowiki>
|
|-
| guestPairs
| <nowiki> {{ idDocNumber }} </nowiki>
| document number
|-
| guestPairs
| <nowiki> {{ idDocTitle }} </nowiki>
| document title
|-
| guestPairs
| <nowiki> {{ idDocIssueDate }} </nowiki>
| document issue date
|-
| guestPairs
| <nowiki> {{ idDocIssueDate2 }} </nowiki>
|
|-
| guestPairs
| <nowiki> {{ provinceName }} </nowiki>
| name of the province
|-
| guestPairs
| <nowiki> {{ sex }} </nowiki>
| sex
|-
| guestPairs
| <nowiki> {{ sex2 }} </nowiki>
|
|-
| guestPairs
| <nowiki> {{ checkinDate }} </nowiki>
| date of checking in
|-
| guestPairs
| <nowiki> {{ checkinDate2 }} </nowiki>
|
|-
|
| <nowiki> {{ customerNotes }} </nowiki>
| customer notes
|}

===Folio===
{
:"printdate",
:"customer" : {
::"lastname" : "last name of the customer",
::"firstname" : "first name of the customer",
::"phone" : " ",
::"mobile" : " ",
::"email" : " ",
::"address" : " "
:},
:"reservations" '''[ ]''' : {
::"id" : " ",
::"promocode" : " ",
::"datefrom" : " ",
::"dateto" : " ",
::"roomtype" : " ",
::"room" : " ",
::"price" : " ",
::"tax" : " ",
::"pricewithtax" : " ",
::"numnights" : " ",
::"numadults" : " ",
::"numchildren" : " ",
::"numadultschildren" : " ",
::"reservationdate" : " "
:},
:"roomcharges" '''[ ]''' : {
::"date" : " ",
::"description" : " ",
::"reservationid" : " ",
::"price" : " ",
::"tax" : " ",
::"pricewithtax" : " "
:},
:"roomchargestotals" : {
::"price" : " ",
::"tax" : " ",
::"pricewithtax" : " "
:},
:"extrachargestotals" : {
::"price" : " ",
::"tax" : " ",
::"pricewithtax" : " "
:},
:"paymentstotal" : " ",
:"extracharges" '''[ ]''' : {
::"date" : " ",
::"description" : " ",
::"Quantity" : " ",
::"reservationid" : " ",
::"price" : " ",
::"tax" : " ",
::"pricewithtax" : " ",
::"notes" : " "
:},
:"payments" '''[ ]''' : {
::"date" : " ",
::"method" : " ",
::"reservationid" : " ",
::"amount" : " ",
::"amountCurrency" : " ",
::"notes" : " "
:},
:"balance" : " "
}

===Tax Receipt===

{| class="wikitable"
! parent object
! parent object
! field
! it is populated with
|-
| lines
|
| <nowiki> {{ netSubtotal }}</nowiki>
| the net amount of the subtotal formatted with currency code
|-
| lines
|
| <nowiki> {{ netSubtotalCurrency }}</nowiki>
| currency of the net subtotal
|-
| lines
|
| <nowiki> {{ grossSubtotal }}</nowiki>
| the gross amount of the subtotal formatted with currency code
|-
| lines
|
| <nowiki> {{ grossSubtotalCurrency }}</nowiki>
| currency of the gross subtotal
|-
| lines
|
| <nowiki> {{ serviceStart }}</nowiki>
| starting day of reservation for that particular line of invoice
|-
| lines
|
| <nowiki> {{ serviceEnd }}</nowiki>
| ending day of reservation for that particular line of invoice
|-
| lines
|
| <nowiki> {{ serviceDuration }}</nowiki>
| duration of reservation for that particular line of invoice
|-
| lines
|
| <nowiki> {{ itemType }}</nowiki>
|
|-
| lines
|
| <nowiki> {{ numAdults }}</nowiki>
| number of adults
|-
| lines
|
| <nowiki> {{ numChildren }}</nowiki>
| number of children
|-
| lines
|
| <nowiki> {{ quantity }}</nowiki>
| number of days or items
|-
| lines
|
| <nowiki> {{ itemDescription }}</nowiki>
|
|-
| lines
|
| <nowiki> {{ grossUnitPrice }}</nowiki>
| gross price of the item
|-
| lines
|
| <nowiki> {{ grossUnitPriceCurrency }}</nowiki>
| currency of the gross price
|-
| lines
|
| <nowiki> {{ netUnitPrice }}</nowiki>
| net price of the item
|-
| lines
|
| <nowiki> {{ netUnitPriceCurrency }}</nowiki>
| currency of the net price
|-
| lines
|
| <nowiki> {{ taxes }}</nowiki>
|
|-
| lines
|
| <nowiki> {{ netSubtotalRaw }}</nowiki>
|
|-
| lines
|
| <nowiki> {{ reservationId }}</nowiki>
| Id of the reservation
|-
| lines
|
| <nowiki> {{ extraChargesNotes }}</nowiki>
| notes about extra charges
|-
|
|
| <nowiki> {{ totalNumAdults }}</nowiki>
| the total number of adults in the reservation
|-
|
|
| <nowiki> {{ totalNumChildren }}</nowiki>
| the total number of children in the reservation
|-
|
|
| <nowiki> {{ totalNumPersons }}</nowiki>
| the total number of persons in the reservation
|-
|
|
| <nowiki> {{ totalNet }}</nowiki>
| net amount of reservation
|-
|
|
| <nowiki> {{ totalNetCurrency }}</nowiki>
| currency of net amount of reservation
|-
|
|
| <nowiki> {{ totalGross }}</nowiki>
| gross amount of reservation
|-
|
|
| <nowiki> {{ totalGrossCurrency }}</nowiki>
| currency of the gross amount of reservation
|-
|
|
| <nowiki> {{ totalGrossBefore }}</nowiki>
|
|-
|
|
| <nowiki> {{ totalGrossBeforeCurrency }}</nowiki>
|
|-
|
|
| <nowiki> {{ totalUninvoicedPayments }}</nowiki>
|
|-
|
|
| <nowiki> {{ totalUninvoicedPaymentsCurrency }}</nowiki>
|
|-
|
|
| <nowiki> {{ remainingBalance }}</nowiki>
| remaining balance
|-
|
|
| <nowiki> {{ remainingBalanceCurrency }}</nowiki>
| currency of the remaining balance
|-
|
|
| <nowiki> {{ extraTaxes }}</nowiki>
| extra amount of taxes
|-
|
|
| <nowiki> {{ totalTaxes }}</nowiki>
| total amount of taxes
|-
|
|
| <nowiki> {{ totalTax }}</nowiki>
| total amount of tax
|-
|
|
| <nowiki> {{ totalTaxCurrency }}</nowiki>
| currency of the total amount of tax
|-
|
|
| <nowiki> {{ date }}</nowiki>
|
|-
|
|
| <nowiki> {{ number }}</nowiki>
|
|-
|
|
| <nowiki> {{ numbervalue }}</nowiki>
|
|-
|
|
| <nowiki> {{ series }}</nowiki>
|
|-
|
|
| <nowiki> {{ lastname }}</nowiki>
|
|-
|
|
| <nowiki> {{ firstname }}</nowiki>
|
|-
|
|
| <nowiki> {{ taxid }}</nowiki>
|
|-
|
|
| <nowiki> {{ taxid2 }}</nowiki>
|
|-
|
|
| <nowiki> {{ occupation }}</nowiki>
|
|-
|
|
| <nowiki> {{ address1 }}</nowiki>
|
|-
|
|
| <nowiki> {{ address2 }}</nowiki>
|
|-
|
|
| <nowiki> {{ city }}</nowiki>
|
|-
|
|
| <nowiki> {{ zip }}</nowiki>
|
|-
|
|
| <nowiki> {{ country }}</nowiki>
|
|-
|
|
| <nowiki> {{ rooms }}</nowiki>
|
|-
|
|
| <nowiki> {{ notes }}</nowiki>
|
|-
|
|
| <nowiki> {{ bookingAgencyReferenceCodes }}</nowiki>
|
|-
|
|
| <nowiki> {{ guests }}</nowiki>
|
|-
|
|
| <nowiki> {{ stayFrom }}</nowiki>
|
|-
|
|
| <nowiki> {{ stayTo }}</nowiki>
|
|-
|
|
| <nowiki> {{ referenceInvoiceNumber }}</nowiki>
|
|-
|
|
| <nowiki> {{ referenceInvoiceIssueDate }}</nowiki>
|
|-
|
|
| <nowiki> {{ invoiceNotes }}</nowiki>
|
|-
|
|
| <nowiki> {{ paymentMethod }}</nowiki>
|
|-
|
| reservationNotes
| <nowiki> {{ --- }}</nowiki>
|
|-
|
| payments
| <nowiki> {{ --- }}</nowiki>
|
|-
|
|
| <nowiki> {{ nights }}</nowiki>
|
|}

===Payment Receipt===

{| class="wikitable"
! Field
! it is populated with
|-
| <nowiki>{{date}}</nowiki>
| the current date
|-
| <nowiki>{{number}}</nowiki>
| the next available number of the payment receipt
|-
| <nowiki>{{numbervalue}}</nowiki>
|
|-
| <nowiki>{{series}}</nowiki>
|
|-
| <nowiki>{{lastname}}</nowiki>
| the last name of the customer included in the reservation
|-
| <nowiki>{{firstname}}</nowiki>
| the first name of the customer included in the reservation
|-
| <nowiki>{{reservation.datefrom}}</nowiki>
| the first date of the specific reservation.
|-
| <nowiki>{{reservation.dateto}}</nowiki>
| the last date of the specific reservation.
|-
| <nowiki>{{reservation.nights}}</nowiki>
| the nights included in the specific reservation
|-
| <nowiki>{{reservation.adults}}</nowiki>
| the number of adults included in the specific reservation.
|-
| <nowiki>{{reservation.children}}</nowiki>
| the number of children included in the specific reservation.
|-
| <nowiki>{{reservation.board}}</nowiki>
|
|-
| <nowiki>{{reservation.notes}}</nowiki>
| the reservation notes.
|-
| <nowiki>{{reservation.customernotes}}</nowiki>
| the customer's notes included in the reservation.
|-
| <nowiki>{{reservation.totalprice}}</nowiki>
| the total amount of the reservation.
|-
| <nowiki>{{reservation.roomtype}}</nowiki>
| the type of the room, according to the types that are registered in the system.
|-
| <nowiki>{{amount}}</nowiki>
| the amount of the payment.
|-
| <nowiki>{{paymentmethod}}</nowiki>
| the payment method of the specific payment
|-
| <nowiki>{{notes}}</nowiki>
| notes included in the payment
|-
| <nowiki>{{paymentdate}}</nowiki>
| the date that the payment is registered
|}

==OLD CONTENT==

You can easily create beautiful email templates in minutes.

You can create as many templates as you need e.g. 'Confirmation reservation' email, 'Thank you' email etc. and use these from inside the reservation to send dynamic emails to your customers. By using the dynamic emails feature you will save a lot of time in communications with your customers and you will improve customer loyalty.

Below you will find a range of variables that you can use inside the template. By using the variables, you can send relevant and personalized emails to your customers without the need of typing anything manually again and at the same time your emails look personalized as they dynamically generate all information related to your customers’ reservation.

We don't impose any design restrictions.
Got the skills to roll your own email designs? You can create your own HTML template and paste it in templates.
You do not know HTML or how to design an email? No worries, you can use the provided simple to use editor and just type in the text you want.
To create dynamic email templates go to Settings-Templates and click the New template button.

NOTICE: Variables are case sensitive and should be used exactly as they are defined in the system. e.g. {{ firstname }}. Below you will find all variables that can be used in email templates. Copy and paste them in your email templates.

[[File:variables.png]]

[[File:variables_exam.png]]

[[File:variables_exam1.png]]

[[File:variables_exam2.png]]

[[File:variables_exam3.png]]

[[File:variables_exam4.png]]

===HOW-TO's ===
* How to make a small change in an existing template

Channel Manager

2020-09-14T08:28:58Z

Milka:

== Introduction ==
A channel manager is software that allows your property to directly connect with various [[Glossary#O|OTA]]s. With this tool, you can easily update rates, allotment, availability and restrictions.

== Why it is Necessary to Have a Channel Manager ==
If your property is contracted with many OTAs, you have to login frequently to each and every one of the OTA extranets and update mostly prices and allotment (i.e. rooms to sell). This process is very time-consuming and can also lead to mistakes, as it is done manually.
But the greatest risk is to get overbookings for not being able to update in time. For example: Let's say that your hotel has contracted with booking.com and Expedia. Now suppose that the hotel has one double room left for a given night, let's say the 15th of August. At 3.00 am local time, a reservation is made in booking.com for a double room for the 15th of August. The allotment (rooms to sell) in booking.com is now automatically set to zero for this date. But the rooms to sell in Expedia for a double room in the 15th of August is still one.

If no one sets the allotment for this room type and this date in Expedia to zero (after 3.00 am in the night), it could happen that at 3.30 am, another reservation arrives, this time from Expedia, for a double room for the 15th of August. But there is no free double room any more, as it was booked 30 minutes ago in booking.com. That is an overbooking, and it is the hotel responsibility to find another accommodation for the hotel guest.

As it is practically impossible for someone to manually update all extranets all day and night (what if the contracted OTAs where 5, or 10?), a channel manager takes care the automatic update of room allotment (rooms to sell), among others.

== Channel Manager Options ==
With hoteliga you can choose among three channel managers:
* the [[hoteliga Channel Manager]], the most integrated solution with direct certified connections
* [[Parity Rate]], an affordable channel manager
* [[SiteMinder]], a very popular channel manager

{| style="width:60%;text-align:center" class="wikitable"
|-
! style="width: 40%;" |
! style="width: 20%;" | hoteliga channel manager
! style="width: 20%;" | Parity Rate
! style="width: 20%;" | SiteMinder
|-
| style="text-align:left" | Available channels
| booking.com, Expedia (Hotels.com, Expedia Affiliante Network, Travelocity), Hotelbeds, Agoda, TripAdvisor*, Airbnb
| [https://www.parityrate.com/en/integrations/ click here]
| [https://www.siteminder.com/integrations/online-travel-agencies/ click here]
|-
| style="text-align:left"|Support for multiple IDs
| YES
| NO
| NO
|-
| style="text-align:left"|Download frequency for reservations
| Instant download for Airbnb, Hotelbeds and TripAdvisor,<br/>every 1 min. for booking.com,<br/>every 5 min. for the rest
| every 5 min.
| every 5 min.
|-
| style="text-align:left"|Synchronization of available rooms (allotment)
| Real time
| Real time
| Real time
|-
| style="text-align:left"|Upload of rates, restrictions, stop sales
| YES
| YES
| YES
|-
| style="text-align:left"|Integration with hoteliga PMS
| Direct
| Indirect
| Indirect
|-
| style="text-align:left"|Billing cycle
| Monthly/Annually
| Annually Only
| Monthly
|-
| style="text-align:left"|Pay per channel
| YES
| YES
| NO
|-
| style="text-align:left"|Synchronization with vacation portals<br/>(availability only)
| Free
| Pay
| Pay
|-
|}
<nowiki>*</nowiki> requires hoteliga booking engine

After choosing the right channel manager for you, you need to decide the way that data will be synchronized between hoteliga PMS and the [[Glossary#O|OTA]]s. The following options exist:
* '''One-way connection'''. The [[Glossary#O|OTA]] only sends reservations to the hoteliga PMS, nothing else. Choose this option if you are used to manage prices/rates from the [[Glossary#O|OTA]]'s extranet.
* '''Two-way connection'''. The [[Glossary#O|OTA]] sends reservations to the hoteliga PMS, and at the same time the hoteliga PMS sends room allotment, room rate/type availability, prices and restrictions to the [[Glossary#O|OTA]]. This is the full and most complete connection one can get.

Every channel manager has different costs, please consult the [http://www.hoteliga.com hoteliga website] for more information.

== Setting Up the Channel Manager in hoteliga PMS ==
In order to start using the channel manager in hoteliga PMS, the following requirements exist:
* You need to have signed a contract and activated the connection with at least an OTA. If you don't have any contracts, see also "[[How Do I Connect With a New OTA?]]".
* You need to have selected and purchased the channel manager connection that is best for you.

The next thing to do is to contact hoteliga support in order to arrange the setup of the channels. This setup is included in the cost of channel manager connection and '''it is very important that it is done together with hoteliga staff to avoid mistakes.'''

The setup process includes the following steps:
* Ensure with hoteliga staff that access to the OTA extranet is available (or access to Parity Rate/SiteMinder extranet is available).
* Ensure with hoteliga staff that the OTA has issued credentials (username & password) for the channel manager (these credentials may be different for human and system access).
* Ensure with hoteliga staff that the property, rates and room type setup on the OTA is reasonable and compatible with hoteliga concepts.
* Activate the channel connection from inside the extranet (if applicable) with the assistance of hoteliga staff.
* Do the correct room type and rate mapping inside hoteliga channel manager configuration with the assistance of hoteliga staff.
* Upload room allotment and prices from inside the hoteliga PMS for the first time with the assistance of hoteliga staff.
* Do visual checks for random dates and room types and compare the prices and values in the OTA extranet and hoteliga PMS.

== FAQs ==
* [[How Do I Connect With a New OTA?]]
* [[How to Connect an Airbnb Account and its Listings]]
* [[How Do I Get the Credit Card Information From a Reservation?]]
* [[What Information hoteliga exchanges with Channels?]]
* [[What Kind of Restrictions are in Booking.com?]]
* [[How can the Hotel add a Room/Rate?]]
* [[How can I add or set Special Prices to each Channel?]]
* [[What happens when I get a reservation with a Special Price that is not set in hoteliga?]]
* [[How can I change the Cancelation Policy in a Channel?]]
* [[Derived / Linked Prices]]

Channel Manager

2020-09-14T08:28:27Z

Milka:

== Introduction ==
A channel manager is software that allows your property to directly connect with various [[Glossary#O|OTA]]s. With this tool, you can easily update rates, allotment, availability and restrictions.

== Why it is Necessary to Have a Channel Manager ==
If your property is contracted with many OTAs, you have to login frequently to each and every one of the OTA extranets and update mostly prices and allotment (i.e. rooms to sell). This process is very time-consuming and can also lead to mistakes, as it is done manually.
But the greatest risk is to get overbookings for not being able to update in time. For example: Let's say that your hotel has contracted with booking.com and Expedia. Now suppose that the hotel has one double room left for a given night, let's say the 15th of August. At 3.00 am local time, a reservation is made in booking.com for a double room for the 15th of August. The allotment (rooms to sell) in booking.com is now automatically set to zero for this date. But the rooms to sell in Expedia for a double room in the 15th of August is still one.

If no one sets the allotment for this room type and this date in Expedia to zero (after 3.00 am in the night), it could happen that at 3.30 am, another reservation arrives, this time from Expedia, for a double room for the 15th of August. But there is no free double room any more, as it was booked 30 minutes ago in booking.com. That is an overbooking, and it is the hotel responsibility to find another accommodation for the hotel guest.

As it is practically impossible for someone to manually update all extranets all day and night (what if the contracted OTAs where 5, or 10?), a channel manager takes care the automatic update of room allotment (rooms to sell), among others.

== Channel Manager Options ==
With hoteliga you can choose among three channel managers:
* the [[hoteliga Channel Manager]], the most integrated solution with direct certified connections
* [[Parity Rate]], an affordable channel manager
* [[SiteMinder]], a very popular channel manager

{| style="width:60%;text-align:center" class="wikitable"
|-
! style="width: 40%;" |
! style="width: 20%;" | hoteliga channel manager
! style="width: 20%;" | Parity Rate
! style="width: 20%;" | SiteMinder
|-
| style="text-align:left" | Available channels
| booking.com, Expedia (Hotels.com, Expedia Affiliante Network, Travelocity), Hotelbeds, Agoda, TripAdvisor*, Airbnb
| [https://www.parityrate.com/en/integrations/ click here]
| [https://www.siteminder.com/integrations/online-travel-agencies/ click here]
|-
| style="text-align:left"|Support for multiple IDs
| YES
| NO
| NO
|-
| style="text-align:left"|Download frequency for reservations
| Instant download for Airbnb, Hotelbeds and TripAdvisor,<br/>every 1 min. for booking.com<br/>every 5 min. for the rest
| every 5 min.
| every 5 min.
|-
| style="text-align:left"|Synchronization of available rooms (allotment)
| Real time
| Real time
| Real time
|-
| style="text-align:left"|Upload of rates, restrictions, stop sales
| YES
| YES
| YES
|-
| style="text-align:left"|Integration with hoteliga PMS
| Direct
| Indirect
| Indirect
|-
| style="text-align:left"|Billing cycle
| Monthly/Annually
| Annually Only
| Monthly
|-
| style="text-align:left"|Pay per channel
| YES
| YES
| NO
|-
| style="text-align:left"|Synchronization with vacation portals<br/>(availability only)
| Free
| Pay
| Pay
|-
|}
<nowiki>*</nowiki> requires hoteliga booking engine

After choosing the right channel manager for you, you need to decide the way that data will be synchronized between hoteliga PMS and the [[Glossary#O|OTA]]s. The following options exist:
* '''One-way connection'''. The [[Glossary#O|OTA]] only sends reservations to the hoteliga PMS, nothing else. Choose this option if you are used to manage prices/rates from the [[Glossary#O|OTA]]'s extranet.
* '''Two-way connection'''. The [[Glossary#O|OTA]] sends reservations to the hoteliga PMS, and at the same time the hoteliga PMS sends room allotment, room rate/type availability, prices and restrictions to the [[Glossary#O|OTA]]. This is the full and most complete connection one can get.

Every channel manager has different costs, please consult the [http://www.hoteliga.com hoteliga website] for more information.

== Setting Up the Channel Manager in hoteliga PMS ==
In order to start using the channel manager in hoteliga PMS, the following requirements exist:
* You need to have signed a contract and activated the connection with at least an OTA. If you don't have any contracts, see also "[[How Do I Connect With a New OTA?]]".
* You need to have selected and purchased the channel manager connection that is best for you.

The next thing to do is to contact hoteliga support in order to arrange the setup of the channels. This setup is included in the cost of channel manager connection and '''it is very important that it is done together with hoteliga staff to avoid mistakes.'''

The setup process includes the following steps:
* Ensure with hoteliga staff that access to the OTA extranet is available (or access to Parity Rate/SiteMinder extranet is available).
* Ensure with hoteliga staff that the OTA has issued credentials (username & password) for the channel manager (these credentials may be different for human and system access).
* Ensure with hoteliga staff that the property, rates and room type setup on the OTA is reasonable and compatible with hoteliga concepts.
* Activate the channel connection from inside the extranet (if applicable) with the assistance of hoteliga staff.
* Do the correct room type and rate mapping inside hoteliga channel manager configuration with the assistance of hoteliga staff.
* Upload room allotment and prices from inside the hoteliga PMS for the first time with the assistance of hoteliga staff.
* Do visual checks for random dates and room types and compare the prices and values in the OTA extranet and hoteliga PMS.

== FAQs ==
* [[How Do I Connect With a New OTA?]]
* [[How to Connect an Airbnb Account and its Listings]]
* [[How Do I Get the Credit Card Information From a Reservation?]]
* [[What Information hoteliga exchanges with Channels?]]
* [[What Kind of Restrictions are in Booking.com?]]
* [[How can the Hotel add a Room/Rate?]]
* [[How can I add or set Special Prices to each Channel?]]
* [[What happens when I get a reservation with a Special Price that is not set in hoteliga?]]
* [[How can I change the Cancelation Policy in a Channel?]]
* [[Derived / Linked Prices]]

Channel Manager

2020-09-14T08:28:08Z

Milka:

== Introduction ==
A channel manager is software that allows your property to directly connect with various [[Glossary#O|OTA]]s. With this tool, you can easily update rates, allotment, availability and restrictions.

== Why it is Necessary to Have a Channel Manager ==
If your property is contracted with many OTAs, you have to login frequently to each and every one of the OTA extranets and update mostly prices and allotment (i.e. rooms to sell). This process is very time-consuming and can also lead to mistakes, as it is done manually.
But the greatest risk is to get overbookings for not being able to update in time. For example: Let's say that your hotel has contracted with booking.com and Expedia. Now suppose that the hotel has one double room left for a given night, let's say the 15th of August. At 3.00 am local time, a reservation is made in booking.com for a double room for the 15th of August. The allotment (rooms to sell) in booking.com is now automatically set to zero for this date. But the rooms to sell in Expedia for a double room in the 15th of August is still one.

If no one sets the allotment for this room type and this date in Expedia to zero (after 3.00 am in the night), it could happen that at 3.30 am, another reservation arrives, this time from Expedia, for a double room for the 15th of August. But there is no free double room any more, as it was booked 30 minutes ago in booking.com. That is an overbooking, and it is the hotel responsibility to find another accommodation for the hotel guest.

As it is practically impossible for someone to manually update all extranets all day and night (what if the contracted OTAs where 5, or 10?), a channel manager takes care the automatic update of room allotment (rooms to sell), among others.

== Channel Manager Options ==
With hoteliga you can choose among three channel managers:
* the [[hoteliga Channel Manager]], the most integrated solution with direct certified connections
* [[Parity Rate]], an affordable channel manager
* [[SiteMinder]], a very popular channel manager

{| style="width:60%;text-align:center" class="wikitable"
|-
! style="width: 40%;" |
! style="width: 20%;" | hoteliga channel manager
! style="width: 20%;" | Parity Rate
! style="width: 20%;" | SiteMinder
|-
| style="text-align:left" | Available channels
| booking.com, Expedia (Hotels.com, Expedia Affiliante Network, Travelocity), Hotelbeds, Agoda, TripAdvisor*, Airbnb
| [https://www.parityrate.com/en/integrations/ click here]
| [https://www.siteminder.com/integrations/online-travel-agencies/ click here]
|-
| style="text-align:left"|Support for multiple IDs
| YES
| NO
| NO
|-
| style="text-align:left"|Download frequency for reservations
| Instant download for for Airbnb, Hotelbeds and TripAdvisor,<br/>every 1 min. for booking.com<br/>every 5 min. for the rest
| every 5 min.
| every 5 min.
|-
| style="text-align:left"|Synchronization of available rooms (allotment)
| Real time
| Real time
| Real time
|-
| style="text-align:left"|Upload of rates, restrictions, stop sales
| YES
| YES
| YES
|-
| style="text-align:left"|Integration with hoteliga PMS
| Direct
| Indirect
| Indirect
|-
| style="text-align:left"|Billing cycle
| Monthly/Annually
| Annually Only
| Monthly
|-
| style="text-align:left"|Pay per channel
| YES
| YES
| NO
|-
| style="text-align:left"|Synchronization with vacation portals<br/>(availability only)
| Free
| Pay
| Pay
|-
|}
<nowiki>*</nowiki> requires hoteliga booking engine

After choosing the right channel manager for you, you need to decide the way that data will be synchronized between hoteliga PMS and the [[Glossary#O|OTA]]s. The following options exist:
* '''One-way connection'''. The [[Glossary#O|OTA]] only sends reservations to the hoteliga PMS, nothing else. Choose this option if you are used to manage prices/rates from the [[Glossary#O|OTA]]'s extranet.
* '''Two-way connection'''. The [[Glossary#O|OTA]] sends reservations to the hoteliga PMS, and at the same time the hoteliga PMS sends room allotment, room rate/type availability, prices and restrictions to the [[Glossary#O|OTA]]. This is the full and most complete connection one can get.

Every channel manager has different costs, please consult the [http://www.hoteliga.com hoteliga website] for more information.

== Setting Up the Channel Manager in hoteliga PMS ==
In order to start using the channel manager in hoteliga PMS, the following requirements exist:
* You need to have signed a contract and activated the connection with at least an OTA. If you don't have any contracts, see also "[[How Do I Connect With a New OTA?]]".
* You need to have selected and purchased the channel manager connection that is best for you.

The next thing to do is to contact hoteliga support in order to arrange the setup of the channels. This setup is included in the cost of channel manager connection and '''it is very important that it is done together with hoteliga staff to avoid mistakes.'''

The setup process includes the following steps:
* Ensure with hoteliga staff that access to the OTA extranet is available (or access to Parity Rate/SiteMinder extranet is available).
* Ensure with hoteliga staff that the OTA has issued credentials (username & password) for the channel manager (these credentials may be different for human and system access).
* Ensure with hoteliga staff that the property, rates and room type setup on the OTA is reasonable and compatible with hoteliga concepts.
* Activate the channel connection from inside the extranet (if applicable) with the assistance of hoteliga staff.
* Do the correct room type and rate mapping inside hoteliga channel manager configuration with the assistance of hoteliga staff.
* Upload room allotment and prices from inside the hoteliga PMS for the first time with the assistance of hoteliga staff.
* Do visual checks for random dates and room types and compare the prices and values in the OTA extranet and hoteliga PMS.

== FAQs ==
* [[How Do I Connect With a New OTA?]]
* [[How to Connect an Airbnb Account and its Listings]]
* [[How Do I Get the Credit Card Information From a Reservation?]]
* [[What Information hoteliga exchanges with Channels?]]
* [[What Kind of Restrictions are in Booking.com?]]
* [[How can the Hotel add a Room/Rate?]]
* [[How can I add or set Special Prices to each Channel?]]
* [[What happens when I get a reservation with a Special Price that is not set in hoteliga?]]
* [[How can I change the Cancelation Policy in a Channel?]]
* [[Derived / Linked Prices]]

Channel Manager

2020-09-14T08:16:25Z

Milka:

== Introduction ==
A channel manager is software that allows your property to directly connect with various [[Glossary#O|OTA]]s. With this tool, you can easily update rates, allotment, availability and restrictions.

== Why it is Necessary to Have a Channel Manager ==
If your property is contracted with many OTAs, you have to login frequently to each and every one of the OTA extranets and update mostly prices and allotment (i.e. rooms to sell). This process is very time-consuming and can also lead to mistakes, as it is done manually.
But the greatest risk is to get overbookings for not being able to update in time. For example: Let's say that your hotel has contracted with booking.com and Expedia. Now suppose that the hotel has one double room left for a given night, let's say the 15th of August. At 3.00 am local time, a reservation is made in booking.com for a double room for the 15th of August. The allotment (rooms to sell) in booking.com is now automatically set to zero for this date. But the rooms to sell in Expedia for a double room in the 15th of August is still one.

If no one sets the allotment for this room type and this date in Expedia to zero (after 3.00 am in the night), it could happen that at 3.30 am, another reservation arrives, this time from Expedia, for a double room for the 15th of August. But there is no free double room any more, as it was booked 30 minutes ago in booking.com. That is an overbooking, and it is the hotel responsibility to find another accommodation for the hotel guest.

As it is practically impossible for someone to manually update all extranets all day and night (what if the contracted OTAs where 5, or 10?), a channel manager takes care the automatic update of room allotment (rooms to sell), among others.

== Channel Manager Options ==
With hoteliga you can choose among three channel managers:
* the [[hoteliga Channel Manager]], the most integrated solution with direct certified connections
* [[Parity Rate]], an affordable channel manager
* [[SiteMinder]], a very popular channel manager

{| style="width:60%;text-align:center" class="wikitable"
|-
! style="width: 40%;" |
! style="width: 20%;" | hoteliga channel manager
! style="width: 20%;" | Parity Rate
! style="width: 20%;" | SiteMinder
|-
| style="text-align:left" | Available channels
| booking.com, Expedia (Hotels.com, Expedia Affiliante Network, Travelocity), Hotelbeds, Agoda, TripAdvisor*, Airbnb
| [https://www.parityrate.com/en/integrations/ click here]
| [https://www.siteminder.com/integrations/online-travel-agencies/ click here]
|-
| style="text-align:left"|Support for multiple IDs
| YES
| NO
| NO
|-
| style="text-align:left"|Download frequency for reservations
| Instant download for booking.com<br/>every 10 min. for the rest
| every 10 min.
| every 5 min.
|-
| style="text-align:left"|Synchronization of available rooms (allotment)
| Real time
| Real time
| Real time
|-
| style="text-align:left"|Upload of rates, restrictions, stop sales
| YES
| YES
| YES
|-
| style="text-align:left"|Integration with hoteliga PMS
| Direct
| Indirect
| Indirect
|-
| style="text-align:left"|Billing cycle
| Monthly/Annually
| Annually Only
| Monthly
|-
| style="text-align:left"|Pay per channel
| YES
| YES
| NO
|-
| style="text-align:left"|Synchronization with vacation portals<br/>(availability only)
| Free
| Pay
| Pay
|-
|}
<nowiki>*</nowiki> requires hoteliga booking engine

After choosing the right channel manager for you, you need to decide the way that data will be synchronized between hoteliga PMS and the [[Glossary#O|OTA]]s. The following options exist:
* '''One-way connection'''. The [[Glossary#O|OTA]] only sends reservations to the hoteliga PMS, nothing else. Choose this option if you are used to manage prices/rates from the [[Glossary#O|OTA]]'s extranet.
* '''Two-way connection'''. The [[Glossary#O|OTA]] sends reservations to the hoteliga PMS, and at the same time the hoteliga PMS sends room allotment, room rate/type availability, prices and restrictions to the [[Glossary#O|OTA]]. This is the full and most complete connection one can get.

Every channel manager has different costs, please consult the [http://www.hoteliga.com hoteliga website] for more information.

== Setting Up the Channel Manager in hoteliga PMS ==
In order to start using the channel manager in hoteliga PMS, the following requirements exist:
* You need to have signed a contract and activated the connection with at least an OTA. If you don't have any contracts, see also "[[How Do I Connect With a New OTA?]]".
* You need to have selected and purchased the channel manager connection that is best for you.

The next thing to do is to contact hoteliga support in order to arrange the setup of the channels. This setup is included in the cost of channel manager connection and '''it is very important that it is done together with hoteliga staff to avoid mistakes.'''

The setup process includes the following steps:
* Ensure with hoteliga staff that access to the OTA extranet is available (or access to Parity Rate/SiteMinder extranet is available).
* Ensure with hoteliga staff that the OTA has issued credentials (username & password) for the channel manager (these credentials may be different for human and system access).
* Ensure with hoteliga staff that the property, rates and room type setup on the OTA is reasonable and compatible with hoteliga concepts.
* Activate the channel connection from inside the extranet (if applicable) with the assistance of hoteliga staff.
* Do the correct room type and rate mapping inside hoteliga channel manager configuration with the assistance of hoteliga staff.
* Upload room allotment and prices from inside the hoteliga PMS for the first time with the assistance of hoteliga staff.
* Do visual checks for random dates and room types and compare the prices and values in the OTA extranet and hoteliga PMS.

== FAQs ==
* [[How Do I Connect With a New OTA?]]
* [[How to Connect an Airbnb Account and its Listings]]
* [[How Do I Get the Credit Card Information From a Reservation?]]
* [[What Information hoteliga exchanges with Channels?]]
* [[What Kind of Restrictions are in Booking.com?]]
* [[How can the Hotel add a Room/Rate?]]
* [[How can I add or set Special Prices to each Channel?]]
* [[What happens when I get a reservation with a Special Price that is not set in hoteliga?]]
* [[How can I change the Cancelation Policy in a Channel?]]
* [[Derived / Linked Prices]]

How to Integrate the Search Widget in Your Website

2019-10-23T16:40:23Z

Milka: /* 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.

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_roomType_Id.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:1200px-Result_roomType_Id.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].'''

File:1200px-Result roomType Id.png

2019-10-23T16:39:46Z

Milka:

How to Integrate the Search Widget in Your Website

2019-10-23T16:27:23Z

Milka: /* 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.

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_roomType_Id.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].'''

File:Css background change roomType Id.png

2019-10-23T16:26:47Z

Milka: Updated name

Updated name

File:Room Type Id.png

2019-10-23T16:23:44Z

Milka:

How to Integrate the Search Widget in Your Website

2019-10-23T16:13:43Z

Milka: /* 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.

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 Integrate the Search Widget in Your Website

2019-10-23T16:13:24Z

Milka: /* 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].'''

File:Roomtype by id.png

2019-10-23T16:12:51Z

Milka:

File:Roomtype by ID.png

2019-10-23T16:02:17Z

Milka: Milka uploaded a new version of File:Roomtype by ID.png

File:Roomtype by ID.png

2019-10-23T15:49:30Z

Milka: Milka uploaded a new version of File:Roomtype by ID.png

File:Roomtype by ID.png

2019-10-23T15:48:51Z

Milka: Milka uploaded a new version of File:Roomtype by ID.png

How to Add the Booking Engine Search Widget in Your Website

2019-10-23T15:09:11Z

Milka: /* 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.

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-10-23T15:08:55Z

Milka: /* 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.

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-10-23T15:08:26Z

Milka: /* 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.

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-10-23T15:08:12Z

Milka: /* 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-10-23T15:07:37Z

Milka: /* 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.

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 Integrate the Search Widget in Your Website

2019-10-23T14:48:58Z

Milka: /* 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.

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 Integrate the Search Widget in Your Website

2019-10-23T14:48:31Z

Milka: /* 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.

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 Integrate the Search Widget in Your Website

2019-10-23T14:47:54Z

Milka: /* 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.

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 Integrate the Search Widget in Your Website

2019-10-23T14:40:04Z

Milka: /* 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 Integrate the Search Widget in Your Website

2019-10-23T14:37:03Z

Milka: /* 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.

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].'''