Cant mount the chatbot (initBubble) after unmounting

TTobias Vasquez

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()
    }
})

15 comments

BBaptiste

Hey,

Can you clearly describe it by following this template:

Steps to reproduce
What's happening
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.

TTobias Vasquez

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.

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

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.

I expect when clicking on the button, the bot would unmount, and mount again given the parameters provided.

TTobias Vasquez

i've recorded this video, showcasing the problem i told you, if you have any questions regarding the steps, please dont hesitate to ask

TTobias Vasquez

just pinging you so you can dive into this, whenever you have some time ofc @Baptiste

BBaptiste

Well, in your code, you commented out the lines that unmounts the bot and init it

BBaptiste

is it intended?

BBaptiste

Try to uncomment it, then try again

BBaptiste

Provide the error message that you see in the console if any

TTobias Vasquez

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

TTobias Vasquez

there is no error at all in the console

BBaptiste

If it works when you do it manually on the JS console, then it's an issue with your code

BBaptiste

Try to debug it step by step

TTobias Vasquez

but it makes no sense, i have the same script in my code, there is nothing else

TTobias Vasquez

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

TTobias Vasquez

as soon as i can, i'll send you a video of it

Add a reply

Share feedback, ideas and get community help

Cant mount the chatbot (initBubble) after unmounting