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[​](https://www.chatwoot.com/hc/user-guide/articles/1784681454-wie-installiert-man-live_chat-in-einer-vue-js_app "Direct link to heading") 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](https://www.chatwoot.com/hc/user-guide/articles/1784681470-erlauterung-der-einstellungen-fur-den-website_live_chat). ## Schritt 2. Kopieren Sie das Script[**​**](https://www.chatwoot.com/hc/user-guide/articles/1784681454-wie-installiert-man-live_chat-in-einer-vue-js_app "Direct link to heading") Kopieren Sie das Script, das im `code`-Feld des Kanals erstellt wurde. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBK2x6VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--742964bf7893816db8255942c6e56582a9d9bc93/script%20for%20a%20website%20inbox.png) ## Schritt 3. Fügen Sie das Script hier ein[​](https://www.chatwoot.com/hc/user-guide/articles/1784681454-wie-installiert-man-live_chat-in-einer-vue-js_app "Direct link to heading") Öffnen Sie Ihr Vue-Projekt und fügen Sie das Script in die Datei index.html ein, direkt vor dem schließenden ``-Tag. ```
``` ## Schritt 4. Überprüfen![​](https://www.chatwoot.com/docs/product/channels/live-chat/integrations/vue#4-check "Direct link to heading") Sie sollten jetzt das Chatwoot-Widget auf der Seite sehen. Das sieht ungefähr so aus: ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2R6VHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2f073ca9ea425355fb29783559691c9521a8f00b/vue.png) ### Vue.js, Nuxt.js Modul[​](https://www.chatwoot.com/hc/user-guide/articles/1784681454-wie-installiert-man-live_chat-in-einer-vue-js_app "Direct link to heading") Ein Community-gepflegtes Modul (erstellt von den großartigen Leuten von [@huntersofbook](https://github.com/productdevbook/chatwoot)) zur Integration von Chatwoot in Ihre Vue 3- und Nuxt 3-Projekte ist verfügbar. Sie finden eine [Demo hier](http://vue-chatwoot-plugin.vercel.app/). * Siehe [Vue 3 Modul](https://github.com/productdevbook/chatwoot/tree/main/demo/vue3). * Siehe [Nuxt 3 Modul](https://github.com/productdevbook/chatwoot/tree/main/demo/nuxt3).