Click here to enrol in a free course on how to promote Fixflo to your occupiers 

The Fixflo occupier 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:

Notes:

• The plugin is designed and tested to operate within an iframe of height 700px. For the 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

(Add in '<' as the first character to implement)

NOTE: Do not use the example data from the 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"

---

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 played 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 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>