Support » Fixing WordPress » How to insert a widget with a jscript in wordpress pages/posts

  • Resolved Sarah McLean

    (@kevinduke)


    Hi all,

    I am a complete newbie to web development…

    So I wanted to show some air quality data on my new WordPress website. I used [ redundant link removed ] to create the below custom widget code with javascript and tried so many different tutorials and plugins with no success at all.

    Below is the widget I’m trying to insert into my page. (xxxxxxxxxx part is my key)

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

    iqair website says that;

    “Your widget is ready
    Your widget have been successfully created. Copy the code below on any website you want to display the widget.”

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

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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.

    Thread Starter Sarah McLean

    (@kevinduke)

    hi George,

    Thanks for the reply. Yes I want them to be in specific pages. Like I want to show air quality of Spokane, Washington in Spokane page. My website is very new and I’m building it.

    I tried custom html already but it just doesn’t output anything. 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.

    https://grabbingit.com/spokane-air-quality

    See nothing shows up.

    Is this because of that javascript? I heard wordpress doesn’t like it??

    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 ๐Ÿ˜€

    Thread Starter Sarah McLean

    (@kevinduke)

    WoW! You are a Genius! I haven’t even tried to apply your fix, but I’m sure it will work!

    I will reply here with the result.

    I know it seems easy after you have shown what to do, but it takes a genius to figure that out. In this case, it’s you!

    Thank you ๐Ÿ™‚

    Thread Starter Sarah McLean

    (@kevinduke)

    It just worked! I only added that tiny little “s” ๐Ÿ˜€

    Thanks, George, You saved me and my time! I feel silly for those numerous plugins I tested all day long ๐Ÿ˜€

    • This reply was modified 11 months, 1 week ago by Sarah McLean.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to insert a widget with a jscript in wordpress pages/posts’ is closed to new replies.