Switch between chatbots
# 📖tutorials
q
@glamorous-guitar-39983 's 🫡 great idea, I you need to have two different chatbots in the same web page, this is one option to switch between them. Works a little bit differently with every browser. I tested with my daily browser Brave and this works 100% well, Firefox kind of OK, Chrome I don't have here.
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
JavaScript code is too long for one message these are the common settings in your chatbots
Copy code
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)
Copy code
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
Copy code
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
Copy code
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
Copy code
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
Copy code
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)
Copy code
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
w
@bulky-gigabyte-59033
b
thats crazy jarvis
g
@brash-arm-25586
Is this the kind of thing you are looking for @brash-arm-25586
b
@glamorous-guitar-39983 thank you 🤗
4 Views