The community member is trying to modify the default behavior of links in Typebot chat responses, where all links are automatically set to open in new tabs. They have tried various approaches, including using MutationObserver, injecting CSS overrides, and intercepting click events, but none of these worked.
Another community member explains their use case, where they are using the chatbot as a helper to navigate their website, and they want the links provided by the bot to open in the same tab, as opening them in a new tab closes the chat bubble, which is not a good user experience.
In response, a community member has successfully written a script that detects all initial links on the bot in the first bubbles, and also detects all subsequent links that appear on the bot with a MutationObserver, and sets their target attribute to an empty string, causing them to open in the same tab. They have provided a demo video showing the script in action.
I'm trying to modify the default behavior of links in Typebot chat responses. Currently, all links are automatically set with target="_blank" rel="noopener noreferrer", causing them to open in new tabs.
I need these links to open in the same tab (target="_self"). I've tried:
Using MutationObserver to modify the links
Injecting CSS overrides
Intercepting click events
None of these approaches worked. Is there a configuration option or recommended way to control this behavior?
Hello ildevon, I've reproduced your case and successfully wrote a script that detects all initial links on the bot in the first bubbles, and also detects all subsequent links that appear on the bot with a MutationObserver (yes, it works) and sets their target attribute to an empty string.
I added a togglable debugMode at the top of the script so that all console.log() are either enabled or disabled when needed. When debugMode is true, I'm logging every bit of information that's useful for you to understand and see if every thing you want to happen actually happens.
I'll share the full JS script as a file to download, as there are too many characters for one message here.
Below is a demo video I made of it working in action. In my example, I first show a Text bubble with a Google URL, then execute the script, then show a Text bubble with a Perplexity URL. You'll see that both links have their target attribute removed.
So I would like to explain my usecase and why this is very important.
I am using the chatbot as an helper to navigate the website, so i can ask something to the bot while opened as a bubble, and it will give me a link within the website, so when i click on it, doesn't make sense to be opened in another tab.
You can also see my live website here > https://studiare-in-olanda.it/ and try to ask like "suggest me a few blog articles". The bot will respond with some links, and it's very annoying that they are opened in new tabs also because doing so close the bubble and the experience is not good at all
Hello ildevon, I've reproduced your case and successfully wrote a script that detects all initial links on the bot in the first bubbles, and also detects all subsequent links that appear on the bot with a MutationObserver (yes, it works) and sets their target attribute to an empty string.
I added a togglable debugMode at the top of the script so that all console.log() are either enabled or disabled when needed. When debugMode is true, I'm logging every bit of information that's useful for you to understand and see if every thing you want to happen actually happens.
I'll share the full JS script as a file to download, as there are too many characters for one message here.
Below is a demo video I made of it working in action. In my example, I first show a Text bubble with a Google URL, then execute the script, then show a Text bubble with a Perplexity URL. You'll see that both links have their target attribute removed.
Just realized I left one comment in the code that says "typing effect", that's because I was literally just using this MutationObserver technique this weekend to add a typing effect to Text bubbles 👀
Some additional note though as to why it didn't work when you tried the MutationObserver:
You maybe didn't target the document's shadowRoot, which Typebot lives in
You had to first detect any mutation happening in the bot (new bubbles being added), and then query all a elements within them, which now stores all link elements, to then loop through them and remove their target attribute
