How do I add JavaScript?

Question

I'm creating a website and I want to display a widget from another website inside a block.

In the widget description, I have this information:

Paste this code at the top of your website code, with the other JS includes. If you are already loading jQuery, please remove it from the code below and only load the widgets.js

<script async src="https://widgets.nitropanel.com/widgets.js" type="text/javascript"></script>

Paste the following code where you want your widget to appear on your website, note that the widget is 100% width, so you will need to contain it.

     <div class="nitrous-widget" data-server-id="NN63197376" data-theme="green" data-refresh="10"></div>

How do I include this first code inside the header (or footer)?

Answer 1

Your canonical reference for this is here. In short:

1. Save the CSS or JS to a file. (I normally do this at
   docroot/themes/projecttheme_directory/js/)
2. Define a "library", which can contain both CSS and JS files.
3. "Attach" the library to a render array in a hook.

You can add these files globally, (see "Attaching to all pages") or to specific pages or blocks, (Attaching a library in a Twig template) There's a good deal of flexibility in how you can add your javascript, so be sure to review all the options listed there.