Typebot
Log in

Share feedback, ideas and get community help

Updated last month

Removing an Image Bubble On Button Input Click?

At a glance
The community member is trying to remove an Image Bubble when a user clicks on the "Stop" Button. They tried using the Script block to manipulate the image, but couldn't access the element in the DOM. Another community member provided the solution, which is to select the Shadow root first and then remove the element using the appropriate CSS selector. The answer is: <answer>You can't access it easily because it is in a Shadow DOM, so you need to select the Shadow root firstHere is the prefix you'd need to use to access elements:document.querySelector("typebot-standard").shadowRootTo remove an element, you'd have to do:document.querySelector("typebot-standard").shadowRoot.querySelector(".typebot-host-bubble:has(figure)").remove()</answer>
nnefer_l
·
The Image Bubbles don't have a "Display Condition" like the Buttons Input.

How would I remove the Image Bubble when a user clicks on the "Stop" Button?

I tried using the Script block to manipulate the image, however, it seems like I can't access the element in the DOM.

I have the Script block to execute on the client turned on.

Any suggestions to remove the image after a user clicks on the "Stop" button?

For context, I have a gif that is a proxy for a timer countdown. I would like to remove the "timer" once the user clicks on the button input rather than having the timer continue with its countdown.

Thank you!
Attachment
Screenshot_2025-01-10_at_10.51.52_AM.png
BBaptiste
Marked as solution
You can't access it easily because it is in a Shadow DOM, so you need to select the Shadow root first

Here is the prefix you'd need to use to access elements:

Plain Text
document.querySelector("typebot-standard").shadowRoot


To remove an element, you'd have to do:

Plain Text
document.querySelector("typebot-standard").shadowRoot.querySelector(".typebot-host-bubble:has(figure)").remove()
View full solution
B
n
4 comments
BBaptiste
I tried using the Script block to manipulate the image, however, it seems like I can't access the element in the DOM.
This is the right way
BBaptiste
Let me check how to do that properly
BBaptiste
You can't access it easily because it is in a Shadow DOM, so you need to select the Shadow root first

Here is the prefix you'd need to use to access elements:

Plain Text
document.querySelector("typebot-standard").shadowRoot


To remove an element, you'd have to do:

Plain Text
document.querySelector("typebot-standard").shadowRoot.querySelector(".typebot-host-bubble:has(figure)").remove()
nnefer_l
YES! THANK YOU! 🙌🏻
Add a reply
Sign up and join the conversation on Discord