andreabalogun_

Thank you SOOOOOOOO MUCH!!!! This worked very well! Thank you. Thank you.

As I say I don't have a solution but how do you see this working?
User clicks on an external link. A pop-up occurs with a message. How does the user flow from there? Is it like a two button alert were one button is proceed to the external link and other is cancel?
Or, perhaps one button that just says OK?

If the site will be on a Business Plan or above, here's something to get you started. Add it to Settings > Developer Tools > Code Injection > Footer. 
<!--- Inform user before allowing them to leave the site accidentally ---->  <script>   Array.from(document.querySelectorAll("a")).filter(l => l.hostname !== location.hostname).forEach(el => el.addEventListener("click", clickExt)); function clickExt(e) { if (confirm("You're about to leave our website. Do you want to continue?")) { return; } else { e.preventDefault(); return false; } } </script> This is very basic but it will should get you started by launching a basic browser popup whenever an external link is clicked. This will give visitors the opportunity to change their mind before leaving the site:

With some additional HTML/JS, this could be improved by replacing the built-in browser popup with a custom one that includes the features that you need, for example:

Did this help? Please give feedback by clicking an icon below  ⬇️

Just wandering if the TikTok logo will be added as social link that will have a logo attached to it and not a link symbol. Unless someone has code to get around this?
 
 

Gotcha! Thanks so much! I will talk to my client.

Just wandering if the TikTok logo will be added as social link that will have a logo attached to it and not a link symbol. Unless someone has code to get around this?
 
 

Just wandering if the TikTok logo will be added as social link that will have a logo attached to it and not a link symbol. Unless someone has code to get around this?
 
 

Thanks sooooo much!!

/* Footer */ .sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social { display: none; } .sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] { background: #777; } .sqs-svg-icon--wrapper[href*=tiktok] { background: #ffffff; } .sqs-svg-icon--wrapper[href*=tiktok]:hover { background: #ffffff !important;; } .sqs-svg-icon--wrapper[href*=tiktok] > div { display: inline-block; background: url(https://www.designbust.com/download/1019/png/tiktok_logo_png_transparent256.png) no-repeat; background-size: cover; width: 50%; height: 50% ; top: 50%; left: 50%; transform: translate(-50%, -50%) } /* Header */ .SocialLinks-link[href*=tiktok] .SocialLinks-link-svg { display: none; } .sqs-svg-icon--list:hover .SocialLinks-link[href*=tiktok] { background: #777; } .SocialLinks-link[href*=tiktok] { background: #ffffff; } .SocialLinks-link[href*=tiktok]:hover { background: #ffffff !important;; } .SocialLinks-link[href*=tiktok] > div { display: inline-block; background: url(https://www.designbust.com/download/1019/png/tiktok_logo_png_transparent256.png) no-repeat; background-size: cover; width: 50%; height: 50% ; top: 50%; left: 50%; transform: translate(-50%, -50%) } Find your colored tiktok icon and replace accordingly

Thanks! This worked well for the footer. Any advice on how to do this for my header too?

It's for a client - https://www.tiktok.com/@steviemackey
 

Just wandering if the TikTok logo will be added as social link that will have a logo attached to it and not a link symbol. Unless someone has code to get around this?