Forum
22.06.2015, 13:24

Sparen Sie Supportzeiten mit dem intelligenten Kontaktformular + FAQ

Sehr geehrte Kunden,

mit dem heutigen Update bieten wir Ihnen die Möglichkeit durch eine einmalige Pflege im System langfristig viel Zeit im Support einzusparen!

In der Regel wiederholen sich die Probleme der Endkunden, die Sie per Kontaktformular anschreiben:

- Wo bleibt meine Bestellung?
- Wie kann ich mit Paypal zahlen?
- Kann ich bestimmte Artikel vorbestellen?
- Ist die Eingabe meiner pers. Daten sicher?
- Ich finde Ihre Telefonnummer im Impressum
- ...

Sicher wird sich der ein oder andere von Ihnen schon Antwort-Texte für bestimmte Fälle im Kundensupport vorbereitet haben. Dennoch ist es so, dass ein(e) Mitarbeiter(in) die Mail anpacken, lesen und beantworten muss.

Wenn auch nur 10 bis 20 Prozent dieser Mail-Fragen verhindert werden könnten, wäre das eine tolle Entlastung für Ihr Personal. Andererseits, wenn der Endkunde eine Antwort gar nicht erst abwarten müsste, wäre es für ihn ein Zeit-Vorteil und verbessert die Kundenzufriedenheit.

Stellen Sie sich vor, dem Besucher Ihres Kontaktformulars wird während er tippt eine mögliche Antwort für seine Frage eingeblendet? Das wäre doch toll! Ein Weiterschreiben evtl. überflüssig..

Damit so eine Funktion auch wirklich hilft, sollte man den Kunden auch möglichst in dieses Formular lenken. Sprich: Nicht die eMail-Adresse im Impressum verlinken mit "mailto:...@shop.de", sondern eben mit dem Kontaktformular. Auch durchaus die Telefonnummer (wenn denn für Ihren Shop die persönliche Beratung nicht notwendig ist) aus dem Kopf des Shops entfernen.

Grund für den Einsatz dieser Funktion kann aber genauso auch einfach nur "mehr Kundenservice" sein!

Die neue Funktion können Sie auf unserer Testinstallation live ausprobieren:



Es sollte dann dies hier erscheinen:



Wie Sie sehen sind natürlich auch Bilder, Verlinkungen, bzw. HTML möglich.

Beim ersten einblenden wird der Text durch einen sichtbaren Effekt unterstützt, damit der Besucher auch merkt, dass sich da was eingeblendet hat.

Selbstverständlich ist die ganze Funktion mehrsprachig entwickelt. Das Ergebnis ist auf maximal 5 Textbausteine begrenzt. Nur die fünf relevantesten werden angezeigt. Mehr dazu gleich..


Intelligentes Finden der FAQ-Einträge

In der Shopverwaltung (wird gleich genauer beschrieben) kann man Keywörter für die FAQ-Einträge definieren. Damit das Einblenden der FAQ möglichst sinnig ist und den Kunden nicht nur nervt, haben wir ein paar Möglichkeiten geschaffen die Einblendung und auch die Sortierung bei den bis zu 5 FAQs mit etwas KI anzureichern.

Angenommen das hier sind unsere Keywörter (immer mit Leerzeichen getrennt) für den FAQ-Eintrag "Wann wird meine Bestellung versendet?":

*bestell* order* lieferung paket wo warum weshalb


Das * Symbol bedeutet dass vor oder hinter dem Wort weitere zeichen sein können. Bei "*bestell*" würde also bei Eingabe von "Bestelleingang" und auch "Erstbestellung" diese FAQ eingeblendet werden.
Ist ein Keywort ohne * geschrieben, muss es als ganze Wort im Text des Besuchers enthalten sein.

Die Sortierung wird (ähnlich wie bei der POWERsuche) durch ein Punktesystem beeinflusst. Entscheidend ist die Reihenfolge Ihrer Keywörter.

Das 1. Wort bekommt: 4 Punkte
Das 2. Wort bekommt: 3 Punkte
Das 3. Wort bekommt: 2 Punkte
alle weiteren Keywörter: 1 Punkt

Der Text "Wo bleibt meine Lieferung" würde also (Lieferung=2 + wo=1) 3 Punkte bekommen. Findet das System mehr Keywörter mit hoher Gewichtung zum Thema Versandkosten, stellt es den FAQ Beitrag darüber!


Auch witzige Einträge einbauen!

So ein System verträgt durchaus auch ein paar witzige Antworten. Oder wie in diesem Beispiel, wo man bei Schimpfwörtern den Kunden evtl. ein Tick beruhigt:




Bitte schauen Sie sich Ihre Support-Mails an!

Wenn Sie wissen möchten, wie das Feature am effektivsten arbeitet, dann brauchen Sie nur Ihre Support-Mails zu untersuchen. Die richtigen Keywörter für die Einstellung finden Sie ganz sicher dort!


Die Pflege im Backend

..zumindest von 1 bis 2 FAQ Einträgen ist Voraussetzung, damit Sie das Feature im Frontend aktivieren können.

Über den Pfad:



finden Sie 2 neue Masken. Zunächst pflegen Sie ein paar Texte. In unserem Testsystem sind z.B. diese erfasst:



Über die Regeln erfolgt die Zuordnung der Texte zu den Keywörtern. Hier ein Screen aus der Testinstallation:



Bei der Definition der Keywörter achten Sie bitte auf die Reihenfolge! Die wichtigsten zuerst wie oben im Punkt "Intelligentes Finden der FAQ-Einträge" beschrieben. Die Pflegemaske ist selbsterklärend.


Die Einrichtung/Erweiterung des Kontaktformulars

Über Layout > Schriften/CSS > ALL ROOT bitte zunächst dieses Beispiel CSS einbinden:

.faq{border-bottom:1px solid #BBBBBB;margin-bottom:20px;}
.faq_title{font-size:20px;font-weight: bold;margin:8px;margin-top:20px;}
.faq_text{font-size:14px;margin:8px;margin-bottom:20px;}
.faq_start{font-size:16px;color:#AA5555;}
.faq_rahmen{margin-top:10px;border: 4px solid #DDDDDD; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; padding:12px;}

.animated {-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes flipInY {
0% {-webkit-transform: perspective(400px) rotateY(90deg); opacity: 0;}
40% {-webkit-transform: perspective(400px) rotateY(-10deg);}
70% {-webkit-transform: perspective(400px) rotateY(10deg);}
100% {-webkit-transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
@keyframes flipInY {
0% {transform: perspective(400px) rotateY(90deg);opacity: 0;}
40% {transform: perspective(400px) rotateY(-10deg);}
70% {transform: perspective(400px) rotateY(10deg);}
100% {transform: perspective(400px) rotateY(0deg);opacity: 1;}
}
.flipInY {-webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY;}


Wer sich mit CSS auskennt wird es spielend einfach haben es an das eigene CI anzupassen.

Denn CSS-Code für eine andere Anfangs-Animation können Sie auf coveloping.com/tools/css-animation-generator finden.

Das Kontaktformular (wenn denn schon eines vorhanden ist) finden Sie über Sonstiges > HTML-Includes. Die Erweiterung damit neben dem Formular die möglichen Fragen/Antworten angezeigt werden ist nicht viel:


<div class=faq_rahmen>
<div id=faq_start class=faq_start><b>Hier zeigen wir Ihnen während des Tippens Ihrer Frage mögliche Lösungsvorschläge an!</b></div>
<div id=faq_loesung></div>
</div>

<script>var timeoutK = "";$("textarea[name='Frage']").keydown(function(){
window.clearTimeout(timeoutK);
var me = $(this);timeoutK  = window.setTimeout(function(){
$.post("s01_ajax.php?edit=loesungen",{"frage":me.val()},function(data){
$("#faq_loesung").html(data);
$("#faq_loesung").addClass('animated flipInY');
var tmp=$("#faq_loesung").html();
if(tmp!=''){$("#faq_start").hide();}else{$("#faq_start").show();}
})
},500);
})
</script>


Der folgende Beispiel-Code finden Sie das gesamte Formular wie es in der Testinstallation zu sehen ist:

<script type="text/javascript">
function chkFormular () {
var r_link='s01.php?shopid=s01&cur=eur&sp=de&ag=1&pp=htm&htmnr=19&htmtitel';document.mail_form.action=r_link;  
if (document.mail_form.Email.value == "") {    
alert("Bitte Ihre E-Mail-Adresse eingeben!");    
document.mail_form.Email.focus();    
return false;  
}  
if (document.mail_form.Email.value.indexOf("@") == -1) {    
alert("Keine E-Mail-Adresse!");    
document.mail_form.Email.focus();    
return false;  
]
</script>

<table border="0" width="100%">
 <tr>
   <td><span class="b">
     Auch persönlich sind wir erreichbar.<br><br>
     Haben Sie Fragen zu unserem Angebot, Sonderwünsche oder benötigen Sie eine Beratung?<br>
     <br>
     Für diese und weitere Angelegenheiten nutzen Sie doch einfach unser Kontaktformular.<br>Wir beantworten Ihr Anliegen - garantiert.</span></td>
   <td><img border="0" src="img/kontakt.jpg" height="120"></td>
 </tr>
</table><br><hr><br>

Schreiben Sie uns:
<table border=0 width="100%" style="margin:0px;"><tr><td width=auto valign=top >

<table border="0" width="100%"><tr><form name="mail_form" method="POST" action="#" onsubmit="return chkFormular()">
<td colspan="2" height="10"></td></tr>
<tr><td>Name:</td><td><input name="Name" type="text" size="25"></td></tr>
<tr><td colspan="2" height="10"></td></tr>
<tr><td>E-Mail-Adresse:</td><td><input name="Email" type="text" size="25"></td></tr>
<tr><td colspan="2" height="10"></td></tr>
<tr><td>Telefonnummer:</td><td><input name="Telefon" type="text" size="25"></td></tr>
<tr><td colspan="2" height="10"></td></tr>
<tr><td valign="top">Ihre Nachricht:</td><td><textarea rows="4" name="Frage" cols="30"></textarea></td></tr>
<tr><td></td><td><input type="submit" name="Action" value="absenden" border="0" style="position:relative;"></td>
</tr></form>
</table>

</td><td valign=top width=20> </td><td valign=top width=400>
<div class=faq_rahmen>
<div id=faq_start class=faq_start><b>Hier zeigen wir Ihnen während des Tippens Ihrer Frage mögliche Lösungsvorschläge an!</b></div>
<div id=faq_loesung></div>
</div>
</td></tr></table>

<script>var timeoutK = "";
$("textarea[name='Frage']").keydown(function(){
window.clearTimeout(timeoutK);
var me = $(this);
timeoutK  = window.setTimeout(function(){
$.post("s01_ajax.php?edit=loesungen",{"frage":me.val()},function(data){
$("#faq_loesung").html(data);
$("#faq_loesung").addClass('animated flipInY');
var tmp=$("#faq_loesung").html();
if(tmp!=''){$("#faq_start").hide();}else{$("#faq_start").show();}
})
},500);
})
</script>


Für andere Sprachen muss im Code die Stelle

$.post("s01_ajax.php?edit=loesungen


erweitert werden in:

$.post("s01_ajax.php?sp=en&edit=loesungen



Möglicher Stepp 2

Es gibt ein paar Ideen, die wir im ersten Stepp dieser Funktion noch nicht umgesetzt haben. Beispielsweise könnte man die Antworten abhängig machen von eingeloggtem Zustand des Kunden. Ist er eingeloggt, könnte man ihm zu den Fragen nach seinen Bestellungen z.B. den Pfad zum Tracking der letzten Bestellungen anzeigen! Sprich indem man Synonyme in die FAQ-Antworten einprogrammiert.

Ebenso könnte man diese erfassten FAQs auch dynamisch in eine eigene FAQ-Seite (per HTML-Inlcude) einbinden. Also wie in diesem Beispiel hier: www.otto.de/shoppages/service/faq

Aktuell gibt es für diese Ideen noch kein Bedarf seitens der Shopbetreiber. Falls Sie Interesse haben, bitte einfach bei uns melden..


Forum-Archiv

Alle Beiträge aus:

2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002,