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

From Beds24 Wiki
Jump to navigation Jump to search
 
Line 16: Line 16:
 
Include the TINYBOX in one of your HTML descriptions like the following example changing the TINYBOX parameters to include your content:
 
Include the TINYBOX in one of your HTML descriptions like the following example changing the TINYBOX parameters to include your content:
  
<code><nowiki><span onclick="TINY.box.show({iframe:'https://www.beds24.com', width:750, height:450})" style="cursor:pointer">Click Here</span></nowiki>
+
<code><nowiki><span onclick="TINY.box.show({iframe:'https://beds24.com', width:750, height:450})" style="cursor:pointer">Click Here</span></nowiki>
 
</code>
 
</code>
  
  
 
If you are using iframe to include external content make sure to use https. Many browsers will block insecure content in a secure page.
 
If you are using iframe to include external content make sure to use https. Many browsers will block insecure content in a secure page.

Latest revision as of 12:50, 9 September 2020

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

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 (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://beds24.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.