Create an embeddable "widget" from the JS script

I would like to be able to embed the content that gets created via this snippet anywhere I like, using one line of code - same way that you get any kind of snippet somewhere, so that it renders an iframe or similar in return. I am not sure where to start with that, and if this what I already have is usable/ready to "convert" to an embeddable snippet. I went through a few tutorials but it was quite confusing since it was using some backend stuff I don't really understand...

Obviously, it should be hosted somewhere, but the part where I need to "call" the snippet is not really clear to me. Now, it just appears everywhere on my website since it's just a normal JS file which gets included, same as all other files.

It would be great if I could just pack it somehow and call it like this let's say:

<script src="link-to-my-snippet.js"></script>

If someone could direct me a bit that would be great.

const data = [
  {
    name: "John Doe",
    age: 40
  },
  {
    name: "Jane Doe",
    age: 50
  }
];

window.addEventListener("DOMContentLoaded", function() {
  function Item(configurationObject) {
    apiCall(data);
  }

  function apiCall(data) {
    // Do some API call and get back the data
    // With the Unique ID that wass passed in via the 
    // configuration Object
    // "data" is faked just for the demonstration
    createHTML(data);
  }

  function createHTML(data) {
    const mainDiv = document.createElement("div");
    document.body.appendChild(mainDiv);
    let html = '';

    data.forEach((user) => {
      html += `
          <div class="test">
              <p>${user.name}</p>
              <p>${user.age}</p>
          </div>
        `;
    });

    mainDiv.innerHTML = html;

    createStylesheet();
  }

  function createStylesheet() {
    const style = document.createElement("style");
    style.innerHTML = `
        .test {
                background-color: lightgreen;
            color: white;
        }
    `;

    document.head.appendChild(style);
  }

  let configurationObject = {
    uniqueID: 1234
  }

  let initialize = new Item(configurationObject);
});

Solution

There are two ways:

Using modern javascript - ES6, Webpack, SCSS, and then bundle all in a single file using NPM Follow: https://blog.jenyay.com/building-javascript-widget/
Pure JavaScript - Custom Created.

You can create a self-executable anonymous function like this and write your complete widget code - including your HTML, CSS, etc inside this. It will be executed once your page is loaded with this script.

(function() {
    // The following code will be enclosed within an anonymous function
    var foo = "Hello World!";
    document.write("<p>Inside our anonymous function foo means '" + foo + '".</p>');
})(); // We call our anonymous function immediately

For the second type solution you can also follow following article: https://gomakethings.com/the-anatomy-of-a-vanilla-javascript-plugin/