Chatwoot
de
Sprache
en English pt_BR Portuguese (Brazil) es Spanish de German

Wie installiert man Live-Chat in einer Vue.js-App?

Open in
View as Markdown Open in ChatGPT Open in Claude
Sojan

Sojan

Zuletzt aktualisiert am Jul 22, 2026

Um Chatwoot in Ihre Vue.js-Anwendung zu integrieren, müssen Sie das Chatwoot-Widget-Script in die Datei index.html Ihrer Vue.js-Anwendung einfügen.

So gehen Sie vor:

Schritt 1. Holen Sie sich Ihr Widget-Script​

Ihr Widget-Script finden Sie in den Einstellungen Ihres Website-Posteingangs. Gehen Sie zu Einstellungen -> Posteingänge -> Wählen Sie Ihren Website-Kanal aus > Konfigurations-Tab.

Falls Sie noch keinen Website-Posteingang erstellt haben, finden Sie eine Schritt-für-Schritt-Anleitung hier.

Schritt 2. Kopieren Sie das Script​

Kopieren Sie das Script, das im code-Feld des Kanals erstellt wurde.

Schritt 3. Fügen Sie das Script hier ein​

Öffnen Sie Ihr Vue-Projekt und fügen Sie das Script in die Datei index.html ein, direkt vor dem schließenden </body>-Tag.

<body>
  <noscript>
    <strong
      >Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert
      ohne aktiviertes JavaScript nicht richtig. Bitte aktivieren Sie JavaScript, um fortzufahren.</strong
    >
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- Chatwoot script goes here -->
  <script>
    (function (d, t) {
      var BASE_URL = "https://example.com";
      var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
      g.src = BASE_URL + "/packs/js/sdk.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function () {
        window.chatwootSDK.run({
          websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1",
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  </script>
  <!-- Chatwoot script goes here -->
</body>

Schritt 4. Überprüfen​

Sie sollten jetzt das Chatwoot-Widget auf der Seite sehen. Das sieht ungefähr so aus:

Vue.js, Nuxt.js Modul​

Ein Community-gepflegtes Modul (erstellt von den großartigen Leuten von @huntersofbook) zur Integration von Chatwoot in Ihre Vue 3- und Nuxt 3-Projekte ist verfügbar. Sie finden eine Demo hier.