T
Typebot4mo ago
nefer_l

Removing an Image Bubble On Button Input Click?

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!
No description
3 Replies
Hall
Hall4mo ago
Someone will reply to you shortly. In the meantime, this might help: -# This post was marked as solved by nefer_l. View answer.
Baptiste
Baptiste4mo ago
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 Let me check how to do that properly 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:
document.querySelector("typebot-standard").shadowRoot
document.querySelector("typebot-standard").shadowRoot
To remove an element, you'd have to do:
document.querySelector("typebot-standard").shadowRoot.querySelector(".typebot-host-bubble:has(figure)").remove()
document.querySelector("typebot-standard").shadowRoot.querySelector(".typebot-host-bubble:has(figure)").remove()
nefer_l
nefer_lOP4mo ago
YES! THANK YOU! 🙌🏻

Did you find this page helpful?