Try the first bot

then close it and switch the bot

try the second bot

users can switch the bots and continue where they left

Code Playground [here](https://jsfiddle.net/devmik/n9fb8zmd/6/)

JavaScript code is too long for one message these are the common settings in your chatbots

js
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"
      };

here you change the settings based on which chatbot has been chosen (botId, clientId, webhookId, stylesheet)

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

toggleChatConfig function toggles between chatbot settings when the button is clicked

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

loadScript function loads the new Botpress config scripts for the chatbot user has chosen

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

this part gets the correct config scripts from localStorage when button is clicked and gives them to the functions above

js
    const chatConfig = localStorage.getItem('chatConfig') || 'BLUE';
    loadScript("https://cdn.botpress.cloud/webchat/v1/inject.js", () => initBotpressChat(chatConfig));
  
    document.getElementById('toggleChat').addEventListener('click', toggleChatConfig);
  });

In your HTML code you need to have a switch button inside body tag

html
      <button id="toggleChat">Switch bot</button>

and also a script tag where you can place the JavaScript code (or a JS file like in this case)

html
    <script src="script.js"></script>

All the code can be found also in that JSFiddle link above. Here's an alternative solution if you are building with ReactJS https://discord.com/channels/1108396290624213082/1189359929719521390

Is this the kind of thing you are looking for @brash-arm-25586