Wordpress plugin - no javascript files or <head> in embedded OAMs

Exporting & Previewing
1

Hi team,

I have attached an example file, which uses chart.js and also contains a console.log in the document head.

When I use the Wordpress plugin to insert the exported OAM, it seems that the javascript library chart.js is not loaded (no error is thrown) and the script in the does not run.

Examining the OAM file itself, I can see that the script and the console.log are being exported, so I presume the problem I am facing has something to do with the Wordpress plugin.

I would appreciate any help you can offer, thanks!

example OAM.hype.zip (124.5 KB)

1 Like
2

When embedding with the plugin, the default embed mode is ‘div’ which strips anything you have in the head. The embed in this format does not include the entire HTML document, just the embedded Hype <div>.

So you’ll need to switch to the ‘iframe’ embedding method on the list of embeds:

40%20PM
Screen Shot 2018-09-20 at 12.13.40 PM.png1032×276 48.8 KB

Or, you can embed the chart info somehow in your Wordpress page where you have the object embedded.

3

Thankyou for your assistance, Daniel.

Re: using <iframe>, I have tried to move the javascript files out of the <head> and into a div, like so:

h1
h1.jpg1170×386 95.5 KB

I have unticked the ‘include in head’ option for each of the javascript files:

h3

I can see the javascript files are still included on the exported .hyperesources folder:

h4

However the script is not loaded:

h2

Am I missing something obvious? Hype file attached :slight_smile:
example OAM.hype.zip (113.2 KB)

4

Super close: You actually do want to keep those JS files included in the head.

  1. Check those 'include in head boxes for the two functions
  2. Re-upload the OAM widget to the Wordpress plugin
  3. Visit the list of your uploaded widgets and modify this one to be embedded as an ‘iframe’:
    48%20AM
    Screen Recording 2018-09-21 at 09.48 AM.gif1086×569 224 KB
  4. Use the shortcode to embed and it will load everything correctly.

An alternative for you is to use the free CDN for Chartjs ( https://cdnjs.com/libraries/Chart.js/1.0.2 ). Or, you could host those JS files on your server, and use absolute URLs within the inner HTML of your rectangle (example: https://site.com/chart.js). When using relative URLs, the URL structure of Wordpress pages confuses things and they can’t be found. The iframe method is likely what you want here.

5

Thank you, Daniel, much easier than I expected :slight_smile:

6

Hello again!

The iframe method of embedding does indeed work, however I am hoping to avoid iframe if possible. I tried your second solution of using a CDN, however I cannot seem to get it to work unless I use the ‘html widget’.

For instance, if I do the following:

js-in-div
js-in-div.jpg1586×468 97 KB

No javascript file is loaded by the browser (regardless of whether I am embedding in WordPress or not). Interestingly, the stylesheet does load. If I put the same code inside a widget then everything loads as expected. Is there something I am missing here? Hype file attached :slight_smile:

OAM-test2.hype.zip (6.2 KB)

7

You’ll need to load the JS file as HTML, not within the inner HTML of a rectangle. The CSS reference is a bit more forgiving, but the JS file needs to be loaded either in the head of your Wordpress site, within the HTML Widget (which is an iframe), or some other way that isn’t a dynamically-created Hype element.

8

Much appreciated, thank you!