Resources
WebChat
Wie binde ich den Webchat in meine Seite ein?

Wie binde ich den Webchat in meine Seite ein?

Lasse Lung
May 10, 2024
2
min read
IconIcon
Inhaltsverzeichnis

Der Code für den Webchat sieht so aus und muss den Footer der Webseite eingebunden werden. Bitte die Felder anpassen.

Achtung: Der Code muss 1zu1 so übernommen werden. Bei Änderungen können wir nicht für die Funktionalität garantieren.

<!-- AI driven agents by www.qualimero.com -->
   <script>
       window.qualimeroConfig = {
     phoneNumber: "xxx",
     aid: "xxx",
     previewMessage: "xxx",
     wabaMessage: "xxx",
     mobile: {
       hidden: false,
       showWhatsApp: true
     },
     // Optional
     style: {
       iconColor: "#C88D18",
       buttonColor: "#189BC8",
     },
     // Optional
     position: {
       verticalAlign: "bottom",
       horizontalAlign: "right",
       verticalGap: "20px",
       horizontalGap: "20px"
     }
   };
   </script>
  <script src="https://storage.googleapis.com/qualimero/qualimero-web-2.0.js"></script>


Bitte folgende Felder anpassen:

phoneNumber: Nur notwendig, wenn WhatsApp genutzt wird. Dann hier die Telefonnummer von WhatsApp im Format “49xxxxxxxxx” eintragen. Ohne + oder 0.

aid: Das ist die accountId. Diese findest du in der app.qualimer.com URL, nachdem du dich eingeloggt hast.

previewMessage: Das ist die Nachricht, die oberhalb der Chatblase angezeigt wird.


wabaMessage: Diese Nachricht sieht der Kunde vorausgefüllt in WhatsApp und kann sie direkt abschicken wenn er möchte.

hidden: Hier wird definiert, ob der Webchat auch auf mobile devices angezeigt werden soll. Mit true wird er nicht auf mobile Devices angezeigt. Mit false wird er angezeigt.

showWhatsApp: Hier wird definiert, falls der Webchat mobile angezeigt wird, ob der Webchat oder stattdessen WhatsApp angezeigt werden soll. Mit true, wird statt dem Webchat WhatsApp angezeigt. Mit false wird der Webchat angezeigt.

iconColor: Hier wird die Farbe der ChatBubble Icons definiert. Bitte als HexCode eingeben.

buttonColor: Hier kann die Farbe der Chatblase und des Chatfenster Banners angepasst werden. Bitte als HexCode eingeben.

Hier kannst du den passenden HexCode für deine Farbe finden https://www.html-color-codes.info/webfarben_hexcodes/

verticalAlign: Hier geht entweder "top" oder "bottom", um den Chat entweder am oberen Bildschirmrand oder am unteren anzuzeigen

horizontalAlign: "right" platziert den Chat am rechten Bildschirmrand, "left" platziert den Chat am linken Bildschirmrand.

verticalGap/horizontal Gap: Hier bitte in Pixel den horizontalen oder vertikalen Abstand vom Bildschirmrand einstellen. Default Wert ist "20px".

Starte jetzt mit deinem eigenen KI-Mitarbeiter!

Durch Klicken des Buttons akzeptierst du unsere Datenschutzrichtlinien
Vielen Dank! Unser Team meldet sich bei dir!
Oops! Something went wrong while submitting the form.