WhatsApp Chat-Integration: Einrichtung und Hilfe
Schnellstart
- Laden Sie die ZIP-Datei des Moduls unter "Modules > Module Manager" hoch und öffnen Sie "Configure".
- Geben Sie Ihre Telefonnummer ein (7 bis 20 Ziffern mit Landesvorwahl).
- Legen Sie bei Bedarf Vorausgefüllte Nachricht mit {product} und {url} fest.
- Lassen Sie Widget aktivieren aktiviert und wählen Sie Position und Button-Stil.
- Legen Sie Auf Mobilgeräten anzeigen und Auf Seiten anzeigen fest und klicken Sie auf Speichern.
- Öffnen Sie eine zulässige Shop-Seite und scrollen oder klicken Sie, um die Schaltfläche zu laden.
- Klicken Sie auf die Schaltfläche und prüfen Sie, ob die gewünschte WhatsApp-Unterhaltung geöffnet wird.
Erfordert PrestaShop 1.6 oder neuer und PHP 7.1 oder neuer.
Einrichtungsanleitung
Installieren und verbinden
- Öffnen Sie "Modules > Module Manager" in Ihrem Backoffice.
- Wählen Sie "Upload a module" und laden Sie die ZIP-Datei von WhatsApp Chat Integration hoch.
- Öffnen Sie "Configure".
- Geben Sie unter WhatsApp-Verbindung Ihre Telefonnummer im internationalen Format nur mit Ziffern ein.
- Lassen Sie Widget aktivieren aktiviert und speichern Sie.
- Öffnen Sie Ihren Shop, scrollen oder klicken Sie und testen Sie anschließend die Kontaktschaltfläche.
Erfordert PrestaShop 1.6 oder neuer und PHP 7.1 oder neuer.
Verbindungseinstellungen
| Einstellung | Standardwert nach der Installation | Ihre Aktion |
|---|---|---|
| Widget aktivieren | Ja | Deaktivieren Sie dies, um die Schaltfläche zu pausieren und Ihre Einstellungen zu behalten. |
| Telefonnummer | Leer | Geben Sie 7 bis 20 Ziffern einschließlich Landesvorwahl ein. Lassen Sie Pluszeichen, Leerzeichen und Satzzeichen weg. |
| Vorausgefüllte Nachricht | Leer | Geben Sie bei Bedarf einen Nachrichtentext ein. Verwenden Sie {product} für den Produktnamen und {url} für die URL der aktuellen Seite. |
Sie bearbeiten die Formulare für die Verbindung, Erscheinungsbild und Verhalten auf der Modulkonfigurationsseite. Verwenden Sie nach Änderungen Speichern. Buttontext, Tooltip-Text und Vorausgefüllte Nachricht unterstützen sprachabhängige Texte. Fehlende Sprachtexte werden zunächst durch die Standardsprache und anschließend durch den gespeicherten Basistext ersetzt.
Erscheinungsbild
| Einstellung | Standardwert nach der Installation | Wann ändern |
|---|---|---|
| Position | Unten rechts (bottom-right) |
Wählen Sie Unten links (bottom-left), wenn die rechte Ecke belegt ist. |
| Button-Stil | Schwebendes Symbol (icon) |
Wählen Sie Leiste mit Text (bar), um Buttontext anzuzeigen. |
| Buttontext | Chatten Sie mit uns | Legen Sie den im Leistenstil angezeigten Text fest. |
| Schaltflächenfarbe | #25D366 |
Legen Sie die Hintergrundfarbe der Schaltfläche fest. |
| Schaltflächengröße (px) | 60 | Legen Sie den Durchmesser des runden Symbols fest. |
| Abstand vom Rand (px) | 20 | Passen Sie den Abstand zum unteren und zum gewählten seitlichen Rand an. |
| Tooltip anzeigen | Ja | Deaktivieren Sie dies, um den Hinweis beim Darüberfahren auszublenden. |
| Tooltip-Text | Brauchen Sie Hilfe? Chatten Sie mit uns! | Legen Sie den Hinweis beim Darüberfahren fest. |
| Animation | Pulsieren (pulse) |
Wählen Sie Abprallen (bounce) oder Keiner (none). |
Verhalten und Anzeige im Shop
| Einstellung | Standardwert nach der Installation | Funktion |
|---|---|---|
| Auf Mobilgeräten anzeigen | Ja | Deaktivieren Sie dies, um die Ausgabe auszublenden, wenn PrestaShop einen mobilen Besucher erkennt. |
| Fallback-Verzögerung (Sekunden) | 0 | Das Widget wird beim ersten Scrollen, Klicken, Berühren oder Tastendruck geladen. Ein positiver Wert legt die maximale Wartezeit ohne Interaktion fest. Bei null greift ein Ersatz-Timer von 10 Sekunden. |
| Auf Seiten anzeigen | Alle Seiten (all) |
Wählen Sie Nur Produktseiten (product), Nur Kategorieseiten (category) oder Nur Bestellseiten (checkout). |
Die Checkout-Zuordnung erkennt cart, order, order-opc, orderopc und checkout. Ein eigener Checkout-Controller mit anderem Namen wird dieser Auswahl nicht zugeordnet.
Das Modul lädt sein lokales Stylesheet über displayHeader. Ihr Theme muss displayBeforeBodyClosingTag oder ersatzweise displayFooter ausführen. Ein Darstellungsschutz verhindert doppelte Schaltflächen.
Die Schaltfläche öffnet https://wa.me/PHONE mit einem optionalen URL-kodierten Parameter text. WhatsApp oder WhatsApp Web übernimmt die Unterhaltung. Das Modul verwendet weder die WhatsApp Business API noch speichert es Nachrichten in PrestaShop.
Setzen Sie für eine Produktfrage Vorausgefüllte Nachricht auf Hi! I have a question about {product}: {url} und Auf Seiten anzeigen auf Nur Produktseiten. Das Modul ersetzt {product} nur auf Produktseiten. Auf anderen Seiten kann dieser Platzhalter unverändert bleiben; verwenden Sie für Hilfe beim Checkout daher normalen Text und {url}. Das Modul bietet keinen Chatbot, gemeinsamen Posteingang, Automatisierung oder Nachrichtenverlauf.
Prüfen und Probleme beheben
- Öffnen Sie eine durch Auf Seiten anzeigen erlaubte Seite und interagieren Sie damit. Wenn Sie nichts tun, warten Sie auf den Ersatz-Timer.
- Klicken Sie auf die Schaltfläche und prüfen Sie, ob Ihre eigene Nummer geöffnet wird. Testen Sie eine Produktseite und prüfen Sie die ausgefüllte Nachricht vor dem Senden.
- Wenn die Schaltfläche fehlt, prüfen Sie Widget aktivieren, die erforderliche Kennung, Auf Mobilgeräten anzeigen und die Seitenauswahl. Das Backoffice zeigt bei fehlender oder ungültiger Kennung einen Konfigurationshinweis an. Geänderte Kennungen werden beim Speichern geprüft; eine ungültige Änderung behält die vorherige Konfiguration bei.
- Wenn das Markup auf allen zulässigen Seiten fehlt, prüfen Sie den Darstellungs-Hook in Ihrem Theme. Ist es vorhanden, aber unsichtbar, prüfen Sie Theme-CSS, JavaScript-Fehler und überlappende fixierte Schaltflächen.
- Eine gültige Nummer aus reinen Ziffern muss auch zum gewünschten WhatsApp-Konto gehören. Testen Sie den Link auf den Geräten Ihrer Kunden.
Theme anpassen
Überschreiben Sie themes/your-theme/modules/mprwhatsappchatintegration/views/templates/hook/displayBeforeBodyClosingTag.tpl, wenn Sie anderes Markup benötigen. Behalten Sie Ihre Änderungen im Theme.
Die Widget-ID lautet #mprwhatsapp-widget. Klassen für Position, Stil und Animation verwenden dasselbe Präfix, etwa .mprwhatsapp-bottom-right, .mprwhatsapp-bar und .mprwhatsapp-pulse. Die Tooltip-Klasse lautet .mprwhatsapp-tooltip.
Sie können die Schaltfläche im Stylesheet Ihres Themes über ein anderes fixiertes Element verschieben:
#mprwhatsapp-widget.mprwhatsapp-bottom-right {
bottom: calc(var(--mprwa-margin, 20px) + 50px);
}
#mprwhatsapp-widget .mprwhatsapp-tooltip {
font-size: 12px;
}
Die Einstellungen erzeugen --mprwa-color, --mprwa-size und --mprwa-margin auf dem umschließenden Element. Verwenden Sie die Einstellungen, um diese Werte zu ändern.
Deaktivieren oder deinstallieren
Deaktivieren Sie Widget aktivieren, um die Schaltfläche nicht mehr anzuzeigen. Zum Entfernen des Moduls verwenden Sie "Uninstall" im "Module Manager". Die Deinstallation entfernt seine Menüeinträge und die gespeicherte Modulkonfiguration. In WhatsApp gespeicherte Unterhaltungen werden nicht gelöscht.
Fragen
2
Welche Seiteninformationen kann der WhatsApp-Link enthalten?
Die optionale vorausgefüllte Nachricht wird in den WhatsApp-Link übernommen. Auf Produktseiten wird {product} durch den Produktnamen ersetzt; {url} enthält die aktuelle Seiten-URL einschließlich Abfrageparametern. Prüfen Sie vor der Verwendung, welche Informationen Sie damit weitergeben. Die Unterhaltung findet in WhatsApp statt; ihre Nachrichten werden nicht in PrestaShop gespeichert.
Lädt das Modul das WhatsApp-SDK oder externe Skripte?
Die Schaltfläche verwendet einen normalen https://wa.me/-Link, ein lokales Stylesheet und einen Inline-Loader. Sie lädt weder ein WhatsApp-SDK noch ein externes Chat-Skript.
Der Loader fügt die Schaltfläche bei der ersten Interaktion oder nach Ablauf der eingestellten Ersatzwartezeit ein. Bei einem Wert von null beträgt diese 10 Sekunden.
Bekannte Probleme
6
Veraltete Einrichtungswarnung nach dem Speichern
WhatsApp-Link hatte einen falschen barrierefreien Namen
Übersetzte Einstellungsbeschriftungen nicht angezeigt
Installationsprüfungsseite blieb unübersetzt
Kompatibilität mit Asset-Kombination
Alte Chat-Einstellungen nicht übernommen
Funktionsanfragen
5
Implementiert
Modulupdates mit einem Klick
Mehrsprachige Oberfläche
Installationsprüfung und Reparatur
WhatsApp-Kontaktschaltfläche
Besuchertexte je Sprache
Änderungsprotokoll
v1.1.142026-05-27
- Addedcomplete FR/DE/ES/IT/PL translations
- FixedMigrate chat config from ps_configuration to ConfigTable
Ältere Versionen
v1.1.142026-05-26
- Certified the release ZIP with the shared package surface gate.
- Rebuilt the package without source maps, build tooling or leaked shared-package development files.
- Addeda displayFooter fallback so themes that do not render displayBeforeBodyClosingTag still show the WhatsApp button, with a duplicate-render guard for themes that render both hooks.
- Aligned module source, config.xml, composer metadata, package metadata and live release metadata.
- Refreshed product-page content with real Back Office and storefront screenshots, and removed unsupported chat-routing, scheduling, device-state and performance claims.
v1.1.132026-05-25
- Completed locale coverage for WhatsApp Chat configuration and storefront labels.
v1.1.x
- WhatsApp phone number configuration from PrestaShop Back Office.
- Optional pre-filled message with {product} and {url} placeholders.
- Button position, icon/bar style, colour, size, tooltip, animation, mobile visibility, delay and page targeting controls.
- Back-office readiness checks for the required phone number configuration.
Demo
Testen Sie das vollständige Modul vor dem Kauf
Kaufen Sie die Lizenz später, Ihre Einstellungen bleiben erhalten.
- Ihre 30-Tage-Demo Testen Sie es 30 Tage ab der ersten Installation in Ihrem eigenen Shop.
- Fertiger Demo-Shop Entdecken Sie einen fertigen Demo-Shop im Browser.
- Ohne Registrierung Kein Konto, keine E-Mail-Adresse und keine Shop-Domain nötig.
Mit dem Download akzeptieren Sie die Demo-Bedingungen und die Datenschutzerklärung.
Mit dem Öffnen dieser Demo akzeptieren Sie die Demo-Nutzungsbedingungen und die Datenschutzerklärung.