A Guide to Adding a Family Portal Button to Your Website
Adding a Family Portal Button to your Website
We recommend sending this document to your web-developer
Setting up the Family Portal button is quick and easy with these two steps:
Step One
Install StoriiCare’s JavaScript button library. To install the library, paste the following code into the <head> or into the end of the <body> tag of your website's HTML page:
<!-- StoriiCare Family Portal Button -->
<script type="text/javascript">
!function () { var dom_parser = new DOMParser, base_url = "https://storiicare.com", make_request = function (e, t) { var n = new XMLHttpRequest; n.addEventListener("load", t), n.open("GET", e), n.setRequestHeader("X-Host", window.location ? window.location.href : "Unknown"), n.send() }, stylize_button = function (element) { if (element instanceof HTMLElement) { var size = element.dataset.size || 12, type = element.dataset.type || 1, portal_id = encodeURIComponent(element.dataset.portal_id || ""), alignment = element.dataset.alignment || "center"; make_request(base_url + "/business_utils/relatives_gateway/raw?text_size=" + size + "&text_type=" + type + "&portal_id=" + portal_id, function (xhr) { for (var doc = dom_parser.parseFromString(xhr.target.response, "text/html"), div = doc.getElementsByTagName("div")[0], script_tag = doc.getElementsByTagName("script")[0]; element.firstChild;)element.removeChild(element.firstChild); element.appendChild(div), eval(script_tag.innerHTML) }) } }, attach_observer = function (e) { window.MutationObserver && new MutationObserver(function (t) { t.forEach(function (t) { "attributes" == t.type && stylize_button(e) }) }).observe(e, { attributes: !0 }) }, onButtonReceived = function (e) { make_request(base_url + "/business_utils/relatives_gateway_styles", function (e) { var t = dom_parser.parseFromString(e.target.response, "text/html"); document.getElementsByTagName("head")[0].appendChild(t.all[2]) }); for (var t = document.getElementsByClassName("storii-care-relatives-login-button"), n = 0; n < t.length; n++) { var a = t[n]; stylize_button(a), attach_observer(a) } a = document.getElementById("storii-care-relatives-login-button"); stylize_button(a), attach_observer(a) }, start = onButtonReceived; "complete" === document.readyState || "loaded" === document.readyState ? start() : document.addEventListener("DOMContentLoaded", start) }();
</script>
Step Two
Add a <div class="storii-care-relatives-login-button" data-type="2" data-size="0.75" data-portal_id="" ></div> tag to a desired place in <body>. In our example, we will put it right after the features list of Why Choose Us section.
That's it! Once uploaded, you should now see the Family Portal button on your webpage just like in the example below.
Renaming, resizing, linking and fitting the button
The <div> tag takes 3 data attributes:
type - if type is “2”, button text is set to “Family Portal”, otherwise the text is “Relative’s Gateway”
size - The size of the button specified in rem. The value can be given with decimal places i.e. 1.5. By default the value is set to 12.
portal id - The portal id quotes is where you should enter your unique brand name if you would like your branded family portal to be linked. e.g. data-portal_id="example"
Both attributes were used in the example <div> above.
By default, the button is horizontally centered. If you wish to align it to the right or the left of the container, add float style to the <div> tag i.e. use style=”float: left” to align the button to the left.
Testing the button
To keep things simple, whenever you change data attributes on the <div> tag i.e. data-type, the button will automatically apply the changes.