Skip to main content

Anleitung zur Widget-Installation

TapToChat lässt sich in wenigen Minuten in jede Website einbinden — ganz ohne Programmierkenntnisse.

Schnellstart

3 einfache Schritte:

  1. 1

    Registrieren und ein Widget anlegen

    Die eindeutige Widget-ID steht im Dashboard bereit

  2. 2

    Den Installationscode kopieren

    Zur Auswahl stehen HTML, React, Next.js und WordPress

  3. 3

    Vor </body> einfügen

    Den Code in die Website einfügen — fertig!

Installationsmethoden

HTML / Statische Websites

Für statische Websites, reines HTML oder jede Seite, in die sich Skripte einfügen lassen.

<!-- 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://taptochat.io/widget/embed.js'));
  taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
</script>
<!-- End TapToChat Widget -->

React

Für React-Anwendungen (Create React App, Vite usw.).

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

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://taptochat.io/widget/embed.js';
    script.async = true;
    script.id = 'taptochat';
    document.body.appendChild(script);

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        });
      }
    };

    return () => {
      const scriptEl = document.getElementById('taptochat');
      if (scriptEl) scriptEl.remove();
      const widgetEl = document.getElementById('taptochat-widget');
      if (widgetEl) widgetEl.remove();
    };
  }, []);

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

Next.js

Für Next.js 13+ mit App Router.

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

import { useEffect } from 'react'

export function TapToChatWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://taptochat.io/widget/embed.js'
    script.async = true
    script.id = 'taptochat'
    document.body.appendChild(script)

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        })
      }
    }

    return () => {
      const scriptEl = document.getElementById('taptochat')
      if (scriptEl) scriptEl.remove()
      const widgetEl = document.getElementById('taptochat-widget')
      if (widgetEl) widgetEl.remove()
    }
  }, [])

  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>
  )
}

WordPress

Für WordPress-Seiten. Entweder in functions.php eintragen oder ein Plugin wie „Insert Headers and Footers“ verwenden.

// 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://taptochat.io/widget/embed.js'));
    taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
  </script>
  <?php
}
add_action('wp_footer', 'taptochat_widget');

Konfigurationsoptionen

Das Widget lässt sich über zusätzliche Optionen der init-Funktion anpassen:

TapToChat('init', {
  widgetId: 'YOUR_WIDGET_ID',  // Required
  position: 'bottom-right',     // Optional: 'bottom-right' or 'bottom-left'
  color: '#3B82F6'              // Optional: Any hex color code
});
OptionTypBeschreibung
widgetIdstringDie eindeutige Widget-ID (erforderlich)
positionstringPosition des Widgets: 'bottom-right' oder 'bottom-left'
colorstringPrimärfarbe als Hexadezimalwert (z. B. '#3B82F6')

Bewährte Vorgehensweisen

Vor </body> platzieren

Das Skript direkt vor dem schließenden body-Tag einfügen — das sorgt für optimale Performance und dafür, dass das DOM bereits geladen ist.

Asynchrones Laden

Das Widget lädt asynchron und blockiert daher weder das Rendering der Seite noch bremst es die Website aus.

Zuerst in der Staging-Umgebung testen

Das Widget vor dem Deployment in die Produktion in einer Entwicklungs- oder Staging-Umgebung testen.

Widget aktiv lassen

In den Dashboard-Einstellungen muss das Widget auf „Aktiv“ stehen, damit es auf der Website erscheint.

Fehlerbehebung

Das Widget erscheint nicht?

  • •Prüfen, ob das Widget im Dashboard auf „Aktiv“ steht
  • •Prüfen, ob die Widget-ID im Code mit der im Dashboard übereinstimmt
  • •Browser-Cache leeren und einen harten Reload auslösen (Ctrl+Shift+R oder Cmd+Shift+R)
  • •Die Browser-Konsole auf JavaScript-Fehler prüfen

Immer noch Probleme?

Das Support-Team ist erreichbar unter support@taptochat.io oder über das Chat-Widget auf dieser Seite.

Bereit für den Start?

Kostenloses Konto anlegen und Live-Chat in wenigen Minuten zur Website hinzufügen.

Kostenlos testenDemo ansehen