Im Folgenden erfahren Sie, wie Sie das Petra Webwidget auf Ihrer Website integrieren. Konfigurieren Sie sich ihr persönliches Webwidget über das Dashboard und kopieren sie den Script-Block der daraus resultiert. Im folgenden ein Beispiel Script-Block (nicht funktionsfähig):

<script src="https://cdn.jsdelivr.net/gh/HalloPetra/html-script-tag@latest/dist/assets/index.js" 
        data-contact-widget-auto-init 
        data-customer-id="<Ihre Kunden ID>" 
        data-logo-src="https://cdn.jsdelivr.net/gh/HalloPetra/html-script-tag@latest/assets/logo.png" 
        data-speech-bubble-text="Wie darf ich Ihnen helfen?" 
        data-form-title="Wir rufen Sie zurück" 
        data-form-description="Wir werden Sie innerhalb der nächsten Minute unter der angegebenen Telefonnummer kontaktieren." 
        data-submit-text="Anruf bekommen" 
        data-extra-input-fields='[{"type":"email","required":true}]'>
</script>

Hinweis: Dieser Code erzeugt ein kleines Widget (Sprechblase) auf Ihrer Website, über das Besucher einen Rückruf anfordern können. Im nächsten Schritt fügen Sie diesen Code in Ihre Website ein. Wählen Sie unten Ihre Plattform aus und folgen Sie der jeweiligen Anleitung.

WordPress

Schritt-für-Schritt Anleitung:

1. Anmeldung und Vorbereitung: Melden Sie sich im Admin-Bereich Ihrer WordPress-Website an. Stellen Sie sicher, dass Sie Administratorrechte haben.

2. Plugin zum Einfügen von Code installieren: Navigieren Sie zu „Plugins > Installieren“ und suchen Sie nach einem Plugin wie Insert Headers and Footers (oder WPCode). Installieren und aktivieren Sie das Plugin. Dieses Plugin ermöglicht es Ihnen, Skripte einfach in den Kopf- oder Footer-Bereich Ihrer Website einzufügen, ohne den Theme-Code manuell bearbeiten zu müssen.

3. Script-Code einfügen: Gehen Sie nun zu „Einstellungen > Insert Headers and Footers“ (bzw. zum entsprechenden Menüeintrag des Plugins). Sie sehen dort Textfelder für Scripts in Header und Scripts in Body/Footer. Fügen Sie den oben kopierten HalloPetra-Script-Block in das Feld Scripts in Body (oder Footer) ein. (Sie können ihn auch im Header platzieren; im Body/Footer lädt er nach dem Seiteninhalt, was in der Regel unproblematisch ist.)

4. Speichern: Klicken Sie auf „Speichern“. Der Code wird nun automatisch auf allen Seiten Ihrer WordPress-Website eingefügt. Laden Sie Ihre Website neu – das HalloPetra Widget sollte jetzt als kleines Icon oder Sprechblase erscheinen.

Besonderheiten/Hinweise: Wenn Sie WordPress.com (die gehostete Version von WordPress) nutzen, beachten Sie, dass das Einfügen eigener JavaScript-Codes dort erst ab dem Business-Tarif möglich ist​wordpress.com. In den kostenlosen bzw. günstigeren WordPress.com-Tarifen sind Skript-Einbettungen aus Sicherheitsgründen nicht erlaubt. Mit einem selbstgehosteten WordPress (WordPress.org) haben Sie diese Einschränkung nicht. Fortgeschrittene Nutzer könnten alternativ den Code auch direkt in die Theme-Dateien einbauen (z.B. in die header.php direkt vor </head> oder in die footer.php vor </body>). Dies erfordert jedoch Vorsicht: Erstellen Sie am besten ein Child-Theme, damit die Änderung bei Theme-Updates erhalten bleibt.

Wix

Schritt-für-Schritt Anleitung:

1. Wix Editor öffnen: Loggen Sie sich bei Wix ein und öffnen Sie Ihre Website im Wix Editor (nicht dem ADI, da der Editor nötig ist, um Code einzufügen).

2. Element zum Einbetten hinzufügen: Klicken Sie im Editor links auf das „+ Hinzufügen“-Symbol. In der sich öffnenden Leiste wählen Sie den Abschnitt „Code einbetten“ aus. Unter den Einbettungs-Optionen klicken Sie auf „HTML einbetten“​support.wix.com. Dadurch fügen Sie Ihrer Seite ein neues HTML-Element (einen Platzhalter) hinzu. Sie können dieses Element wie ein Widget auf der Seite verschieben und in der Größe anpassen.

3. Script-Code einfügen: Klicken Sie auf den neu hinzugefügten HTML-Platzhalter auf Ihrer Seite. Es erscheint ein Button oder Menü mit der Option „HTML-Code eingeben“ (manchmal als Stiftsymbol oder Enter Code beschriftet). Klicken Sie darauf. Es öffnet sich ein Fenster oder Panel, in das Sie HTML/JS-Code eingeben können. Fügen Sie den HalloPetra Script-Block genau so ein, wie Sie ihn kopiert haben. Achten Sie darauf, dass die URL im Script (https://...) mit HTTPS beginnt, da Wix nur HTTPS-Verbindungen in eingebettetem Code zulässt​support.wix.com.

4. Übernehmen und platzieren: Klicken Sie auf „Übernehmen“ (Apply). Das Widget-Fenster schließt sich. Im Editor sehen Sie eventuell einen grauen Platzhalter oder eine Vorschau des Widgets. Positionieren Sie das HTML-Element an der gewünschten Stelle – für ein ständig sichtbares Kontakt-Widget bietet es sich an, das Element z.B. unten rechts auf der Seite zu platzieren.

5. Speichern und Veröffentlichen: Klicken Sie oben rechts auf „Speichern“ und anschließend auf „Veröffentlichen“. Besuchen Sie Ihre Live-Website, um zu testen, ob das HalloPetra Widget erscheint. Es sollte nun sichtbar sein und z.B. eine Sprechblase mit „Wie darf ich Ihnen helfen?“ anzeigen.

Besonderheiten/Hinweise: Bei Wix können Sie Code auf diese Weise in jede Seite einfügen. Beachten Sie, dass dieses HTML-Widget jeweils seitenweise eingefügt wird. Möchten Sie das Widget auf allen Seiten anzeigen, müssen Sie den Code entweder auf jeder relevanten Seite einfügen oder (wenn Sie einen Premium-Tarif mit eigenem Domain haben) den Code über „Tracking & Analytics“ site-wide einbinden. Die globale Einbindung von benutzerdefiniertem Code im Head/Body (über die Tracking-Code-Funktion) ist nämlich nur für zahlende Wix-Pakete verfügbar. Im kostenlosen Wix-Tarif funktioniert die oben beschriebene Einbettung via HTML-Element jedoch einwandfrei. Denken Sie daran, dass im kostenlosen Tarif ein Wix-Werbebanner oben auf Ihrer Seite erscheint, was aber die Funktion des HalloPetra Widgets nicht beeinträchtigt.

IONOS Website Builder (MyWebsite)

Schritt-für-Schritt Anleitung:

1. Editor öffnen: Melden Sie sich in Ihrem IONOS-Konto an und öffnen Sie Ihren Website-Editor. Gehen Sie dazu im IONOS Dashboard zu „Websites & Shops“ und klicken Sie bei Ihrem Projekt auf „MyWebsite Now öffnen“. Der Website-Editor wird in einem neuen Fenster gestartet. (Hinweis: „MyWebsite Now“ ist der Name des IONOS Website Builders.)

2. Prüfen Sie die Verfügbarkeit des HTML-Elements: IONOS bietet ein spezielles HTML-Modul an, um eigenen Code einzubetten. Dieses Feature ist jedoch nicht in allen Tarifen aktiviert​ionos.de​ionos.de. Stellen Sie sicher, dass das sogenannte Flexibility-Feature in Ihrem Projekt aktiv ist (dies ist notwendig, um das HTML-Modul nutzen zu können). Sollte Ihr aktueller Tarif diese Funktion nicht unterstützen oder das HTML-Element nicht verfügbar sein, müssten Sie ggf. den Tarif wechseln oder den Support kontaktieren, da in einigen sehr einfachen Paketen die Einbettung von eigenem HTML/JS-Code nicht vorgesehen ist.

3. HTML-Modul auf Seite einfügen: Wählen Sie im linken Menü des Editors den Bereich „Inhalte“ (so gelangen Sie zur Bearbeitung der Seiteninhalte). Navigieren Sie zu der Seite bzw. dem Abschnitt, wo das Widget eingebunden werden soll. Fahren Sie mit der Maus über den gewünschten Abschnitt Ihrer Seite, in dem das Widget erscheinen soll. Klicken Sie auf „Abschnittsoptionen“ (oft als kleines Zahnrad oder Menü am Abschnitt) und dann auf „HTML-Modul“ hinzufügen. Daraufhin erscheint im gewählten Abschnitt ein Platzhalter-Kasten für benutzerdefinierten Code​ionos.de.

4. Code einfügen: Klicken Sie auf den HTML-Platzhalter. Es erscheint eine Option „Code“ (bzw. HTML/JavaScript eingeben). Klicken Sie darauf, um das Code-Eingabefeld zu öffnen. Fügen Sie den HalloPetra Script-Code in dieses Feld ein.

5. Datenschutz-Einstellung wählen: Unter dem Eingabefeld bietet IONOS eine Datenschutz-Option an. Hier können Sie auswählen, ob der Code ohne zusätzliche Zustimmung ausgeführt werden darf. Da es sich beim HalloPetra Widget um einen Kontaktservice handelt und nicht um z.B. Tracking, können Sie in der Regel „Keine Zustimmung erforderlich“ wählen (d.h. das Widget wird direkt geladen, ohne dass der Besucher erst zustimmen muss)​ionos.de.

6. Speichern: Bestätigen Sie die Eingabe mit „Fertig“ oder „Speichern“. Das Widget ist nun auf dieser Seite integriert.

7. (Alternative – Code global einfügen): Möchten Sie das Widget auf allen Seiten einbinden, können Sie anstatt des obigen Schritts 3-6 den Code auch in den Seitenkopf (Head) Ihrer Website einfügen. Gehen Sie dazu im linken Menü auf „Webseite“ > „Einstellungen“ (oder ein ähnliches Menü) und suchen Sie nach „Head-Code“ oder „HTML im Head“. Dort können Sie den Script-Code ebenfalls einfügen. Code, der im Head-Bereich eingefügt wird, wird automatisch auf jeder Seite Ihrer IONOS-Website geladen​ionos.de. Vergessen Sie auch hier nicht, die entsprechende Datenschutz-Option (Zustimmung nicht erforderlich) zu setzen und zu speichern.

Besonderheiten/Hinweise: Die Verfügbarkeit des HTML-Moduls hängt vom gebuchten Paket ab​ionos.de. In manchen Basis-Tarifen von IONOS MyWebsite ist die Möglichkeit, eigenen Code einzubetten, deaktiviert oder eingeschränkt. Falls Sie die genannten Menüpunkte nicht finden, prüfen Sie Ihren Tarif oder kontaktieren Sie den IONOS Support. Stellen Sie außerdem sicher, dass Sie die Änderung veröffentlicht haben (häufig gibt es einen „Veröffentlichen“-Button), damit das eingebundene Widget live auf Ihrer Website erscheint.

Jimdo

Schritt-für-Schritt Anleitung: (für Jimdo Creator)

1. Jimdo Editor öffnen: Loggen Sie sich in Ihr Jimdo-Konto ein und bearbeiten Sie Ihre Website. Falls Sie Jimdo Creator nutzen (die klassische Jimdo-Oberfläche), gelangen Sie in den Editor, in dem Sie direkt Elemente auf Ihren Seiten hinzufügen können.

2. Element hinzufügen: Navigieren Sie zu der Seite (und Stelle auf der Seite), wo Sie das HalloPetra Widget einfügen möchten. Bewegen Sie die Maus über den Inhaltsbereich, bis die Option „Inhalt hinzufügen“ oder ein „+“-Symbol erscheint. Klicken Sie darauf, um ein neues Element hinzuzufügen.

3. Widget/HTML-Element auswählen: Jimdo bietet ein spezielles Element für benutzerdefinierten Code. Suchen Sie in der Elementauswahl nach „Widget/HTML“. (Eventuell ist dies unter „Weitere Elemente“ kategorisiert.) Klicken Sie auf „Widget/HTML“, um dieses Element einzufügen​help.jimdo.com. Ein leeres Code-Feld erscheint nun auf Ihrer Seite.

4. Script-Code einfügen: Klicken Sie in das eingefügte Widget/HTML-Feld. Es öffnet sich ein Editor-Fenster, in das Sie HTML oder Script-Code eingeben können. Fügen Sie den HalloPetra Script-Block vollständig in dieses Feld ein.

5. Speichern: Bestätigen Sie die Eingabe mit „Speichern“ oder „OK“ (der genaue Buttontext kann z.B. „Speichern“ lauten). Schließen Sie den Editor. Auf Ihrer Seite sollte nun (eventuell erst nach dem Veröffentlichen/Neu Laden) das HalloPetra Widget erscheinen. Oft zeigt Jimdo im Bearbeitungsmodus einen Platzhalter oder Rahmen an – auf der live veröffentlichten Seite sehen Sie dann das echte Widget.

6. Änderungen veröffentlichen: Wenn Ihre Jimdo-Seite einen separaten Veröffentlichen-Schritt erfordert (bei Jimdo Creator werden Änderungen meist automatisch übernommen, bei Jimdo Dolphin muss man ggf. veröffentlichen), stellen Sie sicher, dass die Änderungen online sind. Öffnen Sie Ihre Website als Besucher, um zu überprüfen, ob das Widget sichtbar ist.

Besonderheiten/Hinweise: Die oben genannten Schritte beziehen sich auf Jimdo Creator (das klassische Jimdo-Baukasten-System). Falls Sie die neuere Jimdo-Version (oft als Jimdo Dolphin bezeichnet) verwenden, beachten Sie, dass benutzerdefinierter Code dort aktuell nicht oder nur eingeschränkt einfügbar ist – insbesondere im kostenlosen Tarif. Jimdo Dolphin ist auf einfache Bedienung ausgelegt und lässt eigene HTML-Widgets meist nicht zu. In Jimdo Creator hingegen steht das Widget/HTML-Element ab bestimmten Tarifstufen zur Verfügung. In älteren Free-Tarifen von Jimdo Creator war die Nutzung des Widget/HTML-Elements unserer Erfahrung nach möglich, jedoch können neuere kostenlose Tarife Einschränkungen haben. Prüfen Sie also Ihr Jimdo-Paket: unter Umständen ist das Einbetten von externen Skripten ein Feature, das einen Pro- oder Business-Tarif erfordert.

Shopify

Schritt-für-Schritt Anleitung:

1. Shopify-Admin öffnen: Melden Sie sich in Ihrem Shopify-Adminbereich an. Wählen Sie im linken Menü „Onlineshop“ und dann „Themes“ (Designvorlagen) aus. Sie sehen nun Ihr aktuell veröffentlichtes Theme.

2. Theme-Code bearbeiten: Klicken Sie bei Ihrem aktuellen Theme auf „Aktionen“ (Actions) und dann im Dropdown-Menü auf „Code bearbeiten“ (Edit Code). Daraufhin öffnet sich der Theme-Code-Editor im Browser. Sie sehen eine Verzeichnisstruktur Ihrer Theme-Dateien.

3. Layout-Datei öffnen: In der Dateiliste suchen Sie den Ordner „Layout“ und klicken darin auf die Datei theme.liquid. (In neueren Themes heißt die Hauptlayout-Datei ebenfalls theme.liquid; ältere Themes nutzen ggf. theme.liquid oder layout.liquid – in aktuellen Shopify-Versionen ist es theme.liquid.)

4. Script-Code einfügen: Suchen Sie in der Datei theme.liquid nach der Stelle, an der das <body>-Tag geschlossen wird. Scrollen Sie dafür ganz nach unten – in der Regel finden Sie dort eine Zeile mit </body> gegen Ende der Datei. Fügen Sie den HalloPetra Script-Block unmittelbar VOR der schließenden </body>-Marke ein. (Dadurch wird das Widget beim Laden jeder Seite direkt vor Schluss des Body eingebunden.) Sie können zum Suchen die Tastenkombination Strg+F / Cmd+F nutzen und nach </body> suchen. Achten Sie darauf, den Code exakt so einzufügen, wie kopiert.

5. Änderung speichern: Klicken Sie oben rechts (oder unten rechts) im Code-Editor auf „Speichern“. Shopify speichert die Änderungen am Theme.

6. Überprüfung: Öffnen Sie Ihren Shop im Browser (Front-End) und prüfen Sie, ob das HalloPetra Widget angezeigt wird. Es sollte nun auf allen Seiten Ihres Shops erscheinen, da wir es im zentralen Theme-Layout eingebunden haben. Sollte das Widget nicht sichtbar sein, leeren Sie ggf. den Cache oder prüfen Sie, ob der Code korrekt eingefügt wurde (keine Zeichen versehentlich gelöscht).

Besonderheiten/Hinweise: Bei Shopify können Sie Theme-Code frei bearbeiten, es gibt keine Einschränkung je nach Tarif – jeder Shopify-Plan ermöglicht den Code-Zugriff. Beachten Sie, dass Theme-Änderungen Updates überschreiben können: Wenn Sie später das Theme wechseln oder aktualisieren, müssten Sie den Script-Code ggf. erneut einfügen. Eine gute Praxis ist es, vor Änderungen eine Sicherung Ihres Themes vorzunehmen (z.B. indem Sie eine Kopie des Themes veröffentlichen oder herunterladen), um im Notfall zurückzugehen. Für weniger technisch Versierte gibt es auch Shopify-Apps, um benutzerdefinierten Code einzufügen, doch das manuelle Einfügen im Theme wie oben beschrieben ist direkt und ohne zusätzliche Kosten möglich.