Share feedback, ideas and get community help

Updated 3 months ago

Cant mount the chatbot (initBubble) after unmounting

As the title says, i cant mount the chatbot as an initBubble from a custom script after the bot has been unmounted. The code basically listens to a button click, and if the user has a localStorage key, it should close the current bot, unmount it, and open another different chatbot, i'll leave the code so you can see what im talking about
Plain Text
 
let chatBotUserName;
let chatBotUserMail;
document.querySelector('.triggerBot').addEventListener('click', (e) => {


    if(document.querySelectorAll('typebot-bubble')[0].shadowRoot.querySelector('.typebot-chat-chunk')){
        if(localStorage.getItem('typebot-clpxar0hl0005p826y90ijz8l-input-2')){
            chatBotUserName = JSON.parse(localStorage.getItem('typebot-clpxar0hl0005p826y90ijz8l-input-2')).text;
        }
        if(localStorage.getItem('typebot-clpxar0hl0005p826y90ijz8l-input-4')){
            chatBotUserMail = JSON.parse(localStorage.getItem('typebot-clpxar0hl0005p826y90ijz8l-input-4')).text;
        }

        // Typebot.unmount();
        localStorage.clear();
        localStorage.setItem("triggerMode", "button");

        // Typebot.initBubble({
        //     typebot: "***",
        //     apiHost: "***",
        //     previewMessage: {
        //         message: "I have a question for you!",
        //         autoShowDelay: 7000,
        //         avatarUrl:
        //             "***",
        //     },
        //     theme: {
        //         button: { backgroundColor: "#03ebdd", iconColor: "#09145f", size: "large" },
        //         previewMessage: { backgroundColor: "#1a1a1a",textColor: "#FFFFFF" },
        //     },
        // });
    }else{
        localStorage.setItem("triggerMode", "button");
        Typebot.open()
    }
})
B
T
15 comments
Hey,

Can you clearly describe it by following this template:

  1. Steps to reproduce
  2. What's happening
  3. What were you expecting
It's even better if you can provide a screen recording.

This ultimately allow me to reproduce the bug so that I can fix it properly.
I'll give you a bit of context, there are 2 different flows inside the same chatbot, one flow triggers if you have the localStorage key "triggerMode" the other one triggers if you dont have that key. You get assigned that key if you click a button inside the website, with that being said, i'll explain the problem.

  1. Steps to reproduce:
Click the bubble that opens the chatbot with the main flow
Click a button inside the website that listens for a click to execute the script
Once clicked the button, it should do this:
Close the chatbot
Unmount the current chatbot
Initiate the chatbot with a different flow given the apiHost & typebot
Then open the chatbot and continue with the flow

  1. What is happening, is that when you click the button inside the website, the chatbot closes & unmounts, but it wont mount again and the bubble disappears.
  1. I expect when clicking on the button, the bot would unmount, and mount again given the parameters provided.
i've recorded this video, showcasing the problem i told you, if you have any questions regarding the steps, please dont hesitate to ask
just pinging you so you can dive into this, whenever you have some time ofc @Baptiste
Well, in your code, you commented out the lines that unmounts the bot and init it
is it intended?
Try to uncomment it, then try again
Provide the error message that you see in the console if any
yep, it is indeed intended, i tried a different approach that force me to comment those lines, that's why that piece of code is commented
there is no error at all in the console
If it works when you do it manually on the JS console, then it's an issue with your code
Try to debug it step by step
but it makes no sense, i have the same script in my code, there is nothing else
i did that already, with the help of the console, i added some breakpoints to see how it behaved, but when it gets to the initBubble() it skips that part of the code
as soon as i can, i'll send you a video of it
Add a reply
Sign up and join the conversation on Discord