Adding a widget inside of an existing Hype project

I have a Hype interactive children’s book project that I’m just about ready to place in iBA. However, I was wondering if there is a way to add a Bookry “.wdgt” file into a Hype project? Thanks!

A .wdgt file is a zip file with a different name, so you would need to change the name of the .wdgt file to a zip file and then pull out whatever is within the Bookry widget and place it within an HTML widget.

This might require some reconfiguring if the .html file in the .wdgt file references files in a folder structure – you would need to make sure all files required for the widget to function are at the same level so you can access them from your Hype resources library using the ${resourcesFolderName}/ variable. So if you wanted to reference image.jpg, you would use src="${resourcesFolderName}/image.jpg" in your HTML widget’s code.

or right click and choose “show package contents”

As Daniel says, it wouldn’t be straight forward just to place code into Hype. I would set it up by placing the main.html code in a HTML widget with, as Daniel says, references to any .js file or assets with the ${resourcesFolderName} variable pre-fixed.

Thanks for the quick responses! I was hoping that it could simply copy the widget inside Hype some way without code and file management.

I gave it a try but not very good at this. Can you help if I supply my code for the HTML Widget?

Main.HTML Attached

Widget Location:
E:\Frank\My eBooks\Lulu & the Laughing Daisy - Final\iBook Version\Widgets\Bookry\memory-game.wdgt

That’s a screenshot – a zip file of your widget would be helpful. (1.2 MB)

You would drag & drop the contents of the widget (ctrl + click on it and then click Explore Package Contents) into into your Hype document’s resources library.

Next, you can reference the main HTML file by creating an HTML widget, then inserting this URL in the ‘Source URL’ field:

Next, make sure that the widget is the correct size. I believe this would be 1024x768, so your scene + HTML widget would need to be this size.

Thanks Daniel!

Here is a screenshot of my settings. I tried it and get a blank web page when previewing the scene

${resourcesFolderName} is a variable that gets converted during export, so you need that text in there. The text should be:


So with my “Specified URL” changed to what you posted above, should I be able to see the widget when previewing or only when exporting the entire Hype project? Right now, I don’t see anything when previewing.

Unfortunately you’re gonna have to do a few things before it works.

I would uncheck the "include in document <head>" for all .js files.

In your screenshot above you are putting int the Specified url wrong it should be


this is a special variable in Hype that points to the resources folder.

Make sure your HTML widget is the same as your .wdgt dimensions (in your case 1024x768) or you can edit the file to dimensions you want in an external editor.

As a reference: (1.2 MB)

Thanks for the help. This is now working in Preview. I do not see the background image of my memory card game but do see the cards. Thanks again!

Uncheck “Automatically optimize when exporting” in the resources pane (after highlighting the background image) and you will see it.

Umm… Its grayed out.

Like this?

Yep. For some reason it will not allow me to change it.

I notice that those assets seem to be under a folder (looks like a audio reference) I can’t quite see the name but you need re-drag them into the resources pane and avoid dropping them under that file :slight_smile: make sure the whole resources pane has a highlighted box around it. Not the file reference highlighted in blue.

Not sure how that’s able to happen :slight_smile: @jonathan?

Working. Thanks! The “Automatically…” allowed me to uncheck it when I moved the resources. Thank you so much!

Hi again and thank you so much for your help. I’m in the process of trying to get more than one widget to operate in a single Hype project. However, they both use similar files which cause problems. I’m not a huge fan of the organizational structure of the Resources system in Hype (this may just be my lack of understanding). How would you suggest getting both of these to work under a single Hype project? Also, is there a way to reference a page outside of a Hype project to iBA? This is a long shot, but I could put the Interactive Book contents on one iBA page and the games on another. The problem is that I’d like the user to be able to call the game from within the Hype project. What would you suggest? Thanks! (581.9 KB) (1.2 MB)