Switch bots

by devmik

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanilla JS Chat App</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class='App'>
      <h1>Hi Bot Builders!</h1>
      <h2>Click the button to switch between chatbots!</h2>
      <button id="toggleChat">Switch bot</button>
    </div>
    <script src="script.js"></script>
  </body>

</html>

CSS

body {
  background-color: #76c087;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  function initBotpressChat(config) {
    const commonSettings = {
      "composerPlaceholder": "Chat with bot",
      "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
      "messagingUrl": "https://messaging.botpress.cloud",
      "lazySocket": true,
      "themeName": "prism",
      "frontendVersion": "v1",
      "useSessionStorage": true,
      "enableConversationDeletion": true,
      "showPoweredBy": true,
      "theme": "prism",
      "themeColor": "#2563eb"
    };

    const settings = {
      ...commonSettings,
      "botId": config === 'BLUE' ? "c956769e-929c-4a70-b3da-677e25003c34" : "e35fdc00-d48c-4c45-b4f4-5bf9c4fc91dc",
      "clientId": config === 'BLUE' ? "c956769e-929c-4a70-b3da-677e25003c34" : "e35fdc00-d48c-4c45-b4f4-5bf9c4fc91dc",
      "webhookId": config === 'BLUE' ? "c3f3b133-c3e0-4e59-9935-d816c0d9247a" : "70b174fb-405f-4e08-beb8-0cca4105012d",
      "stylesheet": config === 'BLUE' ? "https://webchat-styler-css.botpress.app/prod/code/70692789-ba07-44f8-bdea-fcc4cd08ce7b/v72248/style.css" : "https://webchat-styler-css.botpress.app/prod/code/70692789-ba07-44f8-bdea-fcc4cd08ce7b/v4032/style.css"
    };

    window.botpressWebChat.init(settings);
  }

  function toggleChatConfig() {
    const currentConfig = localStorage.getItem('chatConfig');
    const newConfig = currentConfig === 'BLUE' ? 'RED' : 'BLUE';
    localStorage.setItem('chatConfig', newConfig);
    window.location.reload();
  }

  function loadScript(src, onLoad) {
    const script = document.createElement('script');
    script.src = src;
    script.onload = onLoad;
    document.body.appendChild(script);
  }

  const chatConfig = localStorage.getItem('chatConfig') || 'BLUE';
  loadScript("https://cdn.botpress.cloud/webchat/v1/inject.js", () => initBotpressChat(chatConfig));

 ...