Now if you have the widget installation script copied from the settings page, you are probably wondering where to put this script in your file to load the widget.
Well, there could be more than one way you can inject this installation script into your application depending upon the framework that you use. For browser-rendered (CSR) frameworks like React, Angular, and Vue or with Vanilla JS projects, adding the widget script is fairly simple and straightforward. All of these frameworks, by design, are expected to ship a default public index.html file which the browser initially loads into the DOM. We can transform our copied script to a <script> tag as follows and append it to the <head> tag of your index.html file and the widget should appear the next time you load your application.
<head>
<!-- other head elements -->
<script>
(function () {
// widget installation function body from settings
})();
</script>
</head>However, if for some reason, you don’t want to directly expose the script within <script> tag of your HTML, We can still use the same script as part of your framework’s component life cycle method to execute the script and initialize the widget. The script should be executed from the ‘mount’ lifecycle method of the root component, which is the topmost parent in the component hierarchy. The approach differs across frameworks. For reference, we have a demo app built for each popular framework which should give you a rudimentary idea of how this can be done.
React
https://codesandbox.io/p/sandbox/neetochat-react-ww4g9h
Vue
https://codesandbox.io/p/sandbox/neetochat-vue-dtplv7
Vanilla HTML-JS
https://codesandbox.io/s/neetochat-html-cyg4dv
Next.js