Difference between revisions of "Booking Page include external pictures or information in a tinybox pop up"

From Booking Automation Wiki
Jump to: navigation, search
m
 
Line 3: Line 3:
 
<div class="heading">Using Pop ups</div>
 
<div class="heading">Using Pop ups</div>
 
  This page explains how to include external pictures or information in a pop up
 
  This page explains how to include external pictures or information in a pop up
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>'''Requires:''' Knowledge of HTML, CSS (Javascript)
+
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>'''Requires:''' Knowledge of HTML, CSS (Javascript)
  
 
The tinybox lightbox script is available for inclusion on your booking page.
 
The tinybox lightbox script is available for inclusion on your booking page.

Latest revision as of 10:01, 31 July 2020

Using Pop ups
This page explains how to include external pictures or information in a pop up

{{#fas:lightbulb}} Requires: Knowledge of HTML, CSS (Javascript)

The tinybox lightbox script is available for inclusion on your booking page. The popup can show images, html content or external pages in an iframe.

To use the script include the following in the HEAD of your booking page at the menu {{#fas:cog}} (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE >DEVELOPERS "Insert in HTML <HEAD>":

<link rel="stylesheet" href="include/tinybox2/style.css" type="text/css" /><script type="text/javascript" src="include/tinybox2/tinybox.js">


Include the TINYBOX in one of your HTML descriptions like the following example changing the TINYBOX parameters to include your content:

<span onclick="TINY.box.show({iframe:'https://www.bookingautomation.com', width:750, height:450})" style="cursor:pointer">Click Here</span>


If you are using iframe to include external content make sure to use https. Many browsers will block insecure content in a secure page.