Remove Tawk.to Branding (2022)

removing_script.js

var removeBranding = function() {
    try {
        var element = document.querySelector("iframe[title*=chat]:nth-child(2)").contentDocument.querySelector(`a[class*=tawk-branding]`)

        if (element) {
            element.remove()
        }
    } catch (e) {}
}

var tick = 100

setInterval(removeBranding, tick)

How we can achieve this is next js website bro please help me.

Perfect @enkiark
Worked for me.

hello all of you guys, here is how you remove all the brandings whether outside chat or inside chat widget for tawk.io

For React/Next.js

"use client";

import { useEffect } from "react";

export default function HideTawkBranding() {
    useEffect(() => {
        const hideBranding = (iframe: HTMLIFrameElement) => {
            try {
                const doc = iframe.contentDocument;
                const link = doc?.querySelector(
                    "a[href*='tawk.to']"
                ) as HTMLElement | null;

                if (link) {
                    link.style.setProperty("display", "none", "important");
                }
            } catch {
                // cross-origin iframe → expected
            }
        };

        const scanIframes = () => {
            document
                .querySelectorAll("iframe[title*='chat']")
                .forEach((iframe) => {
                    console.log("I am here ",)
                    hideBranding(iframe as HTMLIFrameElement)
                });
        };

        // initial scan
        scanIframes();

        // watch for new iframes
        const observer = new MutationObserver(scanIframes);
        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });

        return () => observer.disconnect();
    }, []);

    return null;
}

Import this above component in root of your react/Next js.

And for plain JS:

// hide-tawk-branding.js
(function() {
  const processedIframes = new WeakSet();
  const retryTimeouts = new Map();

  const injectHideStyles = (iframe) => {
    try {
      const doc = iframe.contentDocument;
      if (!doc) {
        // Retry once after 2s if iframe not ready
        if (!retryTimeouts.has(iframe)) {
          const timeout = setTimeout(() => {
            retryTimeouts.delete(iframe);
            injectHideStyles(iframe);
          }, 2000);
          retryTimeouts.set(iframe, timeout);
        }
        return;
      }

      // Skip if already injected
      if (doc.getElementById("hide-tawk-branding")) return;

      const style = doc.createElement("style");
      style.id = "hide-tawk-branding";
      style.textContent = "a[href*='tawk.to']{display:none!important}";
      doc.head.appendChild(style);
    } catch {
      // Silently fail on cross-origin errors
    }
  };

  const handleIframe = (iframe) => {
    // Skip if already processed
    if (processedIframes.has(iframe)) return;

    const title = iframe.title;
    if (title && title.toLowerCase().includes("chat")) {
      processedIframes.add(iframe);
      injectHideStyles(iframe);
    }
  };

  // Process existing iframes
  document.querySelectorAll("iframe[title*='chat' i]").forEach(handleIframe);

  // Watch for new iframes
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node.nodeName === "IFRAME") {
          handleIframe(node);
          continue;
        }
        
        if (node.nodeType === 1) {
          const iframes = node.querySelectorAll("iframe[title*='chat' i]");
          if (iframes.length) {
            iframes.forEach(handleIframe);
          }
        }
      }
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });

  // Cleanup on page unload
  window.addEventListener("beforeunload", () => {
    observer.disconnect();
    retryTimeouts.forEach(clearTimeout);
    retryTimeouts.clear();
  });
})();