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

From hoteliga
Revision as of 12:58, 1 September 2020 by Nerdy (talk | contribs) (→‎Introduction)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Introduction

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

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

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

Implementation

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

  • Bootstrap css
  • jQuery
  • Custombox css
  • Custombox js and
  • Custombox legacy js

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

Implementations steps

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

2. Include the files in your website, ex: 

<link rel="stylesheet" href="custombox/custombox.min.css" />
<script src="custombox/custombox.min.js"></script>
<script src="custombox/custombox.legacy.min.js"></script>

3. Add this inside your <body> tag: 

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

4. Insert this code inside your Site.js 

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

Customization

Hoteliga popup supports 10 optimizations:

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

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

Find demos by clicking here.

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

3. backgroundColor – Set background color for the popup

4. textColor – Set text color for the message

5. textFontFamily – Set the font family for the message

6. textFontSize – Set font size for the message

7. buttonBackground – Set button background color

8. buttonTextColor – Set button text color

9. domain – Your domain name

10. apiEndpoint –

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

Common questions

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

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

Retrieved from "http://help.hoteliga.com/en/index.php?title=How_to_Integrate_a_Popup_Window_in_Your_Website_With_an_Offer_From_Your_hoteliga_Account&oldid=2257"