jinni-chatbot/src/index.js

Jinni Chatbot engages with visitors, captures all the required details, and filters motivated vendors and landlords through AI-powered fully customisable conversations. It automatically books valuations and callbacks, and even enables you to chat with pot

import React from "react";
import ReactDOM from "react-dom/client";
import reactToWebComponent from "react-to-webcomponent";


const pjBotLoad = (e, a, p) => {
  const n = document.createElement(e);
  Object.entries(a).forEach(([key, value]) => n.setAttribute(key, value));
  p.appendChild(n);
};

const App = () => {
  const element = document.querySelector('jinni-chatbot');

  const bot_id = element.getAttribute('botId');
  const app_host = element.getAttribute('appHost');
  const visible = element.getAttribute('visible');
  const template = element.getAttribute('botTheme');

  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
  );

  return true;
}

if (typeof window !== "undefined" && typeof document !== "undefined" && typeof self !== "undefined") {
  customElements.define("jinni-chatbot", reactToWebComponent(App, React, ReactDOM));
}

const JinniChatbot = (props) => {
  if (typeof window === "undefined" || typeof self === "undefined") {
    return null;
  }
  return <jinni-chatbot {...props} />;
};

export default JinniChatbot;