Handling API's in Javascript | Does Vanilla JS and browser JS engines handle it?

[codeispoetry]

There are apps and businesses that allows integrating dynamic forms, appointment scheduling calendars, chat, and etc on a third part website. The data for snippet on a third party websites, where it is finally rendered, comes form the app website How is this handled in JS?

Node.JS works on desktop, but often I come across content that advocates building REST api’s in node.JS.

Additionally,

For example go this website, and click Live chat available. It is a snippet that is coming from a 3rd party. How does this work. It used chrome JS engine(by making use of JSON) or it is or it may use node.js?

[m3g4p0p]

Hi @codeispoetry, in that live chat example it just seems to be a matter of loading the script, which provides functions to add widget buttons:

<script type="text/javascript">
document.write(unescape("%3Cscript src='" + ((document.location.protocol=="https:")?"https://snapabug.appspot.com":"http://www.snapengage.com") + "/snapabug.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">
SnapABug.setButton("https://sendgrid.com/images/chat/available.png");
SnapABug.addButton("cf3e285d-dd43-4c1e-ab98-3452c52c586f","0","10%");
</script>

This is a very bad way to load external resources though; using document.write() should generally be avoided, and scripts injected like this may not even get executed. The proper way to load scripts without blocking the parser would go something like this:

function loadScript (source, onLoad, onError) {
  const script = document.createElement('script')

  script.src = source
  script.onload = onLoad
  script.onerror = onError
  script.async = true
  document.head.appendChild(script)
}

loadScript(
  '//www.snapengage.com/snapabug.js',
  () => {
    /* global SnapABug */
    SnapABug.setButton('https://sendgrid.com/images/chat/available.png')
    SnapABug.addButton('cf3e285d-dd43-4c1e-ab98-3452c52c586f', '0', '10%')
  },
  console.error
)

So far there doesn’t seem to be some sort of REST API involved; when clicking the button, that snapabug script just loads another small script with some configuration settings. Also this does not per se relate to nodejs… if you do have a REST API then the consumer shouldn’t need to care in which language it is implemented.

[codeispoetry]

@m3g4p0p

So far there doesn’t seem to be some sort of REST API involved

Ok. So how are they rendering code on 3rd party. No just rendering email, sent through that form are sent through there server settings. That example is not exhaustive. I asked question in general when entire setup is on vendor site and snippets are integrated on 3rd party how that is handled.Any search term that I can look for on google to understand that better?

[m3g4p0p]

@codeispoetry

I asked question in general when entire setup is on vendor site and snippets are integrated on 3rd party how that is handled.

There’s nothing special about it, if you have a 3rd party script that provides certain services you’d just include it like any other library. That script may then provide functions to render its components similar to jQuery UI (say), and send AJAX requests to their server as usual.

The only caveat regarding AJAX requests is that CORS must be enabled on the server; often you’ll also have to provide an authentication token that you get when registering for those services.

[codeispoetry]

Thank you so much very informative.

[codeispoetry]

@m3g4p0p

often you’ll also have to provide an authentication token that you get when registering for those services.

One more humble request if you can discuss a little bit of this or perhaps guide me to some further reading. Authentication token I understand: An API key is often given by such services, but how they interact with the main service provider server with such tokens as the digital toll gates: through AJAX I guess, and what are the potential security threats involve in such interactions, and how are such interactions made more secure?

[m3g4p0p]

The API key may also be passed as a query parameter to the script URL – take the google maps API as an example. The reason for this are not so much security issues, but to only allow registered users use the service in question, especially if billing is involved. Security OTOH should be ensured by just serving your site over HTTPS.