Adding Hype to WordPress with DiviBuilder

I am forging a new river, trying to add a Hype animation to a WordPress site that runs DiviBuilder. I can add code in Divi Builder, but don’t see a way to add an iFrame (which is how I normally play my animations inside of a software). I tried the Hype plugin and it failed with the message, “The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature”.

Basically I’m swimming in circles, looked on the forum and can’t find the basic content of how to add the animation to WordPress. The task is exacerbated by the fact I don’t have direct access to the server, can’t upload any files except through WordPress.

How do I do this?

I'm not sure but probably wordpress can show contents via iframe only if the content is stored in the WP main folder

Hi there,
I’ve had some experience with a similar issue, but I have never been able to load a hype document stored in the database.
The support documentation is pretty clear about the requirements for using a hype document within a CMS: first requirement is access to upload your document into the file system of your web server.
If you find a workaround for this, definitely let me know; I would love to be able to place hype items into pages from the database.

I am trying to load it up using the Hype plug-in to create the shortcode that I then paste into a Code section in Divi Builder. It’s not working.

Are you loading it in .OAM format? The Hype-Animations plugin requires you to export your Hype project as OAM and upload it in that format

I think that the easier way to do this is to follow the directions on the tumult website and as provided by the application. Specifically, opening the .html file and copying and pasting the “3 lines” of HTML code into your code module in the Divi builder. This is the only way I’ve gotten it to work outside of inserting the 3 lines into a text box in one of the other modules.
I recommend forgetting about the plugin and learning more about how to do this process quickly and effectively. But on the other hand, I’m not sure that you can display your hype document unless you have access to a server to upload it.
A theoretical workaround for the problem of not being able to upload files to your servers file system is to upload the hype folder into a remote server and then changing the code snipped in the hype document to follow the path to where your document is stored on your remote server.

Yes it only takes .OAM files.

@ChrisRees thanks for the info. I didn’t know there was an article explaining it, thanks for mentioning, I think I found it… “Video: Embedding in Wordpress (Posts, Pages & Themes)”

I can, in theory put up the files, but it’s difficult as I don’t have direct access to do so. I tried it on my server and it keeps stripping out the code, it did this in both Divi Builder and in “Text” mode without Divi when I tried it. I am concerned about the SSL factor, but I don’t think I am hitting that wall yet.

I’m really surprised that it’s this hard to get Hype into WordPress. Thanks for any continuing help.

I've seen this once, so you may be hitting a weird bug. In text mode, when you copy your embed code it would look sort of like this:

If you remove the tabs and line breaks and make the code more like the following it shouldn't strip anything:

An excellent reason to signup to Amazon web services. I've been haphazardly loading stuff into my Amazon S3 storage for years and my bill is up to about $1 a month and all files can be accessed via SSL.

I’ve gotten access to my server which should solve most of my problems, but even after putting the content into the “uploads” folder and following the instructions in the video, and making sure every space and return were taken out, it still shortens the code to <div></div>.

Has anybody worked in Divi Theme adding Hype animations?

Actually it has nothing to do with the Divi Builder, I tried it in a regular Text box and it didn’t work either, did the same thing, after I updated it, it turned to <div></div> just like in the Divi Builder. Anybody?

I am pasting this…
<div id="whyampheatmap_hype_container"style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;"aria-live="polite"><script type="text/javascript"charset="utf-8"src="wp-content/uploads/2016/07/whyAmp-heatMap.hyperesources/whyampheatmap_hype_generated_script.js?55285"></script></div>

A couple things:

  • You have a responsive height for your document. Uncheck ‘scaling’ on the height dimension. The height of your document will likely be calculated as zero since posts do not have a preset height.
  • Use the full URL of the .js file. To avoid issues with http and https, you should use something like this: src="//example.com/wp-content/uploads/2016/07/whyAmp-heatMap.hyperesources/whyampheatmap_hype_generated_script.js?55285">
  • I’m not familiar with divi builder, but it may be trying to be smart and removing code. Can you try one of the widget types like ‘full width code’ ?

Hi ! I want to do the same thing ! Embed an animation but not with iframe, using that method : https://www.youtube.com/watch?v=CuwkJTtuGLc
I am doing everything right (I can control that I have the right adress as shown in the video) but when I add a new post or a new page, nothing appear !

I thought my project was to big so I just made a simple circle on a white background and that’s the same issue !
Here the code :

Any idea ?