Removing an Image Bubble On Button Input Click?

Question

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!

Baptiste · Accepted Answer

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

Baptiste · Answer

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

Baptiste · Answer

Let me check how to do that properly

nefer_l · Answer

YES! THANK YOU! 🙌🏻

Share feedback, ideas and get community help

Removing an Image Bubble On Button Input Click?