How to convert html,css,script into a javascript

Question

I am created a custom web chat widget using html,css,javascript and ajax calls.I want to convert or generate into a script that script is placed in any other websites or webpages that widget is loaded in their websites.for example some 3rd parties provide some widgets so we want those widgets we simply copy the script and paste into your website the widget is visible at a particular position in the website and it is worked.

I am new to this type of concepts.I don't know how to create that type of scripts.can any one tell me how to create external script links like i above mentioned in the example?

Even i don't know how to called those scripting links.

how can we generate that type of script? what type of code,software or tools are used to create that type of script links? how to write code for creating script?

Answer 1

There are many ways to do it. It also depends on if you use a framework or not, and on the type of widget you want to create. But below is a basic example which shows you how to create a button in the lower right corner of the page, and make it open a modal.

When you make such a script, which will be used on websites you don't own, there are rules you should follow. Here are some:

• Always wrap your JS code inside an anonymous function and declare your variables with var, to avoid polluting the global scope.
• Your HTML elements and CSS styles are shared with the page. Always prefix them with something specific to you, like my-widget-* to avoid breaking the page.
• The people who use your widget might (not intentionally) insert your script multiple times, in multiple places. Always check whether that is the case before adding anything to the page, for example by setting one specifically named global variable as a flag (eg. myWidget).
• You don't know which CSS is already on the page or not. If you want your widget to always look the same, use a CSS reset, but ONLY on your elements.
• ... I'm certainly forgetting other important rules. Feel free to add some. The key part is to avoid breaking other parts of the page you don't own, and making sure your widget works the same across different sites

You can try the example below by copying the code, opening your browser's JS console (F12) and pasting it in there. You should see a blue button appear in the lower right:

// When your code is executed on pages you don't own,
// always wrap your code like this so that your variables
// don't pollute the global scope of the page.
// Their name might collide with something and break the page.
(function() {
  // Check whether this script has already been added to the page
  // This is your ONLY global variable, name it something specific
  if (typeof window.myWidget !== 'undefined') {
    return; // Script already added, exit
  } else {
    window.myWidget = true;
  }
  // Inject your CSS
  injectStyles();
  // Inject your HTML
  injectButton();
  var modal = injectModal();

  function injectStyles() {
    // If you use an external stylesheet
    /*
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://example-widget-domain.com/styles.css';
    document.head.appendChild(link);
    */
    // Otherwise something like this
    var styles = document.createElement('style');
    styles.innerHTML =
      '.my-widget-btn { position: fixed; bottom: 1em; right: 1em; width: 5rem; height: 5rem; background: #0095ff; border-radius: 3rem; box-shadow: 1px 1px 3px rgba(0,0,0,.5); color: #fff; font-size: 2em; line-height: 5rem; text-align: center; cursor: pointer; } .my-widget-btn:hover { background: #0085dd; } .my-widget-hidden { display: none; } .my-widget-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,149,255,.8); z-index: 9999; } .my-widget-modal { position: fixed; top: 4em; left: 50%; margin-left: -200px; width: 400px; background: #fff; padding: 1em; border-radius: 3px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); }';
    document.head.appendChild(styles);
  }

  function injectButton() {
    var btn = document.createElement('div');
    // Give it a class for styling
    btn.className = 'my-widget-btn';
    // Add content to it
    btn.innerHTML = '#';
    // Give it an event listener for clicks
    btn.addEventListener('click', openWidgetModal);
    // Append it to the body
    document.body.appendChild(btn);
    // Return it
    return btn;
  }

  function injectModal() {
    var backdrop = document.createElement('div');
    backdrop.className = 'my-widget-backdrop my-widget-hidden';
    backdrop.addEventListener('click', closeWidgetModal);
    document.body.appendChild(backdrop);
    var modal = document.createElement('div');
    modal.className = 'my-widget-modal';
    modal.innerHTML = '<h2>Hello world!</h2>';
    backdrop.appendChild(modal);
    return backdrop;
  }

  function openWidgetModal() {
    modal.classList.remove('my-widget-hidden');
  }

  function closeWidgetModal() {
    modal.classList.add('my-widget-hidden');
  }
})();

Note: It would be too long to describe every property or function used in this example or every other possible alternatives.

If there are functions you don't know in the code above, search them individually on Google or StackOverflow to fully understand what they do, and eventually alternative ways to do these things.

Once you know these basics, you'll have knowledge about which keywords are important when searching for further info, tutorials and tools.