Hide TidioChat Branding (for new theme)

hidetidio.js

function hideTdo() {
  var timer = null;
  var target = document.querySelector('#tidio-chat iframe');
  if(!target) {
    if(timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(hideTdo, 500);
    return;
  } else {
    var timer2 = null;
    var tdo = document.querySelector('#tidio-chat iframe')
                .contentDocument
                .querySelector('a[href*="tidio.com/powered"]');
    if(!tdo) {
      if(timer2 !== null) {
        clearTimeout(timer2);
      }
      timer2 = setTimeout(hideTdo, 1);
      return;
    }
    document.querySelector('#tidio-chat iframe')
      .contentDocument
      .querySelector('a[href*="tidio.com/powered"]')
      .remove();
    return true;
  }
}

hideTdo();

setInterval(hideTdo, 10);

< / body >

above that

It is not clear to me how I use this Java Script. Could someone give a step by step instruction on how to apply this in WordPress? I am sure it is easy, so it should be easy to explain. Like where do I put the .js file and then in what/where template file do I add what code exactly. I am sure this is a two minute job once it is explained...

@worksmarter, if you can install plugin on your wordpress website, you may use some plugins like this one: https://wordpress.org/plugins/custom-css-js/

@arafathusayn. Hey thanks, that does work, but I would rather place it into my code than use yet another plugin. I am not WordPress or .js illiterate, but I could not tell from the above post what norbert-vincze was doing and obviously don't have the same theme. Thanks for posting; I appreciate it. If anyone can tell me which file to edit to add the .js to, that would be great!

@worksmarter, norbert-vincze was editing a Shopify theme in the screenshots above. In your case, you need to edit your WordPress theme which doesn't have liquid files. Rather your theme may have header.php & footer.php files which you may try to edit. However, WP themes differ with each other a lot so you need to understand how your own theme is structured.

https://gist.github.com/thebigredgeek/75bfe4c9319b7880b0e5f63e5e9d6b23 < a solution that requires less dom polling and is reactive so more performance minded

On my website suddenly it stopped working!

Any ideas... is it working for you still ?

I am using WP and I inserted the Tidio JS manually.

Thank you

On my website suddenly it stopped working!

Any ideas... is it working for you still ?

I am using WP and I inserted the Tidio JS manually.

Thank you

I have the same Problem. I am using Wordpress too.
It was working perfectly and suddenly it stopped working.

Does anyone know what the problem is?

That would be awesome.

Thank you.

I have updated the code in this gist. It works now.

I have updated the code in this gist. It works now.

You are the best, thank you very much :)

Hello..

After adding the function to hide tidio logo in bot im unable to see URL links in conversations, Its hiding URL links after adding this code along with logo.....What i have to do plz help..

Hello..

After adding the function to hide tidio logo in bot im unable to see URL links in conversations, Its hiding URL links after adding this code along with logo.....What i have to do plz help..

Check the updated code now.

Hello..
After adding the function to hide tidio logo in bot im unable to see URL links in conversations, Its hiding URL links after adding this code along with logo.....What i have to do plz help..

Check the updated code now.

Thank you so much...Its working as expected...

Thanks

I appreciate it. I changed it then works well.

Thanks. For the people who don't know, how to use this. Just paste the javascript code right after your personal tidio script tag like this (or include the .js file: <script type="text/javascript" src="path-to-hidetidio.js"></script>):

<script src="//code.tidio.co/xxxxxxxxxxxx.js" async></script>
<script>
function hideTdo() {
...
...
hideTdo();
setInterval(hideTdo, 10);
</script>

How would I do this if using the Tidio WP plugin?

can anyone tell me how and where to use this code in wordpress , i have no exerience of coding , please

Hi, It depends on your theme. I personally I am not using the Tidio Wordpress plugin and I paste this code with the Tidio widget JS code in the footer. You do not need to know about the coding at all. If you can not find any option in your theme, create a footer widget and paste this code as this example: <script> CODE </script> It should work.

Thank you very much, it works

Will this cause the account to be banned? I once tried to modify the api file on tawk.to and the account was blocked. I think the two properties are different. My method modified the api file, but your method did not modify the api. I think this should not be blocked?

Hello arafathusayn,
I am using the 'Woodmart' theme on WordPress. I installed the 'Custom CSS & JS' plugin and pasted your JS code and activated it. but it's not working. I mean the label 'Powered by Tidio' footer in live chat is not gone! So please tell me how I can make this code workable on my site?

Amazing it worked for me in wordpress.
Thanks, bro.

Hey guys, I'm the author of this little gist. I see, some of you are saying it's not working if you reopen the chat widget. To solve this, all you need to do is set an interval like this:

setInterval(hideTdo, 10);

I also updated the gist code and tested on the latest chat window found here: https://www.tidio.com/panel/register

Have a nice day you all.

Regards,
Arafat Husayn,
CTO, Tripovy.com

Hey guys, I'm the author of this little gist. I see, some of you are saying it's not working if you reopen the chat widget. To solve this, all you need to do is set an interval like this:

setInterval(hideTdo, 10);

I also updated the gist code and tested on the latest chat window found here: https://www.tidio.com/panel/register

Have a nice day you all.

Regards,
Arafat Husayn,
CTO, Tripovy.com

Can you make a script to add our on branding in live chat

working

Working! Thanks <3

Is it posible to replace the tidio with another name?

Thank you man!

This worked great! Could this same method be used to inject custom CSS and adjust how the widget looks?