Beiträge in diesem Abschnitt

Plattform-Einstellungen | Implementierungsanleitung “Webform to ticket” auf Ihrer Website

Steffen Borrmann
  • Aktualisiert
Folgen

Es gibt verschiedene Wege der Implementierung des Webformulars in in Ihre Website.

Wenn Sie über "App-Admin"-Berechtigungen verfügen, können Sie in den Plattform-Einstellungen unter "Omnichannel" die URL des Webformulars für Mieteranfragen einsehen und herauskopieren. 

Webform_to_Ticket.PNG

Einfachster Weg: Einbau eines Links

Die von Allthings gelieferte URL (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId….) in einem Link innerhalb einer bestehenden Seite oder in einem Menüpunkt einbauen. Diesen Link entweder direkt oder als Pop up (Achtung: Es gibt Mieter, die einen Pop-up-Blocker installiert haben) öffnen lassen. 

Zweiter Weg: Einbau eines Buttons

Auf einer bestehenden Seite einen Button erstellen und ihm den von uns mitgelieferten Link (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId…. zuweisen. Der Link kann entweder direkt in einem Tab geöffnet werden, oder als Pop up (Achtung: Es gibt Mieter, die einen Pop-up-Blocker installiert haben)

Dritter Weg: Subdomain einrichten

Eine subdomain beim Domain-Provider einrichten lassen, z.b. Service.verwaltungxyz.com. Diese Subdomain direkt auf die von die von Allthings gelieferte URL (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId….) verweisen lassen. 

Sollen weiter Implementierungsmöglichkeiten geprüft werden, stehen unsere Spezialisten zum vereinbarten Stundensatz der Person, die für das Webhosting beim Kunden zuständig ist, zur Verfügung.

Vierter Weg: Integration mit “Popup”

Das vorgefertigte Popup sieht erstmal wie folgt aus:


Integration_mit_Popup.png

Die Texte kann man dann im “Script” ändern.

<script type="text/javascript">
  var appId = ""
  var serviceProviderId = ""
  var title = "You have been selected for a survey"
  var subText = "We appreciate your feedback!"
  var textWithLinkRedirect = "Please click here start it now."
  var cancelRedirect = "No, thank you."

  var link = `https://service.allthings.me/s3/helpdesk?app_id=${appId}&service_provider_id=${serviceProviderId}`
  var sg_div = document.createElement("div");
  sg_div.innerHTML = `<h1>${title}</h1><p>${subText}</p><p><a href=\"${link}\">${textWithLinkRedirect}</a> </p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">${cancelRedirect}</a> `;
  sg_div.id = "sg-popup";
  sg_div.style.position = "absolute";
  sg_div.style.width = "500px";
  sg_div.style.top = "100px";
  sg_div.style.left = "400px";
  sg_div.style.backgroundColor = "#ffffff";
  sg_div.style.borderColor = "#000000";
  sg_div.style.borderStyle = "solid";
  sg_div.style.padding = "20px";
  sg_div.style.fontSize = "16px";
  document.body.appendChild(sg_div);
</script>


Um das Popup zu nutzen, muss man die “HTML”-Datei finden, welche zur zugehörigen Seite gehört, bei der es eingebaut werden soll. Diese kann ungefähr so aussehen:

<!DOCTYPE html>
<html>
  <head>
    ...
    ...
  </head>
  <body>
    <h1>...</h1>
    <p>...</p>
       ...
  </body>
</html>

 

Der obige Code sollte dann innerhalb der sogenannten <body>- “Tags” platziert werden. So könnte dann zum Schluss die Datei aussehen: 

<!DOCTYPE html>
<html>

  <head>
    ...
    ...
  </head>
  <body>
    <script type="text/javascript">
      var appId = ""
      var serviceProviderId = ""
      var title = "You have been selected for a survey"
      var subText = "We appreciate your feedback!"
      var textWithLinkRedirect = "Please click here start it now."
      var cancelRedirect = "No, thank you."

      var link = `https://service.allthings.me/s3/helpdesk?app_id=${appId}&service_provider_id=${serviceProviderId}`
      var sg_div = document.createElement("div");
      sg_div.innerHTML = `<h1>${title}</h1><p>${subText}</p><p><a href=\"${link}\">${textWithLinkRedirect}</a> </p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">${cancelRedirect}</a> `;
      sg_div.id = "sg-popup";
      sg_div.style.position = "absolute";
      sg_div.style.width = "500px";
      sg_div.style.top = "100px";
      sg_div.style.left = "400px";
      sg_div.style.backgroundColor = "#ffffff";
      sg_div.style.borderColor = "#000000";
      sg_div.style.borderStyle = "solid";
      sg_div.style.padding = "20px";
      sg_div.style.fontSize = "16px";
      document.body.appendChild(sg_div);
    </script>

    <h1>...</h1>
    <p>...</p>
       ...
  </body>
</html>

 

Weiter sollte die von Allthings gelieferte appId und die serviceProviderId eruiert werden. Dazu muss man sich den von uns zugesendeten Link anschauen (https://service.allthings.me/s3/helpdesk?appId=THISISAPPID&serviceProviderId=THISISSERVICEPROVIDERID). Dort findet man in der URL die beiden Werte. 

Rot markiert ist die appId, orange ist die serviceProviderId.

In der HTML-Datei sollte man die zwei Werte zwischen den Anführungszeichen eintragen. 

var appId = "THISISAPPID"

so wie auch var serviceProviderId = "THISSERVICEPROVIDERID" . 

Texte kann man einfach anpassen, in dem man einfach den neuen, passenden Text zwischen den Anführungszeichen bei title, subText, textWithLinkRedirect und cancelRedirect einfügt.

 

Fünfter Weg: Integration mit “iframe”

Ein “iframe” ist eine Möglichkeit, eine andere Webseite innerhalb der eigenen anzeigen zu lassen. iframes bieten den Vorteil, dass der Nutzer auf der eigenen Homepage bleibt aber in diesem Fenster (frame) auf einer anderen Webseite interagiert.

Für die bestmögliche Nutzererfahrung schlagen wir vor, einen neuen Linkpfad ihrer Webseite zu erstellen und eine eigene HTML-Datei dafür bereitzustellen (in der Regel ist die Datei automatisch ein neuer Pfad). In diese Datei muss man dann noch Folgendes einfügen: 

 

<!DOCTYPE html>
<html>
  <body style="margin:0;">

    <input type="button" onclick="window.location.replace('IHRE_WEBSEITE');" value="Home" style="margin-top: 7px;margin-left: 10px;position:absolute;z-index:1;color:#ffffff;background-color:#ff5500;font-weight: 600;font-family: Amatic SC, sans-serif !important;font-size:10px;line-height:1.4;border:none;transition: border .25s linear,color .25s linear,background-color .25s linear;border-radius: 2px;padding: 3px 5px 16px 5px;height: 15px;" />
    <iframe src="HIER-MUSS-IHR-LINK-HIN" frameborder="0" width="100%" height="100%" style="overflow:hidden;position:absolute;"></iframe>
  </body>
</html>

HIER-MUSS-IHR-LINK-HIN mit Ihrem zugesendeten Link von Allthings ersetzen, IHRE_WEBSEITE mit dem Link zu Ihrer eigenen Seite ersetzen und gegebenenfalls Home mit einem Wort Ihrer Wahl.

Falls das iframe eingebettet wird und nicht als Pfad eine eigenständige Seite bildet, müssen die jeweiligen Eigenschaften angepasst werden.

    <iframe src="HIER-MUSS-IHR-LINK-HIN" frameborder="0" width="calc(100vw - ANZAHL_IN_PIXEL_EINHEIT)" height="calc(100vh - ANZAHL_IN_PIXEL_EINHEIT)" style="overflow:hidden;"></iframe>

Je nachdem kann es reichen, dass man die jeweiligen Felder (ANZAHL_IN_PIXEL_EINHEIT) durch z.B. 100px ersetzt. Diese müssen je nachdem angepasst werden, sodass es für die eigene Seite passt. An dem Feld width="calc(100vw - ANZAHL_IN_PIXEL_EINHEIT)" verändert man die Breite des iframes und bei height="calc(100vh - ANZAHL_IN_PIXEL_EINHEIT)" die Höhe.

In manchen Fällen reicht es width="100%"  stehen zu lassen und nur height anzupassen.

Dazu muss gesagt werden, dass andere Elemente der Seite das iframe in seiner Darstellung beeinträchtigen können.

Verwandte Beiträge