Plugin Example

The Fixflo tenant repair reporting system is typically offered to tenants via a url (ie using an anchor)

https://[custom domain].fixflo.com

However, there are scenarios where it is more appropriate to offer tenant repair reporting using the iframe plugin

Once an agency is registered, the tenant repair reporting system may be accessed using the plugin instantiated using an iframe

<iframe scrollbars="no" style="border:0px;width:100%;height:700px;overflow:hidden" src="https://[custom domain].fixflo.com/issue/plugin"></iframe>

Additional parameters may be supplied to the source url to pre-populate certain fields. Please ensure the property values are correctly encoded. The list of supported parameters is as follows:

Parameter Description
address.addressline1 Address line 1
address.addressline2 Address line 2
address.town The address town
address.postcode The address postcode
title The tenant’s title. eg Mr/Mrs/Ms/Dr
firstname The tenant’s forename
surname The tenant’s surname
email The tenant’s email address
contactno The tenant’s contact telephone number
callbackid This optional value (max 40 chars) is not displayed to customers but is submitted and saved if the issue is submitted. Similarly this value is not displayed in any issue report but may be read via the API. This value is useful to identify the source of any prefilled data so that on submission any potential data updates can be handled correctly.

Notes

  • The plugin is designed and tested to operate within an iframe of height 700px. For best user experience overflow:hidden should be applied to the iframe
  • The plugin is designed to be responsive vertically. Therefore the width may be set to anything sensible
  • The attribute scrollbars="no" is implemented to support some legacy browsers
  • Please remember that only requests using SSL are accepted (ie https)

Example HTML Code

<iframe id="the_frame_id" scrollbars="no" style="border:0px;width:100%;height:700px;overflow:hidden" src="https://demo.fixflo.com/issue/Plugin?&email=user%40example.com&Address.AddressLine1=1%20Example&Address1&Address.AddressLine2=Example&20Address2&Address.Town=Example%20Town&Address.PostCode=EX4%209LE&Title=Mr&firstName=Firstname&surname=Surname&contactNo=1234567890"></iframe>

Implementation

Making the plug-in responsive

While the content of the Fixflo plugin is responsive the parent iframe is not by default.

To make the iframe responsive (for use by mobile handsets for example) some additional javascript needs to be included in the parent webpage.

NOTE: The following javascript is provided to convey intent and method. Actual implementation may include the use of frameworks, additional error handling or browser quirks support.

Resizing the iframe

To make the iframe fit the device size exactly the following JavaScript is suggested. This JavaScript should be placed at the end of the web page just before closing the body tag.


<script>
function resizeIframe() {
     	var el = document.getElementById("the_frame_id");
     	el.style.width = "100%";
     	el.style.height = window.innerHeight + "px";
     	el.width = "100%";
     	el.height = window.innerHeight + "px";
}

window.onresize = resizeIframe;
resizeIframe();
</script>

Scrolling the viewport

While resizing the iframe provides a better user experience it might still be possible for an end user to scroll part of the iframe out of the viewport. If the user subsequently interacts with the visible content of the iframe important content might not be visible.

Only the parent of the iframe can bring the iframe back into view.

The parent document can listen for user interaction with the child iframe (i.e. receive messages) and respond accordingly.
In other words, when a user clicks on a prev/next button or otherwise causes a modal to appear, a message is sent from the iframe source page to the parent. This allows the parent to scroll the iframe into view, if required.


<script>
function receiveMessage(event) {
        //// alert("message received");
     	if (event.origin.indexOf(".fixflo.com") === -1) return;
     	if (event.data == "fixflo.scroll.top") {
     		var el = document.getElementById("the_frame_id");
                el.scrollIntoView();
       }
}

window.addEventListener("message", receiveMessage, false);
</script>