Embedding Plotly graphs into Wordpress

Recently I’ve been working on PT1’s newsletter. (Shameless plug: )

We also post the newsletter editorials onto our website, and sometimes the website gets some extra bits too.

This week, we did an analysis of funding rounds which was full of graphs:


The downside of complex graphs like treemaps is that they work best when they’re interactive. Static images, like what you get in a newsletter, just aren’t the same.

I wanted the web version to have working, embedded, interactive graphs. Sadly, it wasn’t as easy as I thought it would be.

For posterity, here’s what I did:

Situation:

• Wordpress corporate website, with an Elementor pre-set for all new posts
• No access to page html

Goals:

• embedded interactive plotly graphs
• as lean as possible
• using the Wordpress custom html block
• I didn’t want to use deepnote embedding as it feels slower than hosting it directly

Process:

The process was a bit painful, but this method ended up working well.

1. Export the Plotly graphs to html files, with the following function arguments:

import plotly.io as pio
#fig = px.bar(df, ....)
pio.write_html(fig, file='relevant_deals_treemap.html', auto_open=True,include_plotlyjs='false')

You need to include the include_plotlyjs=’false’ in the argument as this produces the lightest html files. However, I need to have the plotlyjs library available on the main page where these will be embedded.

1. Upload those html files to a public GitHub repo. I made a public repo called plots and just started to upload files there.
2. Embed those html files as an iframe through wordpress. First, you need to add this to the top of the page (or in the if you have access):

<script src="https://cdn.plot.ly/plotly-2.29.1.min.js" charset="utf-8"></script>

Then, use this to embed the graphs:

<iframe src="https://htmlpreview.github.io/?$GITHUB_FILE_PATH" width="100%" height="800"></iframe>

And this works!

I was heavily inspired by this blog here, but needed to make some changes to their approach to make it work.