Adding a Javascript widget to my website

[jspector]

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:

<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: //DOM node in which the widget is to be rendered [e.g. document.querySelector("#myNodeContainer")]
})
</script>

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

[edjusten]

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 ! 

[jspector]

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:

1. 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.

1. 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.

[AJLaPorte_diagr]

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. 

[jspector]

The code is below:

<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: //DOM node in which the widget is to be rendered [e.g. document.querySelector("#myNodeContainer")]

                })

</script>

[AJLaPorte_diagr]

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

1. 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>

2. 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

[Amit_Dhiman]

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

[dennisedson]

@Amit_Dhiman ,

You can also use the require_js function detailed here

[KEU174]

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

<script src="https://cdn.logwork.com/widget/countdown.js"></script>
<a href="https://logwork.com/countdown-24tf" class="countdown-timer" data-timezone="America/Los_Angeles" data-date="2021-01-04 05:00">Changing the Landscape of IT Security</a>

[dennisedson]

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

[jspector]

I'll give it a shot thanks!

[AJLaPorte_diagr]

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.