add option to fetch settings from external API

src/components/ChatboxWithSettings.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Chatbox from './chatbox';
+
+
+const ChatboxWithSettings = ({ settingsEndpoint, ...rest }) => {
+  const [settings, setSettings] = useState({});
+
+  const settingsObj = {};
+
+  const getSettings = async () => {
+    if (!settingsEndpoint) {
+      return null;
+    }
+
+    const res = await fetch(settingsEndpoint);
+    const data = await res.json();
+    const { fields } = data;
+
+    Object.entries(fields).forEach(([k, v]) => {
+      const [scope, key] = k.split('_');
+
+      if (scope === 'web') {
+        settingsObj[key] = v;
+      }
+    });
+
+    console.log("settings", settingsObj)
+
+    return setSettings(settingsObj);
+  };
+
+  useEffect(() => {
+    getSettings();
+  }, []);
+
+  return (
+    <Chatbox {...settings} {...rest} />
+  );
+};
+
+ChatboxWithSettings.propTypes = {
+  settingsEndpoint: PropTypes.string,
+};
+
+export default ChatboxWithSettings;

src/outputs/embeddable-chatbox.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Chatbox from '../components/chatbox';
+import ChatboxWithSettings from '../components/ChatboxWithSettings';
 import '../../vendor/cleanslate.css';
 
 export default class EmbeddableChatbox {
   static el;
 
   static mount({ parentElement = null, ...props } = {}) {
-    const component = <Chatbox {...props} />; // eslint-disable-line
+    const component = <ChatboxWithSettings {...props} />; // eslint-disable-line
+
 
     function doRender() {
       if (EmbeddableChatbox.el) {