Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

Einbindung des Webclient

In diesem Artikel wird kurz dargestellt wie man das Script des Webclients in die eigene Website einbindet.

1. Allgemeine Vorgehensweise

Fügen Sie den folgenden Code vor dem schließenden </head>-Tag Ihrer Website ein:

<link rel="stylesheet" href="https://cdn1.heronos.com/scripts/widget/widget.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" id="jquery-core-js"></script>
<script
src="https://cdn1.heronos.com/scripts/widget/webclient-widget.js?ver=211"
url="https://assistant.heronos.com?tenant=<tenant_ID>"
width="400px"
height="600px"
id="heronOS-chat-script">
</script>

 

2. Anleitung für verschiedene Systeme

A) Reine HTML-Seite

  1. Öffnen Sie Ihre HTML-Datei (z. B. index.html).

  2. Suchen Sie den <head>-Bereich.

  3. Fügen Sie den obigen Code direkt vor </head> ein.

  4. Datei speichern und hochladen.

 

B) WordPress

Variante 1: Mit einem Plugin

  1. Installieren Sie das Plugin "Insert Headers and Footers".

  2. Gehen Sie zu Einstellungen > Insert Headers and Footers.

  3. Fügen Sie den Code in das Feld Scripts in Header ein.

  4. Änderungen speichern.

Variante 2: Direkt im Theme

Achtung: Änderungen im Theme können bei Updates überschrieben werden. Nutzen Sie ein Child-Theme!

  1. Öffnen Sie das Theme-File header.php (Design > Theme-Editor).

  2. Fügen Sie den Code vor dem </head>-Tag ein.

  3. Datei speichern.

 

C) Joomla

  1. Im Joomla Backend zu Erweiterungen > Templates > Templates wechseln.

  2. Ihr Template auswählen und index.php öffnen.

  3. Den Code vor </head> einfügen.

  4. Datei speichern.

 

D) Shopify

  1. Gehen Sie zu Onlineshop > Themes.

  2. Klicken Sie auf Aktionen > Code bearbeiten beim aktiven Theme.

  3. Öffnen Sie theme.liquid.

  4. Fügen Sie den Code vor </head> ein.

  5. Speichern.

 

E) Wix

  1. Im Wix Dashboard zu Website-Einstellungen > Erweitert > benutzerdefinierter Code.

  2. Neuen Code hinzufügen, Code oben einsetzen.

  3. Wählen Sie Platzierung: Header.

  4. Auf alle Seiten anwenden und speichern.

 

F) Squarespace

  1. Im Menü: Einstellungen > Erweitert > Code Injection.

  2. Den Code in das Feld Header einfügen.

  3. Änderungen speichern.

 

G) Drupal

  1. Im Backend zu Struktur > Blöcke oder ein Modul wie "Header and Footer Scripts" verwenden.

  2. Alternativ: Öffnen Sie die html.html.twig-Datei des aktiven Themes.

  3. Code vor </head> einfügen.

  4. Cache leeren und speichern.

 

H) Selbsterstellte PHP-Seite

1. PHP-Datei öffnen

Öffnen Sie die PHP-Datei, in der der HTML-Header (<head>...</head>) definiert ist – oft index.php, header.php oder eine ähnliche Datei.

2. Code vor dem schließenden </head>-Tag einfügen

Fügen Sie den gesamten heronOS Widget-Code an das Ende des <head>-Bereichs, aber vor </head>, ein.

Beispiel:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine PHP-Seite</title>
    <!-- Weitere Meta- und Styleangaben -->

    <!-- heronOS Widget Script Start -->
    <link rel="stylesheet" href="https://cdn1.heronos.com/scripts/widget/widget.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" id="jquery-core-js"></script>
    <script
      src="https://cdn1.heronos.com/scripts/widget/webclient-widget.js?ver=211"
      url="https://assistant.heronos.com?tenant=<>"
      width="400px"
      height="600px"
      id="heronOS-chat-script"
    ></script>
    <!-- heronOS Widget Script End -->

</head>
<body>
    <!-- Seiteninhalt -->
</body>
</html>
Hinweise:
  • Wird der Header in einer separaten Datei (z.B. header.php) eingebunden (include oder require), fügen Sie den Script-Code dort ein.
  • Wiederholen Sie den Vorgang für jede Seite, auf der das Widget erscheinen soll.
  • Änderungen speichern und die Seite neu laden, um das Widget zu sehen.

 

I) heronOS Widget in Angular einbinden

1. Bearbeite die Datei index.html

In Angular-Projekten ist die Datei src/index.html für den globalen <head>-Bereich verantwortlich. Hier binden Sie Drittanbieter-Scripte und Styles ein, die auf allen Seiten benötigt werden.

2. Script- und CSS-Code einfügen

Fügen Sie den Widget-Code vor das schließende </head>-Tag der index.html ein:

<!-- src/index.html -->
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>MeinAngularProjekt</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- heronOS Widget Script Start -->
  <link rel="stylesheet" href="https://cdn1.heronos.com/scripts/widget/widget.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" id="jquery-core-js"></script>
  <script
    src="https://cdn1.heronos.com/scripts/widget/webclient-widget.js?ver=211"
    url="https://assistant.heronos.com?tenant=<tenant-ID>"
    width="400px"
    height="600px"
    id="heronOS-chat-script"
  ></script>
  <!-- heronOS Widget Script End -->

</head>
<body>
  <app-root></app-root>
</body>
</html>

Hinweise

  • Änderungen an index.html wirken sich projektweit auf alle Seiten der Angular-App aus.
  • Nach Einfügen und Speichern das Projekt neu starten (falls es bereits läuft), und im Browser kontrollieren, ob das Widget erscheint.
  • Die Einbindung funktioniert auch in Produktion nach dem Build.

Zusammenfassung

Fügen Sie den Widget-Code stets vor dem schließenden </head> auf der gewünschten Seite oder global ein. Nutzen Sie, wenn möglich, CMS-eigene Möglichkeiten zur Code-Einbindung, um beim nächsten Update keine Änderungen zu verlieren.

Tipp: Änderungen immer testen und sichern!