How to insert a widget with a jscript in wordpress pages/posts

LOL But this seems really really difficult. Can someone help me out, please? How can I do this, please?

It only seems so, but it’s not really so 😀

Do you want to display the IQAir widget on a particular page/post ONLY, or do you want this to appear throughout the entire site?

If you want to display the widget in a particular page/post only, and if you’re using the native WordPress block editor (aka Gutenberg), insert a new CUSTOM HTML block into the page/post in question, copy and paste the entire IQAir code into this CUSTOM HTML block, and update that page. That’s all.

If you want to display the widget throughout the entire site, you’ll have to look for an appropriate Widget Area on your site where you want to display the IQAir widget (Sidebar, Header, Footer, etc — this depends on your specific theme). Then insert a CUSTOM HTML block into that area. (If your version of WordPress is 5.7 or earlier, you’ll have to insert an HTML Widget instead, as 5.8 overhauled the widgets system in WordPress.)

If something is not clear, please let me know. But also include your website address so I can fish shout some pertinent details.

I think I have the updated Gutenberg. It’s called Advanced Editor Tools (previously TinyMCE Advanced) Extends and enhances the block editor (Gutenberg) and the classic editor (TinyMCE). And it’s got that custom HTML block.

I was referring to just the default, native editor that comes with the 5.8 you’re running. If you’ve installed the Gutenberg plugin just for this, please remove it, as you don’t need it.

I was also referring to the Custom HTML block that comes with WordPress by default. You don’t need this mouthful “Advanced Editor Tools (previously TinyMCE Advanced) Extends and enhances the block editor (Gutenberg) and the classic editor (TinyMCE)” plugin for this to work. If you installed this plugin just for this, kindly remove it as well — you don’t need it.

I can see on your site that you’ve inserted the code at three different places.

The reason they’re all not working has to do with the code, and not your website or anything you may be doing wrong.

Thankfully, the problem is very easy to fix:

Just change the http in the code to https (note that s here). So the code becomes:

<div name="airvisual_widget" key="XXXXXXXXXXXXXXXX"></div>
<script type="text/javascript" src="https://cdn.airvisual.net/assets/widgets/widget_v3.0.js"></script>

Here’s the code working on my test site, using the CUSTOM HTML BLOCK that comes with WordPress’ block editor by default:

EXPLANATION (IF YOU ODN”T MIND)

Your site uses a secure connection (ie HTTPS). Such a secure site will not allow loading anything from links that use insecure connections (ie HTTP). So even though WordPress inserted the IQAir code properly, our browsers were blocking the code from executing. That simple flip of the address from HTTP to HTTPS fixes this 😀