Create an embeddable "widget" from the JS script

Question

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);
});

Answer 1

I'm assuming that you have some local static HTML/CSS page.

First off, you don't need to render the generated HTML by the javascript in an iframe, almost any element will do. The purpose of JS is to create, manipulate and read DOM-elements, so don't feel limited.

Secondly, some of that code is useless for your purpose, unless you plan on doing stuff with an API (which I assume not), and have an actual need for a unique ID. In that code, that unique Id isn't unique anyway and isn't used for anything.

There is so many ways to implement this script on any page of your choice, but here's one:

You have a HTML-file, in that one, put:

<div id="users-list"></div>

wherever you want the list to appear.

Create a file called whatever you want, but for example users-list.js. Check the demo in my answer for the JS code to put in that file.

In any HTML file where you have added an element with the ID of 'users-list', simply also add the script in that same HTML file. Preferably before the ending tag.

<script src="/path/to/users-list.js"></script>

Of course, you make this in so many ways, and expand on it infinitely. For example, something like this could be cool to have:

<div id="some-div-id"></div>

...

<script src="/path/users-list.js">
  getUsers({
    element: 'some-div-id'
    theme: 'dark',
    layout: 'boxes' // or 'rows'
  }); 
</script>

Then you could invoke the script on different pages with different generated HTML, but of course, that would require some modification of your JS code, to actually print out different css content, and getting the right element to place the data in.

In any case, it wouldn't be hard to do.

But back on topic, working demo:

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

const styles = `
    .user {
        background-color: lightgreen;
        color: white;
    }

    .age { font-weight: bold; }
`;

function setStyles() {
    const styleElement = document.createElement('style');
    
    styleElement.innerHTML = styles;

    document.head.appendChild(styleElement);
}

function setUsers(users) {
    let element = document.getElementById('users-list')

    let usersHtml = '';

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

    if (element) element.innerHTML = usersHtml;
}



window.addEventListener("DOMContentLoaded", function () {
    setUsers(users);
    setStyles(styles); 
});

<div id="users-list"></div>

Here is an example of a self invoking recursive IIFE checking for the document readyState, better than the accepted answers solution

const myPlugin = () => {
  // stuff
}

/** 
 *  Checks the document readyState until it's ready
 */
(ready = (delay) => {
  // this is always 'complete' if everything on the page is loaded,
  // if you want to check for a state when all html/js is loaded but not all assets, check for 'interactive'
  if (document.readyState == 'complete') {
    myPlugin() // your stuff being invoked when doc is ready
  } else {
    console.log('Retrying!')
    setTimeout(() => { ready(delay) }, delay)
  }
})(50)

Answer 2

There are two ways:

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

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