Adobe Captivate 5.x: Web Page Widget

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:

  1. Web address such as http://CaptivateDev.com
  2. Relative Path such as “myfolder/myHTMLFile.htm”
  3. HTML string such as “<html><head></head><body>Hello Wolrd Wide Web!</body></html>”
  4. Captivate User Variable such as $$UserVariable$$ that would contain the html syntax in a string like the above.
  5. It can also interpret variables so you could have a string or a URL such as http://mywebsite.com?user=$$myUserVariable$$
  6. You can have two-way communication between the web page and Captivate 5 if you know JavaScript.

Use Cases:

  1. Inserting PDF files (embedded into your web page).
  2. Displaying Legacy AS2 .swf files (such as Articulate Presenter files or Captivate 3 or 4 files) in your AS3 Captivate 5 projects.
  3. 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.
  4. Display a Google Form, Spreadsheet, or Doc that shows up-to-date information.
  5. Create your own web mashups  with Facebook, or Twitter and place them inside of your presentation.
  6. Have users take a training evaluation survey from http://www.surveymonkey.com/ or http://polldaddy.com all within Captivate.
  7. 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

QuizPref

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
  • Whyves

    Hi Jim,

    Very impressive widget! Opens up huge doors! Curious … are you using the HMTL Overlay Component? We'll have to have a more technical discussion on this. Again, nice work!

    Whyves

  • Jim Leichliter

    @whyves It's based off of a flash version of Flex-iFrame http://code.google.com/p/flex-iframe/

  • Wheat

    Wow, Jim! What a great idea. Going to DL and test right now.

  • Matt

    First off, thanks for creating this for the community. This is awesome functionality and long overdue, shame on Adobe for not creating this.

    I have tried to test using the default settings in CP5. So far I just get a "loading" message but the page (google.com) never opens. Any thoughts?

  • Jim Leichliter

    @Matt What browser are you using? Make sure you have http:// in front of the URL. Also, make sure you're using the preview in a browser.

  • Matt

    Thanks Jim, using FF. I tried a new project and that worked. So setting within my original project might have been throwing it off. Cheers.

  • Jim Leichliter

    @Matt Glad to hear. Just make sure if you add a second Web page widget to your project the Widget Item Name in the properties panel matches that of the name in the Widget settings.

  • Omer simanovsky

    Wow this is awesome, could be great for any project.

    Do you think it will be possible to create something like that?
    http://www.apture.com/

    Thanks
    Omer

  • mike

    Hi Jim, you are doing a great job with these widgets and captivate workarounds. I'm wondering.. is it possible to insert web page into captivate 4? or is it 5 only? I have simple animation in mp4 movie embedded with player into html file, and no idea how to insert it into one of the slides.
    Regards,
    Mike

  • Jim Leichliter

    @Mike: It's for Cp5 only at this time. I plan on porting this to the CpGears platform and make it work for Cp4. This won't happen any time soon. I'd suggest converting your MP4 file into something Cp can import.

  • mike

    ok, flv it is. thanks for the reply!
    Mike

  • Anonymous

    Jim,
    Thank you so much for this widget!! I've been searching for a way to display Flash AS2 animations in Captivate 5 and this did it!
    You've got a new fan!!
    Darlene

  • Tse

    Fantastic widget! Thank you for your time creating this useful widget! I had the same question, Articulate Presenter has a nice "insert web object" function, why Caprivate does not?

  • ashley

    Excellent widget,
    I do have a question, if you click on a different slide element or even the slide background, then re-click on the the widget frame, doing this twice causes the widget to disappear. Any thoughts?

  • Jim Leichliter

    @ashley: Yes, you are correct. To remedy this, please read the text in bold red letters on the blog post.

  • Randy

    Hi Jim,

    I'm trying to use your widget in a Captivate 5 project and am just getting the "Loading…" animation.

    I am loading a relative path and I've copied the HTML file into the project's published directory.

    Users will be viewing in IE but I tried it in Safari, too, and I get the same results.

    Do you have any suggestions?

  • Randy

    Nevermind… Flash settings kept it from working locally but once I published the files to a remote server, it worked A-OK! Thank you for this!

  • Jim Leichliter

    @Randy: Are U publishing with FP10? If you want to send the .html file over and a one slide demo, I can take a look. JimLeichliter AT gmail dot (Com). Are you using F12 to preview your project? Cp automatically creates a temp folder to temporarily publish to for F12 browser preview. Since you are using a relative path, you should have a copy of your .html file in this temp directory too, or you won't see a preview. You may want to publish to your local web server to see a "preview" using relative paths.

  • Jim Leichliter

    @Randy: Looks like I was kinda slow to publish comments! Anyway, Glad it worked out!

  • Michael Roberts Jr

    Hi Jim,

    Yet another fantastic widget. I can think of many uses for this. Works like a charm.

    I was initially planning to use this widget to show screencast.com videos in an embeded htm page, but I was curious if you know if there is any way to cause an embeded player object on the htm to stop playing when the widget is not present anymore? Currently when I move on to another captivate slide (without the widget) the embeded video keeps playing. any thoughts?

    Perhaps there is something I need to put into the code on the htm page that might help?

    • Kat

      Was a solution ever found for this? I am using the widget on successive slides to display YouTube videos, but if you page forward before the video is done, the sound from the video keeps playing right along with the video on the next slide.

    • Jean-François Dragon

      Hi Jim,

      I just discover this extraordinary widget. It’ll save me a lot of time. But I get the same problem than Michael with IE (using Cp 5.5).

      I use the «HTML String» line to embed a video present on our own streaming server. With FF, the video playing in the iFrame is end when the user click on the next button I place at the bottom of the page. But in IE, the video just continue to play without stopping.

      I would like to know if it could be possible to force IE to stop the video when changing slide like in FF. Do you think it could be done by inserting advanced action to my next button?

      If you have any idea I’ll realy appreciate… my users are for 90% IE users.

      Thanks

      JF

      • http://twitter.com/CaptivatePro CaptivateDev.com

        @google-8b4be374cb9e10c972eb14fc9d9d3ea2:disqus :  Yes it is possible but it requires that you have your video in an external .htm file vs. an HTML String.  If interested please contact me at Jim AT CaptivateDEV dot com.

        • Jean-François Dragon

          Thank you for your great (and fast) help Jim!

          Well, I found an easy way to solve the IE issue when it’s time to stop video from playing… without using Javascript formally. Here is my how to.

          First, I split my project into 5 different projects. The first one contain 4 button pointing to the 4 videos place on 4 “one slide” projects. Then on each of these 4 “one slide” projects, where I put one video on each, I put a link back to the first project.

          It work well on IE, FF, Chrome and Safari… well, I think I got my solution.

          And I try to embed the video with “Relative Path” and with “HTML String” parameter and it work in the both situation.

          The only downpoint (yes I found one ;-D), I have all the time the loader from a slide to an other… but for now, it’s a little problem.

          Thanks again for this great widget and for your help!

          JF

          • http://twitter.com/CaptivatePro CaptivateDev.com

            @JF:  Brilliant!  Thanks for sharing your solution.  That’s a very clever way of approaching this and I never would have thought of that.  Nice work!

        • Brett

          Jim, I see this is an old thread, but I’m interested in a similar solution using javascript on a button to combine stopping the video and moving on to another slide.

          • CaptivateDev.com

            @Brett: What video service are you using? If you are using a major service (Wistia, Vimeo) they should have a JavaScript API you can tap into.

  • Jim Leichliter

    @Michael Roberts Jr.: You would have to figure out how to do the following:
    1. Figure out how to stop the embedded player using a JavaScript function.
    2. Call this function on slide exit via the JavaScript panel in Captivate.
    You also need to consider how to call the JS function in an Iframe. It's all do-able, but will require some good Ol' JavaScript elbow grease!

    • Marquardtc

      Hi Jim,

      Would you be able to provide an example of this javascript?

      • http://twitter.com/CaptivatePro CaptivateDev.com

        @ed9b8a83ebdeb2dce99efe9ce8ba7665:disqus :  Info about JS communication between two iFrames can be found:
        http://cross-browser.com/talk/inter-frame_comm.html

        http://www.dyn-web.com/tutorials/iframes/

        You’ll definitely want to use a DOM (Document Object Model) inspector like FireBug for FireFox or hitting F12 in IE to get the DOM inspector.  This will give you a lot of insight on how to interact with the iFrame.

  • Mariana

    Hi!
    I'm trying to use this great widget, but having no success. :-(
    I have the "Widget Item name" and have put the value "opaque" in wmode. I'm using F12 to test.
    Have you got an idea of what might be wrong?
    Thanks in advance!

  • Jim Leichliter

    @Mariana: Are you publishing to Flash Player 10+? If you are using relative URL's, you will either need to publish to a web server or put your files you are referencing in the Cp publishing temp folder so you can F12 preview properly.

  • Tallis

    Longshot question here:
    I host my eLearning content on SharePoint.
    F12 preview the widget works, but when viewing through the SharePoint site, i cannot get past the preloader.
    I am assuming that, for some reason, SharePoint keeps me from linking to an external site.
    Anyone know of a work around?

  • Jim Leichliter

    @Tallis: If you are using a SharePoint repository, most likely you are linking to the .swf directly. The .swf NEEDS to be in a .htm container to work. The AS3 Widget code injects javascript into the htm container to create the iFrame. Adobe Connect also tends to link directly to the .swf file so you end up with the perpetual "Loading…". I would load the published .htm file and the .swf in the same SharePoint repository and see open the .htm file to see if it will work.

  • Anonymous

    Hi Jim,

    I'm trying to embed an iframe in Captivate. I just started to work with the program so this is a good introduction to widgets. What file am I looking for in your download link?

  • Jim Leichliter

    Go to the "Stable Widgets" folder then WIDGET_Cp5_Web Page Widget.zip (currently the last one on the list.)

  • Anonymous

    I figured it out. Thanks, Jim!

  • RB

    Hi Jim,
    Firstly, Nice Work!
    I was able to display a SurveyMonkey (SM) survey in a Cap5 .swf, at least in preview (F12). Mostly just playing as a test case for an intermediate data collection work around.
    When I was writing the dummy survey, I noticed SM has an option to embed the questions on a page. It generates two nested divs with a script source. The script source is the link the survey question.
    I couldn't get that to work in html string option in your widget.
    Is it possible?
    Is it also possible to build a similar widget that would access the script? The dreamer in me believes it would be similar to a twitter widget.
    Thanks again.

  • Jim Leichliter

    @RB: I'd have to see the html code SM spits out to know for sure. It's probably embedding an iFrame into the page. If that's the case, That's what the widget does as well so you'd have an iFrame within an iFrame. I'd recommend removing the iFrame code out of the SM generated html embed code, but I'd have to look at it to know for sure. You can email me at JimLeichliter (AT) gmail dot Com.

  • http://dildersleri.gen.tr Hakan Gür

    Hello,

    I would like to thank you for this beautiful extension for Captivate. Yet, I would also like to know if it could be possible for you to design the same widget for version 4.0, too. I – and I am sure many other users – do not intend to upgrade to 5.0 as I am happy with what I already have (except for this widget!).
    Thanks.

    • http://JimLeichliter.com Jim Leichliter

      @Hakan Gur: If I did create this for Cp4, it would have to be an AS3 widget. I have a few other widgets in mind that I’d like to create first, however, I’ll add this to my list.

  • http://www.dorna.nl Chris Dorna

    Just an idea. Is it also possible to add an option to position te captiontext to the center?

  • Ben Terrell

    Hello,
    I would love to try out your Web Page Widget but, when I click the download button, I get “page can not be displayed”. Is there another way to get access to the widget?

  • http://JimLeichliter.com Jim Leichliter
  • Solagar

    Has anyone had any luck getting this working with https links?

    My aim is to insert links to our internal document control web-space throughout various SCORM modules. So far I’ve been unable to get this working any advice would be greatly appreciated

    Cheers

    • Anonymous

      @Solagar:  It should work over https.  Does your site require any authentication to the internal document control site?  The web page widget is simply an iFrame that floats over top of the captivate .swf.  Make sure your wmode is opaque or transparent (see red text in post).  Also, a good test would be to create a simple .htm page and inside that page, create an iFrame to your https site…. if that doesn’t work, then we know there’s something else going on. 

      • Solagar

         Hi Jim,

        Thanks for the speedy response.
        Yes it’s accessed via our single sign-on globally (yes I was logged in when I tested this, but it seemed to get stuck  “loading”.
        The widget works as I’d expect with both google and survey monkey pages.
        I will have a bit more of a play today and see  if I can resolve or narrow this down a little.

        Cheers again.

  • Anonymous

    Hi Jim,

    Great widget! It works wonders and enhances my projects. However, I did run into an issue though. Seems that this widget has a setting for NO_SCALE causing any project that uses this widget to restrict scaling or fullscreen capabilities. Is there a possibility to modify this widget to allow scaling?

    • Anonymous

      @edlearner:  I just created v. 1.2 that fixes the scaling issue.  Thanks for bringing this to my attention.

      • Anonymous

        Jim,

        It seems that the scaling issue is fixed but when I go fullscreen, the widget vanishes. Here is a sample created

        Major thanks for your help!
        edlearner

        • Anonymous

          @edlearner:disqus :  Thanks for the demo.  I wasn’t sure if you were using Flash’s Full Screen mode or the browser’s Full Screen mode.  When you are using Flash’s Full Screen mode, you are leaving the browser.  The web page widget is an iFrame in the browser, so at that point you go full screen, the iFrame will disappear.  If you use the browser’s ability to go full screen, then it should be possible. Also remember to set your wmode to opaque… not window. See red lettering in post.

          • Anonymous

            Got it … Thanks for all your help Jim!

  • Anonymous

    Does anyone use SumTotal as their LMS? I seem to have run into an issue with embedding WMV files/Windows Media Player into an HTML file. Using the webpage widget and calling the player as a relative path, it works perfectly. The course also completes naturally at the end of the course, however, it does not close the course window the way is should.

    So at the end of the course, the course window goes blank/white and remains there (normally supposed to close). I was advised by a senior developer that the webpage widget may possibly rely on a dependency of some sort according the source code of the blank window at the end of the course.

    If anyone has any advice, please help. Below is a link to download all my test files including the blank htm file.

    Thanks in advance!

    ~edlearner

    • Anonymous

      Hi Ed,

      I noticed on the .cptx project, the project end action is set for “stop project” and not “close project”.  The web page widget has no dependency on the course window.  It’s an independent iFrame.

      • Anonymous

        Either method you mentioned was unsuccessful. However, I changed the format of my course to make it work somehow.

        Thanks again Jim!

  • Doug French

    Hi Jim,
     
    Looks like I need some help, please. I am able to test out the widget using F12. Everything works as expected. However, when I publish the project, then alter the .htm file as instructed, drop the .htm file into an IE or Firefox browser, the loading bar just runs and runs – no web page is displayed. What settings might I need to tweek? Also, what does F12 execute that my browser doesn’t?

    • JimLeichliter

      @Doug:  Make sure you’re publishing for Flash Player 10+ .  Also follow the instructions in red in the post (if you have not already).  F12 is a web preview in Cp.  Publishing to a web browser is better because that’s the true environment your project will run under… including Flash security settings (if any) that apply.  

      • Doug French

        Jim, Thanks for your reply. As a “newbie” to Captivate, this follow-up question probably sounds like a zinger!  I am using Captivate version 5.0.0.596. When I go to publish my project, I only see output options for Flash Player Versions: 9 and 10. Your reply leads me to believe that I should see 10+. Is that correct? If so, do I need to update my Flash Player? Update Captivate? Thanks!

        • JimLeichliter

          @Doug:  10+ meaning version 10.0 and above.

          • Matthias Beumer

            Hey…
            I’ve got exactly the same problem as Dough French.
            Using Cp 5.5, publish for FP 10+ and also didn’t forget the http thing…but nothing happens. just the preloader…Can you help me???
            Matthias

          • http://twitter.com/CaptivatePro CaptivateDev.com

            Look at the wmode property in your .htm file.  See the red text in post for more details.

          • Matthias Beumer

            Thanks for reply…unfortunately it doesn’t work…

          • http://twitter.com/CaptivatePro CaptivateDev.com

            @e364c24508cfdc7a68c3c1cebabcd11a:disqus :  What web page or site are you trying to load?  Some sites prevent their web pages from being displayed in an iframe.  If you read the note in yellow above, you’ll see that google started doing this.

          • Matthias Beumer

            yeah got that, but none of the pages works…also tried it with yahoo.com.

          • http://twitter.com/CaptivatePro CaptivateDev.com

            Can you send  me your project at Jim AT Captivate Dev dot com?

          • Matthias Beumer

            I shared it via Google Docs to you. Thanks for your help!

          • Jam2

            I tried the widget in adobe captivate 5.5 and it doesnt display web addresses when  preivewing

          • http://twitter.com/CaptivatePro CaptivateDev.com

            @Jam2:  Try F12 web preview.  If that doesn’t work, you may want to look at your Flash Security settings.  F12 should work.  F4 will not because you’re not viewing it in a web browser.  I typically publish to my local web server for testing.

  • http://pulse.yahoo.com/_3OXZ27ES7RKIFZIKM6HRWQUIFA Tahiya

    Love this. Used it. Had a great bunch of practice sims coming into Captivate through this widget. Then I upgraded Firefox and now it’s acting broken. I can see it on the F12 trial but uploading, publishing, etc. no go. So I figured IE, but no dice. Hard because my SME just finished reviewing the first rev on IE across the transom and we were so close to publication. Just had a few corrections and were off to the races. Any ideas?

    • Jim Leichliter

      @Tahiya  Upgrading FF may have done something to Flash on your pc.  Have you tried this on another computer besides your own?  I’d be happy to look at your project if you want to send a shortened version for your .cptx file to Jim AT CaptivateDev dot com.

    • Jim Leichliter

      Also, make sure you’re publishing for Flash Player 10.x and above.

  • Sue

    I have been trying to get this widget to work but an having trouble.  I am using Captivate 5.5 and Firefox 5.0.  I always just get the “loading…” and it just stays there.

     I have tried the demo program that came with the widget and get the same thing, just the “Loading…”.
    I also tried a simple .html file as a relative path.  I copied the file into the same directory as the CP5.5 published .htm file was located.

    I just want to have my CP project go out and play a short tutorial that is on the Internet.  I tried using a link on a slide, and it went there and played the tutorial, but never came back.  The link simply replaced the browser window with the tutorial.  If it had opened up a new window it might have worked since my CP project would have still been there, but I can’t find a way to make the link open a new window in the browser (without modifying the browser settings).

    I think I have followed the directions fully.  I modified the .htm file and changed “window” to “opaque” etc.

    Any ideas?  I could really use some help.

    • Jim Leichliter

      @Sue:  I’d be happy to look at your project.  Send it to Jim AT Captivate Dev dot com.  Also, just make sure you are using F12 (Web Preview) and publishing for Flash Player 10.x

  • Sue

    Jim,
    I just sent you my CP 5.5 project as you said I could do.
    Thanks,
    Sue

    • Jim Leichliter

      Hi Sue,Some web sites do not allow other sites to use their content in iFrames because they want you to visit their site directly to access their content.  This prevents other content farms from stealing their videos and other juicy info.  The web page widget displays its contents using an iFrame and the site you have listed is http://office.microsoft.com/video.aspx?assetid=ES010368151 does not allow the display of videos in an iFrame.  Microsoft is forcing you to go directly to their site to access their content.So your other option is to open a new browser window to show the video from a button within Captivate.  When you configure the button action to “Open URL or File” you’ll notice that there’s a field to place in the URL.  Right next to that is a small black drop down arrow that lets you choose “New” for opening that URL in a new window (or Tab depending on how the user configured their browser).Let me know if that helps,Jim Leichliter

  • Mangler

    Hi Jim,

    I’ve some some problems with your widget. I used the widget in my Captivate-project and set in the widget properties the URL http://www.google.com. After this I published it as Flash SWF and set the value of the wmode-parameter to opaque “so.addParam(“wmode”, “opaque”);” But every time I start the .htm file in my webbrowser (Firefox 5.0) I only get a loading bar. Do you have any suggestion?

    Thanks
    Kenny

    • http://twitter.com/CaptivatePro CaptivateDev.com

      Hi Kenny,  Make sure you’re publishing your Captivate project for Flash Player 10 or above.  Also, you need to be viewing this from a web server OR using F12 Web Preview in Captivate.  Are you getting any Flash security pop ups?  I’ve seen some Captivate installations where the Captivate trusted folder doesn’t get applied so using F12 Web Preview produces the Flash security errors.

  • Michael Davidson

    Jim,
    I have downloaded and installed your widget. I have successfully displayed web pages in/on a Captivate slide. One time I even got a web-located PDF to display, accept a digital signature, and send a copy of the digitally signed PDF to three different email accounts. Once. My goal was to be able to do it every time: open a web-based PDF, digitally sign it, and have Adobe Reader (or Acrobat) send the digitally signed document to an email address. I can’t seem to get it to happen again. 

    Now when I display the PDF via your wonderful widget (very helpful and valuable to me), the digital signature field does not act like a fill-in-the-blank on an Acrobat form. Outside of Captivate, I can get the form and digital signature to work.

    Can you direct me to resources that could help me find the answer? Can you help me with an answer? Thanks.

    Michael

    • http://twitter.com/CaptivatePro CaptivateDev.com

      Hi Michael,
      The web page widget is just an iFrame that’s hovering over your captivate .swf.  That means it’s actually a true web page displayed over top of your Captivate project.  If you can sign your pdf in a normal web page, you should be able to do it via the widget.  What browser are you using? IE, FireFox, Chrome, Safari?  Could this be a change to the browser’s PDF plugin?

      • Michael

        Hmmm. Interesting. 1) I will try it in a browser (sans Captivate) and 2) I will try different browsers. In answer to your question, I am using the Chrome browser. Thanks for the tip. I will keep you posted.

        • http://twitter.com/CaptivatePro CaptivateDev.com

          I do know that Chrome has their own PDF plugin… you may have to disable that so that the ADOBE plugin can render the pdf.

  • Melissa

    Thank you for creating this widget.  It has worked great for adding YouTube videos.

  • Philippe Lavigueur

    Hi.
    I’ve tried several times today and always get an  a “loading” message but the page (google.ca) never opens. I used FF 6.02. I’ve also tested with I.E 9. I am previewing in the browser (F12)  I don’t even get and http:// in the browser addres tab. It more like file:///c:/Users and so forth.
    I have 10.3 Flash player.
    Any suggestions?
    Thanks

    • Anonymous

      @Philippe Lavigeur:  Make sure you’re testing it either from a TRUSTED flash location or a web server (even your local web server is ok).  If you’re running it from your C: drive, you need to ensure that you add that location to Flash’s Trusted locations.

  • Jared

    This is a fantastic tool! I can now use the quiz templates becuase of it. 

    One suggestion for the next release.  Since the quiz templates do not allow the use of buttons, it would be great if the widget could operate like a rollover caption. This way content needed to answer a question can be placed on the same slide as the question itself. 

    Thanks for such a wonderful program.

  • JS

    Have you created this widget for Captivate 4 yet?

    • Anonymous

      This will not be converted for Cp 4.  Cp 5.5 is really worth the upgrade if you want to use this widget.

  • Kate M

    Hi,

    This is a great tool – exactly what I was looking for for my first Captivate project. I’ve followed the instructions here (changed the wmode in htm file, changed preferences in quiz template, published in Flash 10), but I get a “loading” message when I upload to my server space. Any thoughts what might be going on ?

    • Anonymous

      @Kate M:  It’s hard to say exactly what’s going on.  What are you trying to load in?  You can send me your .cptx project at jim AT CaptivateDev dot com and I’ll have a look.

      • Kate M

        Thanks Jim, I’ve emailed you the file. I’m trying to load the file in FF 7.

        • Anonymous

          @Kate M:  Works for me in FF7.  Make sure you have JavaScript enabled in FF.

  • Kate M

    Hi,

    I’m using the iframe (size: 450×500) in a 600×800 Captivate project. Once the .swf is embedded in a website, I’m finding that the iframe position is relative to the browser window rather than to the swf player, so it’s not centered for all users. Is there any way to change that, or at least minimize the affect to the user? 

    • Anonymous

      @Kate M:  Can you send me your .cptx project so I can take a look… or point me to your website?  Jim AT Captivate Dev dot com

  • Rui Hu

    Hi Jim,
    This is a great widget! Like whyves said, opens up a lot of doors. However, I tested with Captivate 5.5 and Firefox 7.1 on my Mac OS X 10.6.8, it shows “loading…” but doesn’t show the actual page. Can you please let me know if this widget works on Captivate 5.5? Thank you very much!!! Really wish it could work on Captivate 5.5 then it will solve a lot of my problems!

    • Anonymous

      @Rui Hu:  Works perfectly for Cp 5.0 and 5.5.  Make sure you follow all the directions especially setting the wmode.  What page are you trying to load?

      • Rui Hu

        Hi Jim, I am trying to load “http://google.com”. I changed the wmode using both ways that you instructed. I also tried other pages but none of them works. I wondered whether that was because the actual google link is https://google.com so I then choose another simple webpage: http://gatech.edu and it still didn’t work.
        Thanks for any advice!

        • Rui Hu

          Hi Jim, I just saw that Kate also had the same problem and so I went back to check that the Javascript in my FF is enabled. Still, I can’t get it work. I sent my cptx file to your email without your permission. But I really need your help and thanks a million times!

          • Anonymous

            Google has 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 has decided to.  I looked at the HTTP headers from google and it does contain the X-FRAME-OPTIONS header as SAMEDOMAIN.  Meaning that only Google can use it’s own pages as iframes.  If you’re testing, you may want to try yahoo.com.  They have not implemented this click jacking preventative.

          • Anonymous

            I added a note to the Gotchas section.  Looks like Google has implemented a no-iframe policy.  Try using Yahoo.  Also, I’ve updated the widget to v. 1.3 and also the sample files to use yahoo.com.

  • Rui Hu

    Hi Jim,
    This is a great widget! Like whyves said, opens up a lot of
    doors. However, I tested with Captivate 5.5 and Firefox 7.1 on my Mac OS
    X 10.6.8, it shows “loading…” but doesn’t show the actual page. Can
    you please let me know if this widget works on Captivate 5.5? Thank you
    very much!!! Really wish it could work on Captivate 5.5 then it will
    solve a lot of my problems!

  • Brian

    Hi Jim,

    Thanks for the great widget. It works great, but I’m having one problem…

    When I F12 it using most websites, it works fine (except with Google.com, which through me off for a while), but when I put in ‘skyvector.com’, which is kinda like Google Maps, it loads the page but leaves out the actual map, which is the important part. Basically, I want my users to be able to look around on an active (and up to date) map (like Google Maps) from within Cp. Any ideas as to why this isn’t working?

    Thanks,
    Brian

    • Anonymous

      @Brian:  I’m not familiar with skyvector, but they may be loading the map in an iframe or something.  You should do a “view source” on the skyvector page to see how they’re loading the map and see if you can replicate that call via the widget.

  • Rui Hu

    Hi Jim, thanks for all the advices. Now I can embed all kinds of things
    in my project just by putting them onto the webpage. This will
    definitely be a huge enhancement for our courses! One thing is that when
    I am embedding a webpage I found it doesn’t rescale according to the
    iFrame’s size. So if there is a video on the lower half of the webpage,
    it will then only be shown part of it. Sometimes, parts of the webpage
    contents can also be cut off. Can you let me know how I can adjust the
    size of the webpages? Thank you so much!

    • Anonymous

      @Rui Hu:  You can resize the widget on the canvas which will change the size of the iframe.

      • Rui Hu

        Hi Jim, I tried to resize the iframe but then the webpage is still shown partially. I think in general a webpage is usually larger than the size of the iframe. Is there a scroll-bar option so that the user can view the entire webpage within the iframe using the scrollbar even when the page is larger than the iframe itself? Thank you.

        • Anonymous

          If you double-click the widget on the Cp canvas, you’ll see that there’s a scrollbar property that you can set to YES, NO, or AUTO.  I usually leave it on AUTO.  If the page is too lare for the iframe, then the scrollbars will kick in.

  • Curtis

    Hi Jim,

    Thanks for the widget! It works great.

    One question: I would like to set the widget to display for the “rest of project.” However, when I do, the widget only seems to display a screenshot of the widget properties box. Is there a way to have the widget display through the entire project and across all slides?

    • Anonymous

      @Curtis:  The widget isn’t designed for displaying “rest of project”.  Possibly another way to handle your situation is to have the user hit a “Continue” button when they’re done interacting with the web content.

  • Man Crap

    HI Jim

    I have tried many times to use the widget using a relative path to the htm file and each time I am not successful. I have published and changed wm mode, I have put the file in the published folder and in every other folder I could think of in and around but to no avail. The only way I could get it to work was using absolute address (using local address). Do you have any suggestions? Thanks.

    George

    • Anonymous

      @4659dd56c9b617156d3c16131b109267:disqus :  In order for a true relative path to work, you need to be viewing the published project from:
      1.  A web server
      2.  From a trusted Flash location.  Be default when Cp is installed, the F12 web preview is trusted.  But I have seen that for some people, this isn’t the case.  Also, if you’re using F12 web preview, you need to place your htm file that the web page widget uses at Cp’s temporary publishing location.  When you do the F12, you’ll notice a folder location in the browser’s address bar.  Manually copy your htm file to that location.

      • Man Crap

        Thanks a lot Jim. Actually I sorted out a few problems – 1. I had not correctly set the WM mode to opaque – I instead hurriedly just copied and pasted the line of code above (not realising it was already there and just needed to be changed to “opaque”. 2. Yes my flash settings in my web browser was blocking access to the files. Once I set that location as “allowed” I had no problems.

        Thanks for your excellent widget – it allows me to insert swf AS2 bars on my pages with excellent playback control. I am setting up pages for English language learners so they need to be able to scroll through the audio easily as they listen and re-listen.

        I’m going to set up the temp file properly now too.

        Thanks again Jim

        George (AKA Man.crap)

  • Man Crap

    HI Jim – I have the widget working but I notice that the loading time is slow after publishing to my LMS (moodle). Also I notice that for an instant the widget area is a white box before the “loading” image shows. This is more of an aesthetic issue but I’m wondering if there’s a way around it.. Thanks

    George

    • Anonymous

      @4659dd56c9b617156d3c16131b109267:disqus :  The white box is the actual iframe that the widget creates and is part of your browser.  No way to change that.  Loading times will depend on what you’re trying to load.  Keep in mind that if you have the widget on or close to the first slide, you’re Cp .swf is also loading and restricting the bandwidth of what the iframe can download.  

      • Man Crap

        Yes I see… thanks.

  • Dharmesh Mehta

    Hi Jim, I’m facing this unique problem that a few websites (like wikipedia, yahoo) are working fine but a few other (like google, facebook) do not work. Any idea why?

    • Dharmesh Mehta

      Ok, reading the previous posts, i figured out the issue to be related with IFRAME.

      Anyway, the websites which load in the preview do not load in the swf output. I see the ‘Loading…’ sign always.

      • Anonymous

        Make sure you’re viewing from either a web server, or a trusted flash location.  Also, read the full post… Google and FB have dis-allowed iFrames for their content.  The note at the bottom of the post describes this in detail.

  • Philippe Lavigueur

    Hi Jim.
    I use the widget with html string display mode. The pdf or html document is embedded correctly in the slide. On the same slide that the widget is, I added a return button in order for user to return to previous slides. Randomly when this button is it, the document display hangs. Any thoughts?
    Thanks.
    Philippe Lavigueur

    • Anonymous

      @7a497c2bd851a3c68878934ced23f068:disqus :  What browser are you using and what setting are you using for your wmode?  Go ahead and send me the .cptx file and pdf/html.  Jim AT Captivate Dev Dot com

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @7a497c2bd851a3c68878934ced23f068:disqus :  Try Un-checking the “User manually navigates…” checkbox.  Since you already have a button on the slide, there’s no need for the widget to pause it.

  • Chris

    Jim - 

    First of all, thank you for offering this great widget – it’s very helpful for us from a training perspective, and much appreciated.  I spent a while messing around with this widget so that I could get the webpages to appear within the slide correctly – and it works perfectly in the preview function (F12), however once it is published, the webpage actually shows up below the slides – forcing the user to look at a blank slide, and then scroll down to find the webpage.  Is there something I’m missing here that could correct this?  Any assistance would be great.  Thanks!

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @dd7381215a77c19020f39a14524f1260:disqus :  Hard to say without seeing an example.  Can you post something online to look at?  Try looking at the .htm markup of the page you’re trying to display. Anything odd or unusual?   

      • Chris

        The link below will take you to the cutout of the slides I’m referring to.  It’s just one webpage I’m trying to show – but when I was using the sample that I downloaded from here it did the same thing as well.  Thanks in advance.

        http://gmuflashserver.gmu.edu/flv/mrec/webpagesample.swf 

        • http://twitter.com/CaptivatePro CaptivateDev.com

          @dd7381215a77c19020f39a14524f1260:disqus :  You need to link to the .htm file that the swf is embedded in… not the swf file directly.  If you look at your URL, it’s pointing to the .swf file when it should point to the containing .htm file.  Give that a try.

          • Chris

            Perfect!  I figured it was a simple answer I was overlooking.  Thanks so much for the help, I appreciate it!

  • Pingback: Is there a way to embed PDF files within Captivate? | free icons download

  • Pingback: Accessing SharePoint from Captivate 5 | free icons download

  • Subair Shamsudheen

    Hi Jim,

    Initially, I wasn’t getting it to work for a while. Then I followed your instructions regarding the dot htm file, copied, pasted, made the required changes in the code, and then renamed it.

    And it started working like charm! I used F12 to preview it.

    Thank you for this widget. Nice work. Really appreciate it.

    Regards,
    Subair 

  • Mobr

    In case it helps anyone else if you change the widget item name on the widget properties page where you set the html values you also need to change it in the properties panel for the widget in captivate 5.5 to avoid the error “widget properties error: A widget cannot be found with the name of” and a constant loading bar

  • Sean

    Hello Jim !!   Excellent Widget-ing. 
    I do have one outstanding issue however.
    When Using a “Web Address” type… the web page will show when using F12 from Captivate but when running the Published HTML file it just hangs on the Loading bar.
     - I have changed to opaque
     - I deleted all preferences and Reinstalled flash and Captivate
     - Updated Captivate to the most recent settings.

    The same html file that does not display on MY pc works fine on my colleague’s machine.  I wondered if you would be able to help troubleshoot?

    Thank you for your time and attention,
     ~ Sean

    • Sean

       p.s. this is on a blank project with your widget as the only item

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Sean:  You may want to look at your Flash Security settings to make sure that the file path listed in the web address bar when you F12 is a trusted Flash location.  Also, every time you publish, the .htm file gets overwritten… so you’ll have to keep changing the wmode to opaque.

  • kris k

    tried the widget but no success, i am interested in relative path insertion to be played locally, have not found a example that works and does this, any one has suceeded this and willing to share an example?

    • http://twitter.com/CaptivatePro CaptivateDev.com

      The widget needs to be in a web browser to work.  If you’re trying to play it locally in a web browser, you need to adjust your Flash Security settings for it to work properly.  Specifically, you need to add the published location to your trusted locations.

  • http://twitter.com/angelatinney Angela Tinney

    Hi Jim,
    Excellent widget, really useful, thanks for this.  Have got a small question though.  I’m a pretty novice user of captivate, using captivate 5.  We’re using the html string to embed videos from vimeo and youtube using an iframe.  It works perfectly and once the video is finished the user will click on a ‘next’ click box to continue through the project.  The problem is that if you then click back to the slide with the widget the video still plays perfectly but the ‘next’ click box no longer works, i.e. won’t go to the next slide.  We also have a menu button  and and a back button which the user can use to return to previous slide or to jump back to the main menu.  If you jump back and forth using the buttons all of them seem to work once then when you go back to the slide with the widget they no longer execute the actions assigned to them.  As I say I am pretty much a novice with the software and have absolutely zero scripting knowledge so it could be that I’m missing something really obvious.  I just wanted to see if you’d came across this before or if there is possibly a workaround for it?

    Thanks

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @twitter-35741411:disqus :  Do you have reporting turned on for the Next button?  If so, Captivate may consider this to be part of the quiz and depending on the quiz settings, may not let you use it a 2nd time.  Have you tried the button widget that comes stock with Captivate?

      • http://twitter.com/angelatinney Angela Tinney

        Thanks Jim the button widget worked a treat:-)

  • Rita

    I am trying to use the webpage widget to embed a youtube video. Do I put the embed code in the “Display a webpage using: HTML string”? Do I surround the embed code from YouTube with the like this? …….embed code….
    I changed “window” to “opaque” and I am using Internet Explorer. I get nothing to show on the page at all, no loading, change Flash settings or anything. I know I must be doing something wrong.
    Please advise. Thanks, Rita

  • Alight9010

    Jim – great widget! I’m using it in a CP 5.5 project and it does not pause the slide when the Navigation option is checked in the properties. I worked around it but wanted to let you know.

    Thanks again!

  • Alight9010

    Jim – the widget instructions indicate that it must be published in for Flash Player 10+. I accidentally used Flash Player 9 and the publishing and output functioned correctly. Will I see issues if I’m using Flash Player 9 – I am currently using 10x in my system. Thanks!

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @ea2c701b2be717507683e259d59d3b5d:disqus :  It’s published for FP 10+ in the flash settings .fla.  I’ve not tested it with 9, but if it seems to be working, you should be ok.

  • Ergin-yildiz

    this is amazing!

  • Sam

    Hi Jim,

    This is an amazing tool.  I have the widget full functioning with a link to Survey Monkey.  I am running into a problem though (and I’m not sure if this is a widget or user issue) where, if I navigate to the same widget from the same computer, Survey Monkey thinks that I have already been here before and completed my quiz.  Meaning that only one user per computer can access the survey through the widget.  (I have tried clearing my cache as well but to no avail). 

    Have you experienced this before?

    Thanks!

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Sam:  Survey Monkey usually sends out personalized links to each individual.  If you’re using one of those links, then survey monkey knows you’ve already completed the survey.  Use a generic link to the survey.

  • Mila

    I tried to use this (exactly what I was looking for), but I just get stuck at “Loading…” and page never loads. Demo supplied with the widget behaves the same. (Captivate 5.5)

    • http://twitter.com/CaptivatePro CaptivateDev.com

      Hi Mila,

      I need to fix the demo file… when it got upgraded to 5.5, the demo file stopped working.  Just create a new 5.5 .cptx file and insert the widget .swf file as a widget.  

      • Mila

        Well my project is 5.5, I’ve inserted the widget and it gets stuck at loading… after that I tried your demo, which does the same.

        • http://twitter.com/CaptivatePro CaptivateDev.com

          Awesome!  Can you send me your .cptx project and I’ll take a look?  Jim AT CAptivate Dev dot com.  Thx!

          • Mila

            I can’t really share my project (corporate secrets), but none the less even 1 slide project just with the widget behaves the same. I can send you that, if you want.

          • http://twitter.com/CaptivatePro CaptivateDev.com

            @Mila:  Understand.  Just realized that yahoo also implemented click-jacking preventatives and won’t allow iframes from yahoo.com.  What website are you trying to load?

          • Mila

            I’ve tried google.com, but goal is to load my own .php site (survey is on it).

          • http://twitter.com/CaptivatePro CaptivateDev.com

            Google and Yahoo won’t allow their main sites to be displayed in an iframe.  Try your php site or CaptivateDev.com for testing.  Also, I’ve updated the widget and sample files.

          • Mila

            Okay the updated version seems to be cooking properly :) this site and my php site (also the survey works inside captivate).

            I assume there is no way to make it work in published .exe, right?

          • http://twitter.com/CaptivatePro CaptivateDev.com

            @Mila:  The widget uses an iFrame and needs to be in a browser.  If it was an Adobe AIR app instead of .exe, it would be possible.  Hoping Cp 6 will have a publish option for Adobe AIR.

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Mila:  I’ve updated the Web Page Widget and sample files to version 5.5 with some enhancements and bug fixes.

      • http://www.facebook.com/ron.lustig.75 Ron Lustig

        Jim,
        I’m having a problem with this widget that just doesn’t make sense. It seems to work just fine loading a file (I’m trying to load updated content into my module) but the rest of the screen displays as if it were washed out. I’ve tried a number of options in the widget and in the display properties but nothing seems to work.
        Any guidance would be appreciated.
        Ron

        • http://twitter.com/CaptivatePro CaptivateDev.com

          @Ron Lustig: You probably have the widget pausing the slide and you probably have a fade-in transition on the the slide… the widget is pausing when the slide is fading in. Just move the widget out on the time line past the 0.5 second mark or simply remove the fade transition.

  • Rui Hu

    Hi this is a wonderful widget. Thanks Jim! I’ve been testing with it and it works fine when I uplaod the course to a web server. However, when I compressed it into a SCORM package and then try to load it within a LMS (Desire2Learn in this case), it takes several minutes for the embedded html pages to load. Has anyone else had difficulties with loading the embedded web pages when using SCORM package? What the possible reason could be? Thanks. 

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @b999c393869bb8c7e911bc06a48b0c6e:disqus :  It depends on what you’re loading.  It also depends on your connection speed.  What are you trying to load in the web page widget?

  • Andrew

    Jim, I’m using your widget to display a PDF via relative path. It works great but, when I activate the Table of Contents, the TOC appears under the widget area (behind the pdf). Do you know if there is a way to address this so the TOC appears on top of the widget area?  -Andrew

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Andrew:  Unfortunately not.  It’s an iframe that sits on top of the Flash swf.  What you can do is size the widget/pdf to leave room for the TOC.

  • John

    Hi,

    I’m showing a Camtasia video using the widget. Only this is that if I navigate to the next slide while the video is playing, I still hear the audio. How could I unload the widget or do something else to stop the audio from playing?

    Thanks,
    John

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @da4d04649ef74bbee6ade2dd95ca36d7:disqus : Does hiding the widget on a slide exit action work?

      • John

        Hi,
        No, the widget won’t hide. I als tried applying a collapse exit effect to no avail either.

        I think the path to go is to use javascript to manipulate the iframe somehow but I don’t know how to tackle this.

        Regards,
        John

        • http://twitter.com/CaptivatePro CaptivateDev.com

          Does Camtasia have a way to stop or pause the video via JavaScript?  If so, this would be possible.  Last time I checked, it did not.

          • John

            No, you’re right I can’t manipulate the video using javascript. Is there a way to kill the iframe or swap out the content using blank.htm?

            I also tried using url’s in variables, but I couldn’t get the page to load that way. My thinking was to update the url on exit of the slide, but I’m not sure if that event would trigger the widget to load the new url (to blank.htm).

          • http://twitter.com/CaptivatePro CaptivateDev.com

            You can try to refresh the page (or do a blank.htm) on slide exit.  You’ll want to execute a JavaScript action on slide exit.  You can access the iframe like this:

            document.getElementById(‘iframe_Widget_140′).contentWindow.window.location = ‘http://CaptivateDev.com’; 

            Watch for word wrap.  That should be one line of code.  the ‘iframe_Widget_140′ name is dependent on the Item Name you gave the widget in Cp. It will take the format ‘iframe_’ + WidgetItemName + ’0′. So for example, if you inserted the web page widget with an item name of Widget_1, the iframe name would be ‘iframe_Widget_10′. If you copy/paste from the blog, make sure you paste into Notepad first to remove the smart quotes (slanted quotes)… JS doesn’t understand those.

          • John

             I tried this javascript:
            document.getElementById(‘iframe_Widget_220′).contentWindow.window.location = ‘http://CaptivateDev.com’;

            But it isn’t working. My widget is called Widget_22. I also tried current, parent and top but that didn’t help either.

          • http://twitter.com/CaptivatePro CaptivateDev.com

            @John:  Go ahead and send me your .cptx file to Jim At Captivate Dev Dot Com.  If it’s huge, you may want to use dropbox.com

        • Andrew

          I ran into something similar and just entered a CP slide that was .5 seconds long right after the slide with the widget on it. This worked for me.

          • John

            Hi Andrew,

            I tried that too. I even added another (empty) widget on the extra CP slide, hoping it would kill the previous widget. It didn’t :-(

          • http://twitter.com/CaptivatePro CaptivateDev.com

            @da4d04649ef74bbee6ade2dd95ca36d7:disqus :  I’ve sent you an email, but for those reading the blog, here’s what I did:  
            1.  Added JS to your “Next” button to redirect the iFrame to “about:blank”, then hid the iframe.  See attached Screenshot.  

            2.  Added JS to the slide Entry action to show the iFrame if the Learner decides to go back to the slide.  It will then redirect to the proper Camtasia video.  See attached screenshot.  

            This all depends on the widget’s item name being Widget_22.  If you replace the widget, remember to name it the same or the code won’t work.  I’ve tested this in IE, FF, and Chrome.  I did not test on Safari (I don’t have a Mac).  You will notice a momentary white flash as the iframe loads to “about:blank”.  This is unavoidable, but it does stop the video/audio and properly displays the next slide.

          • John

             Hi Jim,

            Thank’s for your great support! I works like a charm. Your web page widget is amazing. I can’t believe it’s free.

            Regards,
            John

          • digibox

            I’m having the exact same issue, and I would love to view the JS but the link doesn’t seem to work to the image attached. =( Any chance you could re-upload or dedicate a short post to this fix?

          • JimLeichliter

            Here’s the JS for the Slide Entry action.  This is the same slide the web page widget is on:

            document.getElementById(‘iframe_Widget_220′).src = “./taken/taak.htm”;showIframe(‘Widget_220′, ‘iframe_Widget_220′);

            Here’s the JS for the “Next” button which is also on the same slide the web page widget is on:
            var myRedirect = document.getElementById(‘iframe_Widget_220′).src = “./taken/taak.htm”;var myDelay = setTimeout(function(){hideIframe(‘Widget_220′, ‘iframe_Widget_220′)}, 1000);

            Watch out for smart quotes when you copy/paste from this blog.  JS doesn’t like smart quotes… it likes straight quotes so copy/paste to notepad first to get rid of them.

            taak.htm is the camtasia video he using as the source for the widget.

          • digibox

            Thanks for the quick reply. I’m trying to embed an HTML string though. How would I need to update the JS to make that work?

          • JimLeichliter

            Include the JS in your HTML string OR create an html page with the JS inside and use that.

  • http://www.facebook.com/christian.education Nathan Conkey

    Big thanks to yourself :)

  • Benjamin Bruce

    Hello Jim,
    Your widget seems to be working great for me, but I’ve run into a hitch. I’m using it to embed video, and while it works perfectly in almost every browser I’ve tried it in, Safari will not allow you to click any of the controls on the video. Here’s the URL, you can try it in Safari and then a different browser: http://tftw.org/sandbox/captivate/testing3.htm

    Do you have any idea what’s going on? Perhaps I’m doing something wrong? Thanks!

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @google-3a122074df620b8b573aac8ab3b9bc1a:disqus :  The web page widget produces an iframe that sits above your captivate presentation.  I checked Opera as well and it runs just fine.  I tested with Safari for windows and you are right.  Try changing the wmode to transparent or opaque in the .htm file and see if that makes a difference.

  • Jhoffman

    Hi, Will this work in Captivate 6? I just upgraded and can’t seem to get it to work.

    • JimLeichliter

      @Jhoffman:  It will be updated for Cp 6.0 soon.

      • Jhoffman

        GREAT!!!… Thanks.

  • Alan Wayman

    When this is upgraded to Captivate 6 will it work with the HTML5 output? 

  • http://twitter.com/CaptivatePro CaptivateDev.com

    @google-e143302feedbce2c1366438b34b00a22:disqus : Not initially, but it will once all the other widgets are upgraded for Cp 6.0 swf/htm output.

  • Melissa Morrison

    Hi Jim,

    Are you planning on making this for Captivate 6?

    Thanks,
    Melissa M.

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @e9527cf26d91ae30b9d2e91a88790f15:disqus : Yes, in fact I’m working on the web page widget for Cp 6 right now… hope to release it next week.

      • Jhoffman

        Any update on this? I’m very anxious to use it in a project I’m working on.

        • http://twitter.com/CaptivatePro CaptivateDev.com

          @JHoffman:  Hoping to release the web page widget for Cp 6 tomorrow.

  • http://twitter.com/enzofsilva Enzo Silva

    Hi. Will this work on Cp 6?
    Thanks.

  • http://twitter.com/CaptivatePro CaptivateDev.com

    The Captivate 6.0 version of the web page widget is now available and it supports HTML5 output:
    http://captivatedev.com/2012/08/07/adobe-captivate-6-x-widget-web-page-widget/

  • Steve

    Hi Jim,

    Thanks for this
    widget. It has been working well, until uploading my project to the Adobe
    Connect Server (testing was fine from my local server). I have phoned Adobe,
    who tested my package. They said the server is changing “something” and I
    should speak to you! It works fine as when published as SCORM, however, this
    means our LMS will not report properly. I am using Captivate v5. Can you
    provide a solution / workaround? Many Thanks, Steve

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Steve: Adobe Connect changes the folder structure when you upload a course. So if you’re using a relative path to a file in the widget’s settings, you need to account for this structure. Please read the section “For Adobe Connect Users” in the below link. http://captivatedev.com/2011/10/09/adobe-captivate-widget-dynamic-pdf-export/ This should point you in the right direction.

  • Rui

    Hi Jim, we have been using this web pages widget for the past 7 months and it has been awesome! However today when I tried to add one more this widget to a project that I developed 5 months ago, Captivate kept telling me “not a valid widget”. I am using the exact same version of Adobe Captivate (v. 5.5) and the same widget. It worked before, for many times. Do you know what could be the reason that it is not working now? Thank you!!

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Rui: Make sure you have the latest version of the widget. You can download the most recent version from the download details in the email that you got when you purchased the widget. You may want to try closing Cp and reopening. Some times it just doesn’t want to cooperate. I’d be happy to look at your project if you want to send it to Jim AT Captivate Dev dot com. Thx Rui!

  • John H

    Hi Jim,

    I’m trying to get this widget to work in our companies training materials but I am unable to get anything to work. I downloaded and tried your demo file and even that I can not get to display. I am uploading the .swf file to a server and have tried multiple computers and browsers to access it. One thing I noticed is that when I try it FF I can see the browser briefly display the http://www.captivatedev.com link in the bottom right as if it was trying to connect to it. Any thoughts on this issue?

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @ John H: This version of the widget is for Cp 5.x. There ‘s another one for Cp 6. Make sure you’re using the correct version. Also, you need to be viewing the .htm file in a browser. It will not work if you’re navigating to the .swf file directly.

    • John H

      I did notice that locally using the F12 key I can get the demo to work. But upon a live site it isn’t able to pull up the widget.

      • http://twitter.com/CaptivatePro CaptivateDev.com

        @John H: Correct. That’s a limitation of the trial. You’ll probably notice the red “Domain Not Allowed” in the upper right of the window. To remove the limitation, you’ll need to purchase the premium version.

    • John H

      I did get it to work using the F12 option. But on a live site I can not get the widget to popup.

      • http://twitter.com/CaptivatePro CaptivateDev.com

        @John H : That is by design for the trial widget.

  • Bethany

    Thank you so very much for the wonderful community contribution. This widget was so easy to use (I’m a novice!) and I’m excited by all the possibilities. Thank you!

  • Mike Zabinski

    Hi Jim

    I have been trying to get the widget to work inside of an Adobe Connect meeting. I want to have a pod show a web page. I can get the widget to work in Captivate using F12 so I know it works. I have uploaded the swf and htm files to the content folder in Connect. When I
    open a Share pod and load the swf it won’t connect to the web page I want to show. It just sits with the “loading” icon spinning. How can I do this?

    Many thanks for all your great contributions.

  • Charles

    Awesome widget – big time saver too! I inserted a web page into my CP file, looked well, however, the page is actually a Drag and Drop activity from a legacy lectora output. The Drag and Drop doesn’t seem to work when I publish and view the Captivate file. Is there any code I can add to the HTML to make this work? Thanks Charles

    • http://twitter.com/CaptivatePro CaptivateDev.com

      @Charles: Does the lectora output work outside of Captivate using the same browser? The web page widget is an iframe window that is overlaid on top of the Cp swf. It should work well. If you want me to troubleshoot, send over the .cptx file and the Lectora output to Jim AT CAptivate Dev dot com.

      • Charles

        Thanks for the quick response. Do you think it may have something to do with the wmode? I have set it to transparent. I will send off the CP file shortly. Thanks a million!