Anleitung zur Widget-Installation

<!-- TapToChat Widget -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'taptochat', 'https://cdn.taptochat.io/widget/v1/embed.js'));
  taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
</script>
<!-- End TapToChat Widget -->

// Add to your App.js or main component
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const config = { widgetId: 'YOUR_WIDGET_ID' };

    // Set the config BEFORE injecting the script: embed.js reads
    // window.TapToChatConfig as soon as it loads, so there is no onload
    // callback to race against.
    window.TapToChatConfig = config;

    if (window.TapToChat) {
      // Already loaded (a remount, or another component mounted it).
      window.TapToChat.init(config);
    } else if (!document.getElementById('taptochat')) {
      // Guarded by id so StrictMode's double-invoked effect cannot inject
      // the script twice.
      const script = document.createElement('script');
      script.src = 'https://cdn.taptochat.io/widget/v1/embed.js';
      script.async = true;
      script.id = 'taptochat';
      document.body.appendChild(script);
    }

    return () => {
      // destroy() removes the widget and detaches its listeners and timers.
      // The <script> stays on the page and cached, so a remount re-initialises
      // immediately via the branch above.
      if (window.TapToChat) window.TapToChat.destroy();
    };
  }, []);

  return <div className="App">{/* Your app */}</div>;
}

// Create app/components/TapToChatWidget.tsx
'use client'

import { useEffect } from 'react'

declare global {
  interface Window {
    TapToChatConfig?: Record<string, unknown>
    TapToChat?: {
      init: (config?: Record<string, unknown>) => void
      open: () => void
      close: () => void
      toggle: () => void
      isOpen: () => boolean
      destroy: () => void
    }
  }
}

export function TapToChatWidget() {
  useEffect(() => {
    const config = { widgetId: 'YOUR_WIDGET_ID' }

    // Config first: embed.js auto-initialises from window.TapToChatConfig the
    // moment it loads, so nothing has to race an onload handler.
    window.TapToChatConfig = config

    if (window.TapToChat) {
      window.TapToChat.init(config)
    } else if (!document.getElementById('taptochat')) {
      // StrictMode runs this effect twice in development; the id guard keeps
      // the second pass from injecting a duplicate script.
      const script = document.createElement('script')
      script.src = 'https://cdn.taptochat.io/widget/v1/embed.js'
      script.async = true
      script.id = 'taptochat'
      document.body.appendChild(script)
    }

    return () => {
      window.TapToChat?.destroy()
    }
  }, [])

  return null
}

// Then in your app/layout.tsx:
import { TapToChatWidget } from './components/TapToChatWidget'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <TapToChatWidget />
      </body>
    </html>
  )
}

// Add to functions.php
function taptochat_widget() {
  ?>
  <!-- TapToChat Widget -->
  <script>
    (function(w,d,s,o,f,js,fjs){
      w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'taptochat', 'https://cdn.taptochat.io/widget/v1/embed.js'));
    taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
  </script>
  <?php
}
add_action('wp_footer', 'taptochat_widget');