How to embed parts from Hype4?

Greetings! I was wondering, is it possible to embed pieces made in hype4 in a way other than animated gif? So far i have not been able to get “embed” to work.

Sorry for the dumb question
Thanks!

1 Like

I feel this has been discussed already, but worth a recap.

If what you are designing is just an animation (no interaction), the simplest integration method by far would be exporting a Lottie animation, which Sparkle supports directly.

If you have an interactive element, there are two ways. A simple one, that doesn’t require looking at code at all, would be to export the widget as standalone html from Hype, then upload that using an FTP app to your web host. Suppose this goes to https://yourdomain.com/widget/. Now in Sparkle you create an embed element, and in the settings enter that address directly. Sparkle knows to create an “iframe” code element, which essentially wraps the widget in an isolated area of the page.

The alternative requires a little more fiddling with code. Again export the widget, but this time for in-page integration. Again upload the the files to the web host, then from an embed block in Sparkle enter code that looks like this:

<div id="page_hype_container" style="position:relative;overflow:hidden;width:100%;height:100%;">
<script type="text/javascript" charset="utf-8" src="http://example.com/Page.hyperesources/page_hype_generated_script.js"></script>
</div>

Here http://example.com/Page.hyperesources needs to be changed to the hype folder name you loaded on the web server.

3 Likes