The RI Resource Hub’s online tools can be embedded in any website that supports Javascript (JS) and iFrames. An iFrame is an inline frame that places another HTML document in a frame of a web page. Said another way, it allows one website to embed part of itself into another website.

This architecture allows the Resource Finder and the Career Planner to live on their own domain (http://llagentri.org/) and be embedded into any number of other websites. The benefit of this is that there isn’t a need to replicate or copy the codebase each time a new site wants to use RI Resource Hub’s online tools. Instead the Partner places a small snippet of HTML and JS into their website and tools appear.

To embed the RI Resource Hub’s online tools in a website, the website administrator will:

  • Insert JavaScript that supports login and account creation.  This script can be inserted in the page as plain text (in WordPress, make sure you are in the “Text” rather than “Visual” tab of the Page editor).
  • Edit the iframe code, the last line of the script, setting width accordingly.  The iframe is responsive (adjusts to accommodate screen size of devices from computers to smart phones) so there is flexibility in the size allotted to the iframe on a webpage. The current settings are for full-size, 800 pixel wide display. If the website into which the iframe is embedded is responsive, the iframe will adjust as the website adjusts.  If the website into which the iframe is embedded is not responsive and space is constrained, the iframe could be displayed at a smaller width.

Resource Finder Script

<script type="text/javascript" src="//riresourcehub.org/wp-content/plugins/myplugin/js/main.js?height=950&width=800" id="main_script"></script>

Career Planner Script

<script type="text/javascript" src="//riresourcehub.org/wp-content/plugins/myplugin/js/planscript.js?height=950&width=950" id="main_script"></script>