jinni-bot/index.js

A vanilla JavaScript library for embedding the Jinni Chatbot

class JinniBot extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.initializeChatbot();
  }

  initializeChatbot() {
    const bot_id = this.getAttribute("botId");
    const app_host = this.getAttribute("appHost");
    const visible = this.getAttribute("visible");
    const template = this.getAttribute("botTheme");

    const pjBotLoad = (tag, attributes, parent) => {
      const element = document.createElement(tag);
      Object.entries(attributes).forEach(([key, value]) =>
        element.setAttribute(key, value)
      );
      parent.appendChild(element);
    };

    pjBotLoad(
      "script",
      { src: "https://dze9g4ipzy6n3.cloudfront.net/static/js/main.min.js", async: true },
      document.body
    );

    pjBotLoad(
      "link",
      { rel: "stylesheet", href: "https://dze9g4ipzy6n3.cloudfront.net/static/css/main.min.css" },
      document.head
    );

    pjBotLoad(
      "react-counter",
      {
        id: "react-counter",
        template: template,
        app_host: app_host,
        bot_id: bot_id,
        visible: visible,
      },
      document.body
    );
  }
}

if (typeof window !== "undefined" && typeof customElements !== "undefined") {
  customElements.define("jinni-bot", JinniBot);
}


if (typeof exports !== "undefined") {
  module.exports = JinniBot;
} else {
  window.JinniBot = JinniBot;
}

export default JinniBot;