Bring the web into your presentations. This widget allows you to insert a web page into your Adobe Captivate 5.x web projects.
View Live Demo
The Captivate 6.x version can be found here.
What can it do?
It can insert a web page using a:
- Web address such as http://CaptivateDev.com
- Relative Path such as “myfolder/myHTMLFile.htm”
- HTML string such as “<html><head></head><body>Hello Wolrd Wide Web!</body></html>”
- Captivate User Variable such as $$UserVariable$$ that would contain the html syntax in a string like the above.
- It can also interpret variables so you could have a string or a URL such as http://mywebsite.com?user=$$myUserVariable$$
- You can have two-way communication between the web page and Captivate 5 if you know JavaScript.
Use Cases:
- Inserting PDF files (embedded into your web page).
- Displaying Legacy AS2 .swf files (such as Articulate Presenter files or Captivate 3 or 4 files) in your AS3 Captivate 5 projects.
- Showing corporate policies that must be kept to date. No need to republish your Captivate 5 project every time a policy changes if you’re displaying a web page that already has the current info from your corporate intranet.
- Display a Google Form, Spreadsheet, or Doc that shows up-to-date information.
- Create your own web mashups with Facebook, or Twitter and place them inside of your presentation.
- Have users take a training evaluation survey from http://www.surveymonkey.com/ or http://polldaddy.com all within Captivate.
- Whatever you can stuff into a web page, you can now show inside of Captivate.
Requirements
This widget must be used in a Captivate 5.x web project.
Standard Preview (F4 or F12) will not display the web page widget properly. To make F12 web preview work, change your Captivate .htm publishing template to use a wmode of “opaque” or “transparent” instead of “window”. If you don’t you’ll notice at run time that if you click on the web page, then back on to the Captivate swf, your web page widget will vanish.
Changing your .htm publishing template to permanently include the wmode setting will ensure that F12 web preview will work correctly. The F4 standard preview will not work since the widget requires a web browser to function.
NOTE: The published .htm file needs to have one change where the wmode should be set to “opaque” or “transparent” instead of “window”.
so.addParam("wmode", "opaque");
You can create a new publishing .htm template with the wmode already defined so you don’t have to keep updating the wmode in your published .htm file every time you republish (it gets overwritten). To do this, copy an already existing .htm template file. The standard .htm template is typically located at C:\Program Files\Adobe\Adobe Captivate 5\Templates\Publish\standard.htm. Copy this file and Paste it to the following folder C:\Program Files\Adobe\Adobe Captivate 5\Templates\Publish\SCORM\1_2. Open the file and set the wmode to “opaque” or “transparent” like the line of code above. Name the file something recognizable such as standard_WebPageWidget.htm since it’s based off of the standard template. Now inside of Captivate you can choose this template for publishing by going to Quiz””>Quiz Preferences
Enable SCORM reporting (even though in our case we aren’t really using it at all), and pick your template from the drop down list. You will end up with some of the SCORM files when you publish, but you can remove those when you are ready to upload to your LMS. If you don’t want to use the standard template, you can choose another template to copy and modify.
More Requirements…
If you are using “Relative Path” as a display option, you will have to publish your widget’s .htm file to the Captivate publish location in order to view the presentation properly.
Captivate has a bad habit of asking you if you want to view your newly publsihed project right after publishing (yes/no dialog). Nine times out of ten, you’ve published to a non-trusted Flash location. If you choose “yes”, and you’ve published to a non-trusted location, the widget will not function. Please ensure that you’re testing the widget from a trusted flash location by either publishing to a web server, or adding the location the list of trusted sites. Flash automatically trusts locations published to a web server. I typically do my testing from my local web server. The Captivate F12 web preview location is also a trusted flash location and is considered safe.
Gotchas
I’ve tested this in IE 8, Firefox 3.6, and Chrome 7 . IE had some difficulty displaying PDFs and other embedded items. The reason is that IE uses an ActiveX control to render PDFs. It wasn’t as simple as pasting “http://server/myPDF.pdf” into the “Web Address” field of the widget. But there are other methods for displaying a web page. For PDF files, I used “HTML String” as the display option and used the below code.
<html><body bgcolor="#E1E6EA"><iframe src="http://www.tagg.org/pdftest.pdf" width="600" height="300"></iframe></body></html>
This method worked for all browsers. You can also use “Relative Path” and point to a .htm file that has this or similar code in it. Look at the demo file provided in the download for other examples.
Overall, I found that if I couldn’t get an embedded object to properly display with the “Web Address” option in IE, I could use “Relative Path” or “HTML String” and modify the embed code to get it to work properly in all browsers. I have yet to find something I could not display using this widget. Bottom line, if you know your audience could be using any type of browser, TEST it before you deploy.
Click-Jacking
Google.com, Yahoo.com and other websites have implemented a click-jacking preventative measure that disallows you to add it as an iframe (that’s what the widget does behind the scenes). You can read more about it here: http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx This click-jacking preventative is an opt-in measure. Web publishers don’t have to use it, but Google and Yahoo have decided to. The side-effect is that you’ll get a message in Internet Explorer that the content cannot be loaded as an iframe. If you’re testing, you may want to try CaptivateDev.com as a web address.
JavaScript Access to the iFrame
For those of you trying to communicate to the iframe, the widget will dispatch a custom JS event after the iframe is fully loaded. You can subscribe to this event using window.addEventListener() as noted below. Here’s an example of how to tap into this event:
<script type="text/javascript">
//Subscribe to the event from the window object
window.addEventListener("IFrameLoaded", onIFrameLoaded);
function onIFrameLoaded(evt){
//Use the evt.htmlName to get a reference to the iframe
var ifrm = document.getElementById(evt.htmlName);
//check to see if we have an iFrame
if(ifrm != null){
//from wfrm, you can access JavaScript methods and props in the iframe
var wfrm = ifrm.contentWindow;
//Comment these lines out (for demo only)
alert('InnerHTML: ' + wfrm.document.body.innerHTML);
alert('htmlName: ' + evt.htmlName + ', captivateName: ' + evt.captivateName);
}else{
alert('Error: iframe is null!');
}
//inspect the captivateName to determine which iFrame/Wep Page Widget triggered the event.
//This is useful if you have more than one Web Page Widget in your project.
//The captivateName is the "Item Name" in Captivate.
switch(evt.captivateName.toString()){
case "Widget_1":
alert("This was fired by Widget_1!");
//do work here...
break;
case "Widget_2":
alert("This was fired by Widget_2");
//do work here...
break;
default :
alert("iFrameLoaded Event Fired from " + evt.captivateName);
}
}
</script>
As you can see, there’s a custom event object that gives you some important info regarding the iFrame:
1. htmlName = name of the iframe element. ( lets you get the iframe object by document.getElementById() func)
2. captivateName = The Item Name of the web page widget inside of captivate. (So you can distinguish different web page widgets in a project and act accordingly using switch/case).
Why is this free?
Consider it my contribution to the community. Enjoy!
Download Widget
Change Log
April 17, 2012 - Version 5.5:
- Updated to WidgetFactory 5.6.1 with better runtime detection and performance
- No longer need to put in the widget’s Item Name in the widget properties
- Fixed the momentary flash of the properties dialog during runtime
- Added JavaScript Event for obtaining access to the iframe itself
- Improved error handling and simplified the widget properties UI
- Updated sample Cp 5.0 and 5.5 files with new release
Pingback: Is there a way to embed PDF files within Captivate? | free icons download
Pingback: Accessing SharePoint from Captivate 5 | free icons download