How to automatically hyperlink comments when posted in Webflow? Answered

Post author
Nicolai Amirzadeh

Hey guys, is it possible to make my comments automatically hyperlink when posted? (Webflow)

Comments

2 comments

  • Comment author
    A J

    Hey Nicolai Amirzadeh, I was trying to come up with a workaround till Memberstack comes with a built-in way in future 🤞.

    So you can paste this code in your Before </body> of custom code section in the page you are hosting these comments:

    <script> const commentsContainer = document.querySelector(".comment_post-container"); function wrapUrl(text) { const urlRegex = /\b(https?:\/\/)?www\.[^\s]+\.[^\s]+|(https?:\/\/[^\s]+)/g; return text.replace(urlRegex, (url) => { if (!url.startsWith("http")) { url = "https://" + url; } return `<a href="${url}" target="_blank">${url}</a>`; }); } const commentObserver = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.addedNodes.length) { const newComments = mutation.addedNodes; newComments.forEach((comment) => { const commentContent = comment.querySelector(".comment_hover"); if (commentContent && commentContent.querySelector(".comment_text")) { const commentText = commentContent.querySelector(".comment_text").textContent; const updatedText = wrapUrl(commentText); commentContent.querySelector(".comment_text").innerHTML = updatedText; } }); } }); }); commentObserver.observe(commentsContainer , { childList: true }); </script>

    I have tested this on a dummy site and below is how the result looks like. It's also instantaneous, i.e. new comments will also be hyperlinked, not just the already existing ones while the user visits the page. I have modified the above code to work with the premium course template that you are using ideally. Test it out and let me know if it works.

    Hope this helps.

    0
  • Comment author
    Nicolai Amirzadeh

    Hey A J! You're a legend, thank you. This worked perfectly.

    0

Please sign in to leave a comment.