In this article we will explain how the FocalPoint E-Catalog can be integrated into your current website using iFrames or Links.
The base src URL for accessing the E-Catalog is
https://focalpointportal.com/cp/Catalog/rental
From here you can either view Categories (FocalPoint Groups)
/Categories.aspx
Or your Rentals (FocalPoint Rate Tables)
/Rental/Default.aspx
So the E-Catalog knows what to display we use URL parameters
PID = Your unique portal ID provided by Visum *Required
SID = The stores unique number with in FocalPoint *Optional
CAT = The groups unique ID number with in FocalPoint *Optional only usable with Categories
PageSize = The number of items in the Rental List to show per page *Optional only usable with Rentals
Embedded = Hides the Title bar with in the iFrame *Required with value of True
HTML Links
For example if you want a link to display your categories and you portal id was 123 your href URL would be
https://focalpointportal.com/cp/Catalog/Rental/Categories.aspx?pid=123&sid=1
Or you want to display your rental items your link href URL would be
https://focalpointportal.com/cp/Catalog/Rental/Default.aspx?pid=123&sid=1
More information about HTML Links can be found here
iFrame Integration
*With iOS browsers like Safari it is not recommend to use an iFrame as you may have issues
For example if you want a iFrame to display your categories and you portal id was 123 your src URL would be
https://focalpointportal.com/cp/Catalog/Rental/Categories.aspx?pid=123&sid=1&embedded=true
Or you want to display your rental items your iFrame src URL would be
https://focalpointportal.com/cp/Catalog/Rental/Default.aspx?pid=123&sid=1&embedded=true
The ending HTML code for the iFrame would be
<iframe id="FocalPoint" src="https://focalpointportal.com/cp/Catalog/Rental/Categories.aspx?pid=123&sid=1&Embedded=true" style="width: 100%; height: 900px; border-width: 0px;"></iframe>
If your are using WordPress here is a good article on How To Embed WordPress iFrame
Another tip is if you are wanting the categories or rentals to not have a fixed height but to be scrollable with in the browser window add this bit of code in your web page
<script language="javascript" type="text/javascript">
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function FocalPointIframe() {
var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
height -= pageY(document.getElementById('FocalPoint')) + buffer;
height = (height < 0) ? 0 : height;
document.getElementById('FocalPoint').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
</script>
And then add an onload event to your iFrame
<iframe id="FocalPoint" src="https://focalpointportal.com/cp/Catalog/Rental/Categories.aspx?pid=123&sid=1&Embedded=True" style="width: 100%; border-width: 0px;" onload="FocalPointIframe();"></iframe>
