topic Re: Adding a Javascript widget to my website in CMS Development

Adding a Javascript widget to my website

jspector — Wed, 14 Mar 2018 13:05:05 GMT

Hello all,

I tried reaching out to Hubspot support but they just recommended I post my question here. I want to add some javascript coded widgets to my homepage, but I'm not sure about how to do it.

Code is below:

Is there a simple way to do this with the Hubsot Design Manager? Thanks!

Re: Adding a Javascript widget to my website

AJLaPorte_diagr — Wed, 14 Mar 2018 15:58:04 GMT

Depending on the version of design manager you are using:

DMv1: You should be able to go to the edit button and choose edit head and paste the code there. If you want this in the footer, you would have to add a custom HTML module to the bottom of your site and add the script in there as the original DM doesn't have an "edit footer" option.

DMv2: When you open the template you should be able to see options on the right that will let you add code to the header and footer of the template.

Another option is to go into your content settings and on the web pages options towards the bottom, you will see areas to place the JS. This will place it on all pages on the site.

Re: Adding a Javascript widget to my website

edjusten — Wed, 14 Mar 2018 20:48:07 GMT

Hi @jspector In addition to the above, if you want to place the code on an individual page, go to the edit version of the page and click Settings from the top menu then scroll down and click Advanced. You'll find modules to add javascript to just the individual page.

Thank you,

Ed Justen

PS: Thanks for the input @AJLaPorte_diagr !

Re: Adding a Javascript widget to my website

jspector — Mon, 19 Mar 2018 13:23:48 GMT

Hey thanks for the feedback, however, I still cannot get it to work. After doing some digging, I found some additional instructions from Gartner (it's their peer insights widget:

Best Practices for adding Gartner Peer Insights Widget to your pages:

You must edit the script to include the HTML container to indicate widget location on the page (left rail, right rail, middle, etc.).

Please note that the script we provide contains only an example and not the actual HTML selector you should use when you implement it.
You should remove our example and replace it with your HTML selector.

The ideal placement of the edited widget script is at the end of the page code itself. You can add it right before the closing BODY tag.

This is the easiest way to implement the widget.
Please note that the HTML container must exist on the page and placed before the code snippet in the HTML document for the widget to work correctly.
Although the widget script can be placed in the HEAD tag, it will require additional development work from your team in order to work as expected.

I'm not the most experienced with HTML and JS code so I'm not exactly sure the right way to go about this. Any help or feedback on how to get these to work in Hubspot would be very much appreciated. Thanks.

Re: Adding a Javascript widget to my website

AJLaPorte_diagr — Mon, 19 Mar 2018 15:54:03 GMT

Are you able to post the embed snippet that you have? If you are not able to post it here for privacy reasons, can you DM me the code and I can help further? Without being able to see the code, it would be hard to direct where to make changes.

Re: Adding a Javascript widget to my website

jspector — Mon, 19 Mar 2018 19:01:46 GMT

The code is below:

src="https://www.gartner.com/reviews/public/Widget/js/widget.js"></script>

GartnerPI_Widget({

size: "small",

theme: "dark",

widget_id: "Y2RmODI4N2UtOGQzMy00NjNkLWFmM2ItNGI1ZWRjZWZmZDYw",

container: //DOM node in which the widget is to be rendered [e.g. document.querySelector("#myNodeContainer")]

})

</script>

Re: Adding a Javascript widget to my website

AJLaPorte_diagr — Mon, 19 Mar 2018 20:55:47 GMT

Ah ok, so what you are going to want to do is the following:

Add a div in your page where you want the embed to show. This can be done by simply going into the edit source button in your rich text editor. Looks like this: </>

In there, you simply place this code:
```
<div id="gartnerDiv"></div>
```
If doing this site wide, you can go to your Content Settings > Web Site Pages > Page Templates Tab and then look for the Site Footer HTML box and place the following code there:
```
<script type="text/javascript" src="https://www.gartner.com/reviews/public/Widget/js/widget.js"></script>
<script type="text/javascript">

    GartnerPI_Widget({
        size: "small",
        theme: "dark",
        widget_id: "Y2RmODI4N2UtOGQzMy00NjNkLWFmM2ItNGI1ZWRjZWZmZDYw",
        container: document.querySelector("#gartnerDiv")
    });

</script>
```
If doing this on just a single page, you can go the settings tab in your page editor and place this code in the Site Footer HTML as well. You will also then have to take the code from step 1 and add it to the rich text area of the page.

Let me know if this helps at all. I have also created a codepen where you can see this in action: https://codepen.io/ajwsol/pen/jzyMLz

Re: Adding a Javascript widget to my website

jspector — Mon, 19 Mar 2018 20:59:17 GMT

I'll give it a shot thanks!

Re: Adding a Javascript widget to my website

KEU174 — Wed, 02 Dec 2020 21:04:03 GMT

Is it possible to add this script to just one of my website pages, using a similar methodology?

Re: Adding a Javascript widget to my website

dennisedson — Thu, 03 Dec 2020 15:12:12 GMT

@KEU174 , you should be able to add to the head or footer per page as documented here

Re: Adding a Javascript widget to my website

Amit_Dhiman — Tue, 16 Mar 2021 08:14:41 GMT

Hi, I am working on the same thing. But it didn't work for me.

Re: Adding a Javascript widget to my website

dennisedson — Tue, 16 Mar 2021 15:10:12 GMT

@Amit_Dhiman ,

You can also use the require_js function detailed here