how to add javascript chatbot widget

[copdips]

Hello,

I would like to add a chatbot in mkdocs, and I have a very few knowledge about javascript.
I searched on google, tried something, but still failed. There's no chatbot displayed in the rendered pages.
I post my question here hoping someone could help me. Thanks in advance.

In fact, I registrered on botstar.com, it provided me an embedded code as shown in below screenshot:

And here's the source code:

<script>
  var BotStar = {
    appId: "s1419e930-ccb6-11ed-ba86-4d5c913fddd7",
    mode: "livechat",
  };
  !(function (t, a) {
    var e = function () {
      (e.q = e.q || []).push(arguments);
    };
    (e.q = e.q || []), (t.BotStarApi = e);
    !(function () {
      var t = a.createElement("script");
      (t.type = "text/javascript"),
        (t.async = 1),
        (t.src = "https://widget.botstar.com/static/js/widget.js");
      var e = a.getElementsByTagName("script")[0];
      e.parentNode.insertBefore(t, e);
    })();
  })(window, document);
</script>

I tried 2 solutions:

1st solution:

1. create file javascripts/botstar.js, and copy the above content without the <script> and </script> tags (I also tested with the tags).
2. in mkdocs,yml, add javascripts/botstar.js, the syntax should be ok, as another js tablesort.js works well.

   extra_javascript:
     - https://unpkg.com/[email protected]/dist/tablesort.min.js
     - javascripts/tablesort.js
     - javascripts/botstar.js

2nd solution

1. create file overrides/main.html, and set the content as follows:

{% extends "base.html" %} {%- block scripts %}
<script>
  var BotStar = {
    appId: "s1419e930-ccb6-11ed-ba86-4d5c913fddd7",
    mode: "livechat",
  };
  !(function (t, a) {
    var e = function () {
      (e.q = e.q || []).push(arguments);
    };
    (e.q = e.q || []), (t.BotStarApi = e);
    !(function () {
      var t = a.createElement("script");
      (t.type = "text/javascript"),
        (t.async = 1),
        (t.src = "https://widget.botstar.com/static/js/widget.js");
      var e = a.getElementsByTagName("script")[0];
      e.parentNode.insertBefore(t, e);
    })();
  })(window, document);
</script>

{%- endblock %}

Unfortunately, both solutions failed, and with my poor javascript knowledge, I've really no idea now.

[copdips]

it was a CORS issue, I resolved it, thanks