There are three ways to put a graph in front of people: embed it into a web page you control, hand out a single self-contained file, or link to the hosted gallery. This page covers all three and when to use each.
This is the classic way, and it still works. The engine publishes a global KG and, when the page loads, scans the document for elements with class kg-container, reads a spec out of each, and renders it. So you include the engine once and drop in one container per graph.
<!-- once per page: the engine, and (for math) the KaTeX stylesheet -->
<link rel="stylesheet" href="https://your-site/lib/katex/katex.min.css">
<script src="https://your-site/lib/kg.js"></script>
<!-- one block per graph, anywhere in the body -->
<div class="kg-container" width="640">
<script type="application/json">
{ "version": "0.1", "title": "Monopoly", "params": [], "axes": {}, "objects": [] }
</script>
</div>
The spec goes in a <script type="application/json"> inside the container, the width attribute sets the graph size, and it renders itself on load. Put as many kg-container blocks on the page as you like and they all render from the one shared kg.js. That shared engine is the advantage of the script embed over a separate file per graph: three graphs on a page still load the engine once.
The child <script type="application/json"> above is the usual one. Two alternatives:
<div class="kg-container" data-spec='{"version":"0.1", ...}'></div>.KG.mount(document.getElementById("myDiv"), specObject).If you add containers to the page after it has already loaded (an AJAX-loaded tab, a single-page app), call KG.loadAll() afterward and it renders any new kg-container elements it finds.
Point the src and href at wherever you keep kg.js and katex.min.css. Your deployed site already serves them at lib/kg.js and lib/katex/katex.min.css, so you can reference those URLs from any page. Loading JavaScript and CSS through <script src> and <link href> tags is allowed across origins, so pointing at your hosted kg.js from a different site, a blog, or an LMS page works fine. (This is unlike the in-editor "Download standalone" button, whose fetch needs the page to be served from the same origin.)
When you can't add script tags to a page, or you want something that works with no internet at all, use a self-contained file instead. Every graph in the gallery has a Download this graph button, and the builder and code editor have a Download standalone button, both of which give you one HTML file with the engine, fonts, and spec all inlined. It opens offline anywhere.
Drop that file into an LMS as an uploaded file students click, or embed it in a page with an iframe:
<iframe src="monopoly-pricing.html" width="820" height="560" style="border:0"></iframe>
The iframe route is the fallback for locked-down LMS pages (some Canvas and Moodle configurations strip <script> tags out of pasted HTML). The file is fully isolated, so it can't conflict with anything else on the page.
For your own web page or blog where you control the HTML, use the script embed pointing at your hosted kg.js. It is the lightest option and many graphs share one engine. For an LMS page that allows raw HTML, the same script embed works. For an LMS that strips scripts, or for an offline handout or an email attachment, use a self-contained file (iframe it or upload and link it). And to just show or browse the whole set, share the gallery URL.