diff --git a/README.md b/README.md
index a0ea2d0..89d6cef 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
# adha-template-base
-The purpose of this repository is to contain FHIR implementation guide template styling that adds Australian Digital Health Agency specific branding (like logo, colours, links).
+This repo provides template and style *overrides* for FHIR Implementation Guides, to apply the Australian Digital Health Agency's Digital Health Developer Portal (website) branding: header and footer, logo, colour scheme, typography.
-It will directly inherit from the HL7 International IG Template Base (https://github.com/HL7/ig-template-base) which includes all of the scripts, layouts, etc. to produce a FHIR implementation guide. It is intended to serve as a base for most Agency HL7-style implementation guide publications.
+This repo directly inherits from the HL7 International IG Template Base (https://github.com/HL7/ig-template-base) which includes all of the scripts, layouts, etc. to produce a FHIR Implementation Guide. It is intended to serve as a base for most Agency HL7-style implementation guide publications.
## Package ID
package id = `adha.template.base`
@@ -10,4 +10,58 @@ package id = `adha.template.base`
`http://ns.electronichealth.net.au/fhir/Template/adha.template.base`
## Changelog
-Refer to [changelog](CHANGELOG.md)
\ No newline at end of file
+Refer to [changelog](CHANGELOG.md)
+
+## Developer Portal branding
+This repo replaces the standard header and footer elements with custom header and footer elements (with custom IDs and classes) for branding purposes.
+
+## Developer Portal iFrame embed option
+This repo provides handling for an *option* to embed FHIR IGs in Developer Portal (website) pages via iFrames.
+
+Therefore, FHIR IGs can be displayed on the Developer Portal (website) in 2 ways: as static HTML content and/or as embedded iFrame content.
+
+This repo provides the IDs, classes, and CSS styles for the iFrame context, and (importantly) requires downstream repos (which use this repo) to add a JavaScript snippet (below) to activate the iFrame integration.
+
+The JavaScript snippet does 3 things:
+
+1. adds a body class `framed` or `unframed` which is used by CSS to hide the header and footer when the content is displayed in an iFrame
+2. when the user resizes the parent window, the child iFrame content is also resized
+3. when the user clicks on "internal" links (which are links within the iFrame, pointing to destinations within the iFrame) the link is handled by the parent window (not by the iFrame content).
+
+The JavaScript snippet can be added to the `fhir.js` file in the downstream repo:
+
+ const linkListener = (e) => ((d) => {
+ const eHref = new URL(e.href);
+ const eOrigin = eHref.origin;
+ const frameOrigin = window.top.location.origin;
+ if (frameOrigin !== eOrigin) {
+ d.preventDefault();
+ }
+ });
+
+ function unFramed() {
+ try {
+ return window.self == window.top;
+ } catch (e) {
+ return true;
+ }
+ }
+
+ if (unFramed()) {
+ document.body.classList.add("unframed");
+ } else {
+ document.body.classList.add("framed");
+ document.querySelectorAll('a').forEach(function(e) {
+ e.addEventListener('click', linkListener(e));
+ });
+ }
+
+ /*! iFrame Resizer (iframeSizer.contentWindow.min.js) - v4.3.7 - 2023-09-14
+ * Desc: Include this file in any page being loaded into an iframe
+ * to force the iframe to resize to the content size.
+ * Requires: iframeResizer.min.js on host page.
+ * Copyright: (c) 2023 David J. Bradshaw - dave@bradshaw.net
+ * License: MIT
+ */
+ !function(a){if("undefined"!=typeof window){var r=!0,P="",u=0,c="",s=null,D="",d=!1,j={resize:1,click:1},l=128,q=!0,f=1,n="bodyOffset",m=n,H=!0,W="",h={},g=32,B=null,p=!1,v=!1,y="[iFrameSizer]",J=y.length,w="",U={max:1,min:1,bodyScroll:1,documentElementScroll:1},b="child",V=!0,X=window.parent,T="*",E=0,i=!1,Y=null,O=16,S=1,K="scroll",M=K,Q=window,G=function(){x("onMessage function not defined")},Z=function(){},$=function(){},_={height:function(){return x("Custom height calculation function not defined"),document.documentElement.offsetHeight},width:function(){return x("Custom width calculation function not defined"),document.body.scrollWidth}},ee={},te=!1;try{var ne=Object.create({},{passive:{get:function(){te=!0}}});window.addEventListener("test",ae,ne),window.removeEventListener("test",ae,ne)}catch(e){}var oe,o,I,ie,N,A,C={bodyOffset:function(){return document.body.offsetHeight+ye("marginTop")+ye("marginBottom")},offset:function(){return C.bodyOffset()},bodyScroll:function(){return document.body.scrollHeight},custom:function(){return _.height()},documentElementOffset:function(){return document.documentElement.offsetHeight},documentElementScroll:function(){return document.documentElement.scrollHeight},max:function(){return Math.max.apply(null,e(C))},min:function(){return Math.min.apply(null,e(C))},grow:function(){return C.max()},lowestElement:function(){return Math.max(C.bodyOffset()||C.documentElementOffset(),we("bottom",Te()))},taggedElement:function(){return be("bottom","data-iframe-height")}},z={bodyScroll:function(){return document.body.scrollWidth},bodyOffset:function(){return document.body.offsetWidth},custom:function(){return _.width()},documentElementScroll:function(){return document.documentElement.scrollWidth},documentElementOffset:function(){return document.documentElement.offsetWidth},scroll:function(){return Math.max(z.bodyScroll(),z.documentElementScroll())},max:function(){return Math.max.apply(null,e(z))},min:function(){return Math.min.apply(null,e(z))},rightMostElement:function(){return we("right",Te())},taggedElement:function(){return be("right","data-iframe-width")}},re=(oe=Ee,N=null,A=0,function(){var e=Date.now(),t=O-(e-(A=A||e));return o=this,I=arguments,t<=0||O