Tipps und Tricks Archive - Seite 3 von 6 - yalst - Live Support Software | Live Chat Software

Operatoren erfolgsabhängig vergüten

21. April 2017/in Tipps und Tricks /von Markus Jasinski

Grundsätzlich können Chat-Operatoren/-Agenten entweder nach Arbeitszeit oder erfolgsabhängig vergütet werden. Für den erstgenannten Fall stellt Ihnen yalst ab der Business-Edition umfangreiche Statistiken – grafisch und tabellarisch – in der Administration zur Verfügung, aus denen hervorgeht, wann und wie lange ein Operator/Agent am System angemeldet war, wieviel Zeit sie oder er mit Chats oder Pausen verbracht haben uvm.

Heute soll es aber um die erfolgsabhängige Vergütung gehen. Da unsere Software auch zahlreiche Webcontrolling- und Besucheranalyse-Funktionen hat, ist diese in yalst mit Bordmitteln ab der Professional-Edition möglich. Dazu müssen wir alle „Erfolge“ mit Hilfe zusätzlicher Einbindungen in der Webseite erfassen. Was ein solcher Erfolg ist, hängt natürlich individuell vom Betreiber der jeweiligen Website ab. Beispiele wären das Abonnement eines Newsletters, der Download einer Testversion einer Software oder der erfolgreiche Einkauf in einem Online-Shop. Bleiben wir einfach mal beim letzten Beispiel (Online-Shop), zumal sich hier der Erfolg leicht in Euro und Cent messen läßt.

Alles was wir tun müssen, ist auf der letzten Seite des Bestellvorgangs, also nachdem der Kauf abgeschlossen ist, ein paar JavaScript-Variablen zu setzen. Hier ein Beispiel:

<!-- LiveSupport Additional Code - place far forward on your page -
always use HTML code generator to create -->
<script language="JavaScript" type="text/javascript">
var yct_event='Verkauf im Shop';
var yct_ref=2;
var yct_id='calculate';
var yct_comment='Kunde Max Mustermann';
var yct_tan='1';
var yct_volume='327.45';
</script>
<!-- End of LiveSupport Additional Code -->

<!-- LiveSupport Additional Code - place far forward on your page -

always use HTML code generator to create -->

var yct_event='Verkauf im Shop';

var yct_ref=2;

var yct_id='calculate';

var yct_comment='Kunde Max Mustermann';

var yct_tan='1';

var yct_volume='327.45';

</script>

Diesen Codeschnipsel können Sie auch mit Hilfe unseres HTML-Codegenerators erzeugen, den Sie in der Administration unter „Einbindung“ finden. Bitte wählen Sie im Schritt 1 des Codegenerators die Option

„5a – Conversion-Tracking“.

Die verschiedenen Werte werden dann im Schritt 2 interaktiv abgefragt und im Schritt 3 erhalten Sie Ihren individuellen Codeschnipsel. Kurz zur Bedeutung der wichtigsten Variablen (im HTML-Codegenerator werden sie ausführlich beschrieben):

In yct_event steht das Ereignis. Das ist wichtig, damit Sie verschiedene Arten Erfolge in den Statistiken voneinander unterscheiden können.
In yct_comment können Sie einen Kommentar zum Ereignis hinterlegen, bei einem Verkauf z.B. den Namen des Kunden.
Die Variable yct_tan sollte für dieses Ereignis einen eindeutigen Wert erhalten, z.B. eine Bestellungsnummer, damit ein Ereignis beim Neuladen der Seite nicht doppelt erfasst wird.
In yct_volume steht schließlich der Bestellwert in der in yalst eingestellten Währung.

Es macht natürlich bei einigen Variablen wie yct_comment, yct_tan und yct_volume keinen Sinn, feste Werte zuzuweisen. Im Fall einer Online-Bestellung müssen Sie sich die Werte aus Ihrem Shop-System holen und den yalst-Variablen zuweisen. Wie das geht hängt von der verwendeten Shop-Software ab und kann an dieser Stelle nicht individuell erläutert werden. Nehmen wir beispielsweise mal an, der Bestellwert steht in der Shop-Variablen order.volume, der Name des Kunden in order.customer und die Bestellungsnummer in order.id. Der Einbindungscode würde dann wie folgt aussehen:

<!-- LiveSupport Additional Code - place far forward on your page - 
always use HTML code generator to create -->
<script language="JavaScript" type="text/javascript">
var yct_event='Verkauf im Shop';
var yct_ref=2;
var yct_id='calculate';
var yct_comment=order.customer;
var yct_tan=order.id;
var yct_volume=order.volume;
</script>
<!-- End of LiveSupport Additional Code -->

<!-- LiveSupport Additional Code - place far forward on your page -

always use HTML code generator to create -->

var yct_event='Verkauf im Shop';

var yct_ref=2;

var yct_id='calculate';

var yct_comment=order.customer;

var yct_tan=order.id;

var yct_volume=order.volume;

</script>

Ganz wichtig hierbei ist, dass dieser Code vor dem normalen yalst-Einbindungscode steht, da die genannten Variablen von diesem ausgelesen werden. Genauso wichtig ist, dass es sich dabei um eine Einbindung mit Besucher-Monitoring handeln muss.

Alles, was jetzt noch getan werden sollte, ist einen Blick auf die Einstellung „Conversion-Tracking durch Operatoren“ zu werfen. Diese finden Sie in der Administration unter Konfiguration auf der Unterseite „Operatoren“ (ziemlich weit unten). Zu jedem Ereignis/Erfolg wird festgehalten, mit welchem Operator der jeweiliger Besucher evtl. zuvor gechattet hat. Sollten mehrere Chats stattgefunden haben, können Sie dort festlegen, ob der neueste oder der älteste Chat hierzu herangezogen wird.

Die erfolgsabhängige Auswertung finden Sie ebenfalls in der Administration, und zwar unter „Statistiken“ auf der Unterseite „Conversions“ des Abschnitts „Operatoren“. Die Statistik verfügt über eine zusammenfassende Seite mit allen Operatoren und über eine Operator-Detailansicht, zu der Sie gelangen, wenn Sie am rechten Rand einen Operator in der Drop-Down-Box auswählen. Über das Kalender-Widget (ebenfalls am rechten Rand) können Sie den Berichtszeitraum festlegen.

Ganz nebenbei erhalten Sie übrigens auch noch eine allgemeine Verkaufsstatistik, die Sie auf der Unterseite „Conversion-Tracking“ des Abschnitts „E-Commerce“ finden. Sollten Sie die Kampagnen-Funktion von yalst nutzen, wird sogar der Erfolg Ihrer Kampagnen bezüglich der Verkäufe mit ausgewertet!

yalst-Funktionen für schnelle Antwortzeiten

16. Februar 2017/in Tipps und Tricks /von Markus Jasinski

Schnelle Antwortzeiten sind bei Live-Chats aus vielen Gründen wichtig, die anfragenden Besucher müssen nicht lange warten und haben ein positives Service-Erlebnis. Gleichzeitig verkürzt sich die Gesprächsdauer pro Chat und Ihre Operatoren können mehr Gespräche pro Arbeitstag führen. Letztendlich senken Sie dadurch also Ihre Supportkosten.

Das yalst-LiveSupportTool bietet Ihnen bzw. Ihren Operatoren/Agenten viele Funktionen, um dieses Ziel zu erreichen. In diesem Artikel möchten wir Ihnen die wichtigsten vorstellen.

Floskeln und Autofloskeln

Floskeln in yalst sind vorgefertigte Antworten oder Teilantworten des Operators, man könnte sie auch als Textbausteine bezeichnen. Floskeln gibt es auf drei Ebenen, systemweit (diese stehen immer zur Verfügung), abteilungsweit (diese stehen nur zur Verfügung, wenn der Chat in der entsprechenden Abteilung geführt wird) und Operator-spezifisch (diese definiert sich der Operator selbst). Im konkreten Chat werden die Floskeln dann aus allen drei Bereichen – soweit vorhanden – zusammengestellt.

Zur Auswahl der Floskeln gibt es mehrere Möglichkeiten.

Der F-Button links neben der Texteingabe öffnet ein Auswahlmenü unter Berücksichtigung eventueller Floskel-Gruppierungen.

Ein Rechtsklick auf diesen Button öffnet ein übersichtliches Floskel-Auswahlfenster, nützlich wenn Sie sehr viele Textbausteine angelegt haben.

Alternativ können Sie auch den Tab-Button „Floskeln“ im Eingabebereich verwenden.

Schließlich kann seit yalst 9.4 auch mit den Tastenkombinationen Alt-Cursor-links und Alt-Cursor-rechts im Texteingabefeld von Floskel zu Floskel gewechselt werden.

Für eine ganze Reihe Situationen, z.B. am Beginn oder Ende eines Chats, können sogenannte Autofloskeln verwendet werden, die automatisch von der Software eingefügt werden. Floskeln können situationsabhängig Platzhalter enthalten, die automatisch mit aktuellen Inhalten befüllt werden, wie z.B. dem Namen des Besuchers.

Tipp-Vorschau

Sie können yalst so konfigurieren, dass Ihre Operatoren die Texteingaben des Besuchers bereits sieht, bevor der Text abgeschickt wird. Das ermöglicht Ihren Operatoren sich bereits während der Besucher seine Anfrage tippt auf die Antwort vorzubereiten.

Automatische Wortvervollständigung

Mit dieser Funktion werden den Operatoren beim Tippen automatisch passende Wortvervollständigungen vorgeschlagen, zwischen denen mit den Cursortasten navigiert werden kann. Mit der Enter-Taste kann dann einer der Vorschläge ausgewählt und somit in Beitrag eingefügt werden.

Die Funktion ist weitgehend konfigurierbar. Es kann eingestellt werden, ab wieviel getippten Zeichen vorgeschlagen wird und wie lang die vorgeschlagenen Wörter mindestens sein müssen. Weiterhin kann festgelegt werden, ob die Wörter des aktuellen oder der vergangenen Chats in die Vorschläge einbezogen werden sollen.

Ansonsten stammen alle Wortvorschläge aus einem mitgelieferten Wörterbuch, welches der jeweiligen Sprache des Chats entspricht. Die Funktion kann auch komplett pro Operator deaktiviert werden.

Praktische Tastenkombinationen

Im Chat-Eingabefeld des Operators stehen folgende praktische und zeitsparende Tastenkombinationen zur Verfügung:

Alt-E – fügt die E-Mail-Adresse des Operators ein (falls in der Administration festgelegt)
Alt-N – fügt den Chat-Namen des Besuchers ein (praktisch, oder?)
Alt-O – fügt den (Anzeige-)Namen des Operators ein
Alt-U – fügt die URL Ihrer Website ein (falls in der Administration festgelegt)

Auf einem Mac verwenden Sie bitte die Ctrl- statt der Alt-Taste.

Letzten Beitrag zurückholen

Falls sich ein Operator mal vertippt hat und der Beitrag schon abgeschickt wurde, kann sich der betreffende Agent mit der Tastenkombination Alt-Cursor-oben den letzten Beitrag zurück in das Eingabefeld holen, korrigieren und erneut abschicken. Alt-Cursor-oben kann dabei übrigens so lange benutzt werden, bis der allererste Beitrag erreicht ist. Mit Alt-Cursor-unten kann in die andere Richtung navigiert werden.

Beschleunigen Sie Ihre Chats, indem Sie (bzw. Ihre Operatoren) diese Funktionen verinnerlichen und konsequent anwenden!

Integrating the Chat in Native Apps

27. Januar 2017/in Anwendungsbeispiele, Tipps und Tricks /von Matthias Seemann

Overview

It is possible to offer the live chat for the visitor not just on web pages but in native apps as well. Such an app has to embed a WebView for the Chat Single Page App (SPA).

The Chat SPA powers the Chat on Mobile and the Tab Chat Directly on the Page in yalst. Basically it consists first of a customisable query form for collecting data pre-chat and seconds of the actual chat UI.

The Tab Chat Directly on the Page you’ll have most likely already encountered when creating the integration code as Admin as it is the first option there.

When embedding the chat in smartphone apps though, you’ll want to use the Chat on Mobile variant of the Chat SPA. It has the upper toolbar for changing the language and closing the chat and is optimised for touch screen.

Customising the Chat

The layout can be customised in the same ways as the Chat on Mobile by

define colours in the Admin Area,
customise the jQuery Mobile Theme using jQuery Themeroller

The functionality can be changed by injecting JavaScript into the SPA using

native WebView JavaScript bridge (see below), or

a yalst Theme.

<javascripts>
	...
	<javascript location="head" file="mobile/index.php">
		<content>
		<![CDATA[
		... your code here ...
		]]>
		</content>
	</javascript>
	...
</javascripts>

...

<![CDATA[

... your code here ...

]]>

</content>

</javascript>

...

</javascripts>

The Chat SPA offers a JavaScript API for interacting with your injected code.

Responsibilities for the Host App

There is no code generator for host apps as there is for host web pages in the yalst Admin Area.

It is the responsibility of the host app to guide the user towards the chat, e.g. by painting a chat button, detecting taps on the chat button and showing a view with the WebView containing the Chat SPA.

The app has to determine the availability of the service itself. Yalst provides web APIs for this purpose.

Here are some settings for configuring the Chat SPA using url query parameters:

site (required): yalst instance id (e.g. 1-1)
from (essential): text string shown in the incoming chat notification for the agent (could be the name of the host app)
direct(optional, boolean 1/0): skips the query form before chat start
dept (optional): character identifying a yalst department for routing the chat.
chat_id_param (optional): pick up a running chat
session_id_param (optional): pick up a running chat
department_id_param (optional): pick up a running chat

Embedding a WebView with the Chat SPA in a host app it needs not many more lines of code than for integration on a web page:

iOS

There is are a lot of guides and tutorials available for embedding a WKWebView in an iOS app.

The general procedure is given in a few lines of code as found e.g. on Stackoverflow:

WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:theConfiguration];
webView.navigationDelegate = self;
NSURL *nsurl=[NSURL URLWithString:@"https://full_url_to_the_chat_SPA"];
NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurl];
[webView loadRequest:nsrequest];
[self.view addSubview:webView];

WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init];

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:theConfiguration];

webView.navigationDelegate = self;

NSURL *nsurl=[NSURL URLWithString:@"https://full_url_to_the_chat_SPA"];

NSURLRequest *nsrequest=[NSURLRequest requestWithURL:nsurl];

[webView loadRequest:nsrequest];

[self.view addSubview:webView];

As quick demo you can install the WKWebView Test app from the App Store and load a WKWebView with the address of the Chat SPA:

https://<yalst-server>/yalst/mobile/index.php?site<site id>&from=My%20Sample%App

For the JavaScript bridge between the Chat SPA and the host app one can use [WKWebView evaluateJavaScript] and WKUserContentController

Background Execution

Closing the host app has the same effect on a running chat as closing Mobile Safari or hiding the browser tab with the host web page on the desktop: The chat is put into a Sleep Mode indicated with a blue color bar in the agent’s chat window. The next time the app is activated it fetches the messages the agent might have send in the meantime.

In order to notify the user immediately the host app is required to enable Background Fetch Mode or Push Notifications. Background chat updates will be implemented in a later version or yalst.

Android

The procedure is similar to iOS: You’ll have to embed a WebView in your Android app. WebView is updated with Chrome from Android 4.4 on. However transferring files requires Android 5.

The sample app is configured to embed the live support chat for yalst.

The source code of the Android Sample App will be available on Github.

Background Execution

When closing the Android host app the Chat SPA can continue to run in the background to fetch messages from the agent. It however has no means to show a notification to the user. This must be implemented by the native host app.

On the other hand the Chat SPA can be put into Sleep Mode like on iOS. Entering and leaving Sleep Mode is not done automatically – events need to be sent by the host app.

Screenshots

Limitations (Roadmap)

The download of transferred images into the Camera Roll is currently not working on iOS.
The next update of the Android Sample App will resolve these issues:
- The upload of files e.g. from the Photo Gallery
- Download of the chat transcript
- Cache performance

Das WordPress-Plugin für den yalst Live Chat

28. Juli 2015/in Aktuelles, Tipps und Tricks /von Andreas Beckmann

Aus dem Blogsystem WordPress ist in den letzten Jahren ein sehr gutes und stark erweiterbares Content Management System (CMS) geworden. Auch wir haben unsere eigene Webseite in eben diesem System angelegt. Daher war es nur logisch, dass wir einen Schritt weiter gehen und ein Plugin anbieten, welches die Einbindung des yalst-LiveSupportTools in WordPress ohne eigenen Programmieraufwand ermöglicht.

So können Sie jetzt unter:

https://wordpress.org/plugins/yalst-live-chat/

einfach das Plugin downloaden oder direkt in WordPress im Pluginverzeichnis suchen und dann installieren:

yalst Live Chat-Eintrag im WordPress-Plugin-Verzeichnis

Um die große Flexibilität von yalst auf WordPress-Seiten nicht allzu stark zu beschränken, haben wir uns dabei für eine zweigleisige Umsetzung entschieden.

Das Plugin selbst ermöglicht eine Einbindung in die komplette Webseite und integriert den Code in den Footer der WordPress-Seite. Dort kann man sehr gut nur die Webcontrolling-Einbindung ohne Button oder einen Tab/Reiterbutton mit Webcontrolling integrieren, den man überall zeigen möchte:

Einbindungscode im Plugin: Einbindung in die komplette Webseite

Um Buttons im Seitenfluss anzuzeigen, Buttons für spezielle Abteilungen zu integrieren, mehrere Button auf einer Seite zu verwenden oder einfach Zusatzinformationen (z. B. Warenkorbinhalte, Conversions) an yalst zu übergeben usw., kann man die in WordPress allgegenwärtigen Widgets nutzen:

Beschreibung der Widget-Funktionalität im Plugin

Beschreibung der Widget-Funktionalität im WordPress-Plugin

Dieses kann, wie bei WordPress üblich, in beliebige Bereiche von “Display Everywhere” oder in speziellen Footern oder Sidebars integriert werden. Und nicht nur einmal, sondern bis Sie yalst so in die Webseite eingebunden haben, wie Sie es möchten:

yalst Live Chat Widget im WordPress

yalst Live Chat Widget im WordPress-Sitebar

Dadurch wird eine maximale Flexibilität möglich, die vielen anderen Live Chats fehlt, da dort meist nur eine einzige Einbindung generiert wird.

Aber yalst ist eben mehr als “nur” ein Live-Chat, denn erst die Kombination zwischen Datenaufnnahme, Live-Monitor und -Statistiken und den vielfältigen Chatmöglichkeiten eröffnen Ihnen den gewünschten Nutzen – die Verbesserung Ihres Supports, Senkung der Supportkosten trotz mehr Conversions.

Wie bindet man den yalst Live Chat in eine Shopsoftware ein?

4. Juni 2015/in Tipps und Tricks /von Andreas Beckmann

Da es eine Vielzahl an Shop-Systemen auf dem Markt gibt, die alle etwas verschieden sind, beschreiben wir auf dieser Seite die allgemeine Vorgehensweise, um yalst optimal in einen beliebigen Shopsoftware einzubinden.

Wenn Sie nur die Chat-Funktionen des yalst Live Chats nutzen möchten, reicht selbstverständlich die normale Standardeinbindung aus.

Voraussetzung ist natürlich, dass Sie an die Dateien Ihres Shops irgenwie herankommen. Die allermeisten Shopsoftware-Systeme sind Template-basiert, d.h., Funktionalität und Design des Shops sind voneinander getrennt. Für die hier beschriebenen Einbindungen ist es in der Regel ausreichend, die Templates – also die Dateien, die das Design festlegen – anzupassen.

Die hier zusammengestellten Einbindungen bewirken (zusätzlich zu den ohnehin schon standardmäßig vorhandenen Funktionalitäten) im Einzelnen:

Besucher-Monitoring mit Anzeige der Artikelzahl und des Warenwertes im Warenkorb direkt in der Operator-Konsole
Anzeige des Kundennamens direkt im Besucher-Monitor
Anzeige des Warenkorb-Inhalts mit Hilfe der yalst-Funktion „Tracking-Daten“
Erfassung der Verkäufe und Umsätze (Conversion-Tracking)

In den folgenden Beispielen gehen wir davon aus, daß Ihr yalst Live Chat auf der Domain www.example.com installiert ist (muß nicht identisch sein mit der Domain Ihres Online-Shops).

Sie müssen also „www.example.com“ immer durch die tatsächliche Domain ersetzen. Bei unseren Mietlösungen ist diese z.B. „rd.livesupportserver.de“.

Ferner gehört zu jedem yalst-Paket eine sogenannte Site-Nummer, da innerhalb einer yalst-Installation grundsätzlich mehrere Instanzen der Software laufen können. Bei Kauflösungen ist die Site-Nummer in der Regel „1-1“, ansonsten können Sie diese aus Ihrer yalst-Administration entnehmen. Für diese Anleitung nehmen wir als Beispiel 1-1.

Einbindung des Chat-Buttons

Der Chat-Button wird von den meisten Nutzern in der Regel im rechten oder linken Rand der Shop-Fenster plaziert, z.B. in der Nähe der Warenkorbanzeige. Er sollte gut sichtbar im oberen Bereich untergebracht werden.

Der notwendige HTML-Code, um den Button erscheinen zu lassen, sieht so aus:

<script language="JavaScript" type="text/javascript">
  (function()
    {
    var spanID = Math.random().toString();
    document.write("<span id='" + spanID + "' ></span>");
    var anchorElement = document.getElementById(spanID);
    var script = document.createElement("script");
    script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&count=no&y_span_id=" + spanID;
    anchorElement.parentNode.insertBefore(script, anchorElement);
    })();
</script>

(function()

{

var spanID = Math.random().toString();

document.write("<span id='" + spanID + "' ></span>");

var anchorElement = document.getElementById(spanID);

var script = document.createElement("script");

script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&count=no&y_span_id=" + spanID;

anchorElement.parentNode.insertBefore(script, anchorElement);

})();

</script>

Wenn yalst als Seitentitel bei Chat-Anfragen nicht den Dateinamen der jeweiligen Seite, sondern den HTML-Titel anzeigen soll, lautet die Zeile:

<script language="JavaScript" type="text/javascript">
  (function()
    {
    var spanID = Math.random().toString();
    document.write("<span id='" + spanID + "' ></span>");
    var anchorElement = document.getElementById(spanID);
    var script = document.createElement("script");
    script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&count=no&pagetitle=auto&y_span_id=" + spanID;
    anchorElement.parentNode.insertBefore(script, anchorElement);
    })();
</script>

(function()

{

var spanID = Math.random().toString();

document.write("<span id='" + spanID + "' ></span>");

var anchorElement = document.getElementById(spanID);

var script = document.createElement("script");

script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&count=no&pagetitle=auto&y_span_id=" + spanID;

anchorElement.parentNode.insertBefore(script, anchorElement);

})();

</script>

Soll sich das Chat-Fenster in der Zweitsprache (falls konfiguriert) öffnen, lautet der Code:

<script language="JavaScript" type="text/javascript">
  (function()
    {
    var spanID = Math.random().toString();
    document.write("<span id='" + spanID + "' ></span>");
    var anchorElement = document.getElementById(spanID);
    var script = document.createElement("script");
    script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&count=no&lang=2&y_span_id=" + spanID;
    anchorElement.parentNode.insertBefore(script, anchorElement);
    })();
</script>

(function()

{

var spanID = Math.random().toString();

document.write("<span id='" + spanID + "' ></span>");

var anchorElement = document.getElementById(spanID);

var script = document.createElement("script");

script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&count=no&lang=2&y_span_id=" + spanID;

anchorElement.parentNode.insertBefore(script, anchorElement);

})();

</script>

Besucher- und Warenkorb-Monitoring

Die folgenden Einbindungen sollten alle so weit unten auf der Seite plaziert werden wie irgendwie möglich – idealerweise unmittelbar vor dem </body>-Tag. Sie sorgen für das Warenkorb- und Besucher-Monitoring und sollten auf jeder Seite vorhanden sein.

Beginnen wir mit der Anzahl der Artikel im Korb und dem Warenkorbwert. Diese Einbindung steht Ihnen ab der Business-Edition zur Verfügung. Der Code sieht so aus:

<script language="JavaScript" type="text/javascript">
var y_cartitems='Artikelzahl';
var y_cartvalue='Warenkorbwert';
</script>

var y_cartitems='Artikelzahl';

var y_cartvalue='Warenkorbwert';

</script>

Für Artikelzahl und Warenkorbwert müssen Sie die entsprechenden Shop-Variablen an dieser Stelle ausgeben. Welche das sind und wie man die ausgibt, entnehmen Sie bitte der Dokumentation Ihres Shops. Auch der jeweilige Produktsupport sollte Ihnen diesbezüglich weiterhelfen können. Verweisen Sie diesen ggf. auf diese Anleitung.

Komplizierter ist das Auslesen des Warenkorbinhalts, da der Umfang variabel ist. Die Übergabe an yalst muss daher in einer Art Schleife erfolgen. Diese kann über eine Server-seitige Programmiersprache wie PHP, eine Template-Sprache wie Smarty oder auch über JavaScript realisiert werden. Diese Einbindung steht Ihnen ab der Professional-Edition zur Verfügung. Wir realisieren diese Funktionalität hier einmal per JavaScript:

<script language="JavaScript" type="text/javascript">
if (typeof y_track=='undefined')
  {y_track=new Array();}
y_track[0]=new Array();
y_track[0][0]="basket*";
y_track[0][1]="-";
for (var i=1; i<=Artikelzahl; i++)
  {
  y_track[i]=new Array();
  y_track[i][0]="basket_Artikelnummer";
  y_track[i][1]="Artikelbeschreibung/-anzahl";
  }
</script>

if (typeof y_track=='undefined')

{y_track=new Array();}

y_track[0]=new Array();

y_track[0][0]="basket*";

y_track[0][1]="-";

for (var i=1; i<=Artikelzahl; i++)

{

y_track[i]=new Array();

y_track[i][0]="basket_Artikelnummer";

y_track[i][1]="Artikelbeschreibung/-anzahl";

}

</script>

Die Werte Artikelzahl, Artikelnummer und Artikelbeschreibung/-anzahl müssen Sie wieder aus Ihren Shop-Variablen gewinnen. Im Falle von Artikelnummer und Artikelbeschreibung/-anzahl ist bei jedem Schleifendurchlauf ein anderer Wert zu übergeben.

Der Kundenname lässt sich relativ einfach als Bemerkung an yalst übergeben. Er wird erneut aus einer Shop-Variablen bezogen. Das Ausrufezeichen sorgt dafür, dass eine evtl. bereits vorhandene Bemerkung nicht überschrieben wird (z. B. durch eine leere Zeichenkette, wenn der Kunden sich noch nicht angemeldet hat) Wir machen das Ganze wieder in JavaScript:

<script language="JavaScript" type="text/javascript">
y_remark="!Kundenname";
</script>

y_remark="!Kundenname";

</script>

Abschließend noch die yalst-Einbindung für das Besucher-Monitoring. Diese verarbeitet auch die ganzen anderen zuvor gewonnenen Daten und muss daher auf jeden Fall unterhalb des o. g. Codes stehen:

<script language="JavaScript" type="text/javascript">
  (function()
    {
    var spanID = Math.random().toString();
    document.write("<span id='" + spanID + "' ></span>");
    var anchorElement = document.getElementById(spanID);
    var script = document.createElement("script");
    script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&button=no&y_span_id=" + spanID;
    anchorElement.parentNode.insertBefore(script, anchorElement);
    })();
</script>

(function()

{

var spanID = Math.random().toString();

document.write("<span id='" + spanID + "' ></span>");

var anchorElement = document.getElementById(spanID);

var script = document.createElement("script");

script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&button=no&y_span_id=" + spanID;

anchorElement.parentNode.insertBefore(script, anchorElement);

})();

</script>

Wenn im Besucher-Monitor (und den Statistiken) statt der Datei-Namen (wie z.B. index.php oder shop.php) die HTML-Seitentitel angezeigt werden sollen, muß dieser Code so aussehen:

<script language="JavaScript" type="text/javascript">
  (function()
    {
    var spanID = Math.random().toString();
    document.write("<span id='" + spanID + "' ></span>");
    var anchorElement = document.getElementById(spanID);
    var script = document.createElement("script");
    script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&button=no&pagetitle=auto&y_span_id=" + spanID;
    anchorElement.parentNode.insertBefore(script, anchorElement);
    })();
</script>

(function()

{

var spanID = Math.random().toString();

document.write("<span id='" + spanID + "' ></span>");

var anchorElement = document.getElementById(spanID);

var script = document.createElement("script");

script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&button=no&pagetitle=auto&y_span_id=" + spanID;

anchorElement.parentNode.insertBefore(script, anchorElement);

})();

</script>

Da die in diesem Abschnitt genannten Einbindungen alle zusammengehören (wie gesagt am besten unmittelbar vor </body> plazieren), fassen wir sie an dieser Stelle nochmal zusammen:

<script language="JavaScript" type="text/javascript">
var y_cartitems='Artikelzahl';
var y_cartvalue='Warenkorbwert';
</script>

<script language="JavaScript">
if (typeof y_track=='undefined')
  {y_track=new Array();}
y_track[0]=new Array();
y_track[0][0]="basket*";
y_track[0][1]="-";
for (var i=1; i<=Artikelzahl; i++)
  {
  y_track[i]=new Array();
  y_track[i][0]="basket_Artikelnummer";
  y_track[i][1]="Artikelbeschreibung/-anzahl";
  }
y_remark="!Kundenname";
</script>

<script language="JavaScript">
  (function()
    {
    var spanID = Math.random().toString();
    document.write("<span id='" + spanID + "' ></span>");
    var anchorElement = document.getElementById(spanID);
    var script = document.createElement("script");
    script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&button=no&y_span_id=" + spanID;
    anchorElement.parentNode.insertBefore(script, anchorElement);
    })();
</script>

var y_cartitems='Artikelzahl';

var y_cartvalue='Warenkorbwert';

</script>

if (typeof y_track=='undefined')

{y_track=new Array();}

y_track[0]=new Array();

y_track[0][0]="basket*";

y_track[0][1]="-";

for (var i=1; i<=Artikelzahl; i++)

{

y_track[i]=new Array();

y_track[i][0]="basket_Artikelnummer";

y_track[i][1]="Artikelbeschreibung/-anzahl";

}

y_remark="!Kundenname";

</script>

(function()

{

var spanID = Math.random().toString();

document.write("<span id='" + spanID + "' ></span>");

var anchorElement = document.getElementById(spanID);

var script = document.createElement("script");

script.src = "http://www.example.com/yalst/yalst.js.php?site=1-1&button=no&y_span_id=" + spanID;

anchorElement.parentNode.insertBefore(script, anchorElement);

})();

</script>

Conversion-Tracking

Die folgenden beiden Einbindungen kommen ausschließlich auf die Bestellabschlußseite, also wenn ein Einkaufsvorgang beendet ist.

Sie müssen oberhalb der Besucher-Monitoring-Einbindung plaziert werden. Der erste Codeschnipsel schließt das Warenkorb-Monitoring ab (ab Business-Edition):

<script language="JavaScript" type="text/javascript">
y_cartcomplete=true;
</script>

y_cartcomplete=true;

</script>

Nun folgt das eigentliche Conversion-Tracking (ab Professional-Edition):

<script language="JavaScript" type="text/javascript">
var yct_event='Verkauf im Shop';
var yct_ref=3;
var yct_id='calculate';
var yct_comment='Kundenname';
var yct_volume='Warenkorbwert';
</script>

var yct_event='Verkauf im Shop';

var yct_ref=3;

var yct_id='calculate';

var yct_comment='Kundenname';

var yct_volume='Warenkorbwert';

</script>

Warenkorbwert und Kundenname sind wie immer aus dem Shop-System zu entnehmen.

Hinweis für https-Seiten

Wenn es in Ihrem Shop-Seiten gibt, die über SSL-Verschlüsselung abgerufen werden (https-Seiten), sollten Sie den yalst Live Chat mit SSL-Unterstützung verwenden, damit es keine Sicherheitswarnungen in den Webbrowsern der Besucher gibt.

Diese ist ab der Basic-Edition verfügbar, bei der Kauflösung kann die SSL-Unterstützung bei der Installation (oder auch nachträglich, s. Installationsanleitung) konfiguriert werden (Domain, die per https erreichbar ist, oder SSL-Proxy erforderlich). Zur Einbindung können Sie in obenstehenden HTML-Codes alle „http://“ durch „https://“ ersetzen (bei Verwendung eines sogenannten SSL-Proxys muß die entsprechende Proxy-URL angegeben werden).

Was sind Themes im yalst Live Chat und wozu brauche ich sie?

27. Mai 2015/in Tipps und Tricks /von Andreas Beckmann

Ein Theme für das yalst-LiveSupportTool ist eine Textdatei im XML-Format, in der das Aussehen der Fenster auf der Besucherseitebeliebig angepasst und verändert werden kann.
Dieses erfolgt dabei für jeden Zugang/Lizenz separat, so dass bei einer Mehrlizenzinstallation bzw. auch bei der von Visisoft gehosteten Lösung eine Änderung des Designs, der graphischen Elemente, der Funktionalitäten, der Textausgaben möglich wird.
Dabei überschreiben die Einstellungen in den Themes alle anderen Einstellungen. Das betrifft sowohl die Installationseinstellungen, die der webbasierten Konfiguration als auch die im yalst-LiveSupportTool fest integrierten Eigenschaften.

How to Customise the Visual Appearance of Live Chat on Mobile Devices in yalst 9.3 and later

30. April 2015/in Tipps und Tricks /von Matthias Seemann

On multi-touch-enabled mobile devices our live chat product yalst provides a mobile-friendly user interface (GUI) for the chat. The visual appearance of the chat user interface can be customised by different possibilities:

1. Defining individual colours in the yalst Administration in „Settings“ (Einstellungen) in the „Design“ section will affect the „normal“ desktop client as well as the mobile client:

Colours

2. Uploading two images in the yalst Administration in „Settings“ (Einstellungen) in the „Design“ section in the yalst Administration to appear on top and bottom of the mobile chat (start and department page):

3. For more complex and individual changes you may use the ThemeRoller WYSIWYG editor to modify a theme or create a new one upload the stylesheet in the yalst Administration in „Settings“ (Einstellungen) in the „CSS and Themes“ section:

Because (3) is a little more complex than the other two more straight-forward possibilities the process is explained in detail as follows.

Starting from yalst Version 9.3 the download version of yalst as well as the hosted version can have individual themes for the mobile yalst chat.

jquery_mobile Except for the speech balloons the mobile-friendly GUI is created by the jQueryMobile framework which provides a useful ThemeRoller tool for tweaking the visual appearance. To personalise the chat on mobile devices you’ll have to change the default theme. A theme defines the complete layout, styles and colours of the user interface of an application. A theme consists of global geometry and style settings and a bunch of different Color Swatches identified by letters from A-Z.

Yalst initially comes with a Default Theme of jQueryMobile which has seven colour swatches denoted by letters A-G corresponding to the descending visual priority, which can be downloaded here:

jquery.mobile.theme-1.4.5.css

The mobile-friendly chat GUI of yalst uses predominantly the Swatch A of baseline level priority.

The mobile chat HTML code which defines the swatch for each DOM element is currently not open for customisation. This means that you can not change the swatch of an individual element but just the swatch itself and all corresponding elements together. The mapping between elements and swatches is shown in the next screenshots:

allswatches

As you may see in the screenshots the:

Swatch A is for the main background, select and input fields, radio and check boxes incl. borders, hover and highlight styles.

Swatch B is for dialogue headers and primary buttons incl. borders, hover and highlight styles.

Swatch C is for the select and input fields, radio and check boxes in an error case incl. borders, hover and highlight styles.

Swatch D is for the „Start Chat“ button incl. borders, hover and highlight styles.

Swatch E is for the main header and the correspondings navigation buttons incl. icon-colors, borders, hover and highlight styles.

Swatch F is for the „Not available“ (Nicht verfügbar) box header incl. borders, hover and highlight styles.

Swatch G is for the actual „Send“ chat button incl. borders, hover and highlight styles.

To customise your theme or our standard theme

Open the ThemeRoller application in your browser and get rolling.
Switch to the appropriate jQueryMobile version (currently 1.4.5 for yalst 9.3)
Copy the theme (just the uncompressed “theme” stylesheet file) into ThemeRoller by using the Import button.
If you have created a custom theme before you should upload that theme css file. Otherwise you’ll need the uncompressed css file (e.g. jquery.mobile.theme-1.4.5.css) with the Default Theme which is used by yalst as default. After upload the editor should display the seven swatches of your theme (partly displayed in this screenshot)
Adapt the theme geometry and the colour swatches A-G according to your needs.
Download the new theme as zip archive and unpack. Enter e.g. “jquery.mobile.theme-1.4.5″ as theme name in the download dialogue.
Upload “jquery.mobile.theme-1.4.5.css″ in the yalst Administration in „Settings“ (Einstellungen) in the „CSS and Themes“ section:
Done!

Configure RequireJS to load the yalst live chat JavaScript Api

6. November 2013/in Tipps und Tricks /von Matthias Seemann

TL;DR

For loading outdated versions of the Visitor Chat JavaScript Api ensure the release version of RequireJS does finish loading it’s data-main script before fetching the Visitor Api.

Update – this post’s solution is now obsolete (1. Aug. 2014)

The co-existence problems of the two RequireJS libraries have been resolved with the version 2.1 of the VisitorAPI. The VisitorAPI library is distributed from now on as a single JavaScript file too. That source file is AMD loader compatible. Thus the VisitorAPI v. 2.1 no longer introduces global variables in the JavaScript context.

The whole loading code condenses down to:

requirejs.config({
    paths: {
            /// load the Visitor API from the module named "LiveSupport"
            LiveSupport: '//YALST_PRODUCT_SERVER/YALST_DIR/visitor_api/v2.1/LiveSupport.min',

            /// or alternatively load the anonymous module
            yalstAPI: '//YALST_PRODUCT_SERVER/YALST_DIR/visitor_api/v2.1/LiveSupportAnonymous.min'
        }
    }
);

require(["LiveSupport"], function(LiveSupportLibrary)
    {
        LiveSupportLibrary.require(["api/VisitorAPI"], function(api)
            {
                // use the VisitorAPI provided in the api argument
            }
        );
    }
);

requirejs.config({

paths: {

/// load the Visitor API from the module named "LiveSupport"

LiveSupport: '//YALST_PRODUCT_SERVER/YALST_DIR/visitor_api/v2.1/LiveSupport.min',

/// or alternatively load the anonymous module

yalstAPI: '//YALST_PRODUCT_SERVER/YALST_DIR/visitor_api/v2.1/LiveSupportAnonymous.min'

}

);

require(["LiveSupport"], function(LiveSupportLibrary)

{

LiveSupportLibrary.require(["api/VisitorAPI"], function(api)

{

// use the VisitorAPI provided in the api argument

}

);

}

);

The details are discussed in this tutorial.

The Original Problem

The RequireJS library adds support for Javascript modules which is missing in the current webbrowser implementations.
The yalst Visitor Api uses a renamed RequireJS (version 2.1.9 at the time of writing) for code organisation and loading, and so may the client pages themselves.
However since RequireJS does not provide a noConflict() method both versions can interfere on the page resulting in Javascript errors.

RequireJS in the Visitor Api

The Visitor Chat JavaScript Api provides the namespace LiveSupport which

under the namespace LiveSupport.VisitorAPI contains the documented public methods and
under the root contains it’s own version of RequireJS.

Thus in addition to the documented use these methods are available in the Api too:

LiveSupport.define()
LiveSupport.require()
LiveSupport.requirejs()

LiveSupport.define()

LiveSupport.require()

LiveSupport.requirejs()

The api is put in this namespace by the RequireJS optimiser r.js using a build.js file like this:

({
	appDir: ".",
	baseUrl: ".",
	paths: {
		requireLib: "vendor/require"  // path to vanilla RequireJS 2.1.9
	},
	namespace: "LiveSupport",
	modules: [
		{
			name: "LiveSupport",
			include: ['requireLib'],
			create: true
		}
	]
})

({

appDir: ".",

baseUrl: ".",

paths: {

requireLib: "vendor/require" // path to vanilla RequireJS 2.1.9

namespace: "LiveSupport",

modules: [

{

name: "LiveSupport",

include: ['requireLib'],

create: true

}

]

})

The Solution

The client page can use it’s own (non-namespaced) version of RequireJS, given it completes loading the data-main script before the Visitor Api’s namespaced version.

An Example

The example page index-sync.html uses RequireJS in require.min.js with the data-main script main.js to load jQuery, underscore and Lo-Dash.
In this example the <script> tag for the Visitor Api is created „by hand“ [1] in a function called from the data-main script main.js. This tag loads the Visitor Api’s own namespaced RequireJS in LiveSupport.js with the data-main script LiveSupportMain.js which in turn loads the actual api source files.
Among the api files is yet an own version of underscore which by using _.noConflict() is guaranteed to be free of side effects for the client page.

The directory structure and the network activity log of a web page containing both the vanilla version of RequireJS and the namespaced version of the Visitor Api is shown here:
RequireJS NoConflict Loading NetworkLog
Here is the code to accomplish sequential loading of the libraries:

//index-sync.html
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js" data-main="main.js"></script>
<script>// <![CDATA[
function onDataMainScriptLoaded()
{
	/// the page's own RequireJS library is now loaded
	if (typeof LiveSupport == "undefined"){
		LiveSupport = {};
	}
	if (typeof LiveSupport.VisitorAPI == "undefined"){
		LiveSupport.VisitorAPI = {};
	}
	if (typeof LiveSupport.VisitorAPI._methodQueue == "undefined"){
		LiveSupport.VisitorAPI._methodQueue = [];
	}
	LiveSupport.VisitorAPI.invoke = function(method, parameterArray, callback){
		if (typeof method != "string"){
			if (typeof callback == "function"){
				callback(new Error("invalid argument: 1 must be string"));
			}
			return;
		}
		LiveSupport.VisitorAPI._methodQueue.push({
			method: method
			, parameters: parameterArray
			, callback: callback
		});
	};
	var YALST_INSTALLATION_URL = "//YourYalstDomain/YourYalstDirectory/";
	/// if using loadScript.js
	//loadScript(YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupport.js"
	//	, {"data-main" : YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupportMain"}
	//);
	/// "by hand" otherwise
	var scripts = document.getElementsByTagName('script');
	var anchorElement = scripts[scripts.length - 1];
	var script = document.createElement("script");
	script.src = YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupport.js";
	script.setAttribute("data-main"
		, YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupportMain");
	anchorElement.parentNode.insertBefore(script, anchorElement);
}
// ]]></script>

//index-sync.html

function onDataMainScriptLoaded()

{

/// the page's own RequireJS library is now loaded

if (typeof LiveSupport == "undefined"){

LiveSupport = {};

}

if (typeof LiveSupport.VisitorAPI == "undefined"){

LiveSupport.VisitorAPI = {};

}

if (typeof LiveSupport.VisitorAPI._methodQueue == "undefined"){

LiveSupport.VisitorAPI._methodQueue = [];

}

LiveSupport.VisitorAPI.invoke = function(method, parameterArray, callback){

if (typeof method != "string"){

if (typeof callback == "function"){

callback(new Error("invalid argument: 1 must be string"));

}

return;

}

LiveSupport.VisitorAPI._methodQueue.push({

method: method

, parameters: parameterArray

, callback: callback

});

};

var YALST_INSTALLATION_URL = "//YourYalstDomain/YourYalstDirectory/";

/// if using loadScript.js

//loadScript(YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupport.js"

// , {"data-main" : YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupportMain"}

//);

/// "by hand" otherwise

var scripts = document.getElementsByTagName('script');

var anchorElement = scripts[scripts.length - 1];

var script = document.createElement("script");

script.src = YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupport.js";

script.setAttribute("data-main"

, YALST_INSTALLATION_URL + "visitor_api/v2/built/LiveSupportMain");

anchorElement.parentNode.insertBefore(script, anchorElement);

}

// ]]></script>

//main.js
requirejs.config({
	baseUrl: 'lib',
	paths: {
		app: '../app',
		jquery: 'http://code.jquery.com/jquery-1.10.2',
		underscore: 'underscore'
	},
	shim: {
		underscore: {
			exports: '_'
		}
	}
});
// Start the main app logic.
requirejs(['jquery', 'underscore'],
	function($, _)
	{
		$.noConflict();
		_.noConflict();
		// see to load the Visitor Api
		window.onDataMainScriptLoaded();

		jQuery(window.onReady);
	}
);

//main.js

requirejs.config({

baseUrl: 'lib',

paths: {

app: '../app',

jquery: 'http://code.jquery.com/jquery-1.10.2',

underscore: 'underscore'

shim: {

underscore: {

exports: '_'

}

});

// Start the main app logic.

requirejs(['jquery', 'underscore'],

function($, _)

{

$.noConflict();

_.noConflict();

// see to load the Visitor Api

window.onDataMainScriptLoaded();

jQuery(window.onReady);

}

);

//LiveSupportMain.js
LiveSupport.requirejs.config({
	//skipDataMain: true,
	waitSeconds: 15,
	paths: {
		underscore: 'vendor/underscore'
	},
	shim: {
		underscore: {
			exports: '_'
		}
	}
});
LiveSupport.require(['underscore'], function(_)
	{
		_.noConflict();
	}
);

/// Load the Api into the root object LiveSupport ///
LiveSupport.define(['api/VisitorAPI'], function(VisitorApi)
	{
		/// initialize the API
…

//LiveSupportMain.js

LiveSupport.requirejs.config({

//skipDataMain: true,

waitSeconds: 15,

paths: {

underscore: 'vendor/underscore'

shim: {

underscore: {

exports: '_'

}

});

LiveSupport.require(['underscore'], function(_)

{

_.noConflict();

}

);

/// Load the Api into the root object LiveSupport ///

LiveSupport.define(['api/VisitorAPI'], function(VisitorApi)

{

/// initialize the API

…

[1] To define the order in which the libraries are fetched by the browser loadScript.js could be used for dynamic injection of <script> tags into the DOM and handling of the load and readystatechange events.

yalst auf mehreren Websites nutzen

12. Februar 2013/in Tipps und Tricks /von Markus Jasinski

Wir werden häufiger gefragt, ob es möglich ist, yalst auf mehreren Websites einzusetzen. Daher möchten wir dieses Thema heute einmal ausführlicher hier im Blog beleuchten.

Die Frage hat lizenzrechtliche, organisatorische und technische Aspekte. Von der Lizenzseite betrachtet benötigen Sie für jeden in sich geschlossenen Internetauftritt jeweils eine yalst-Lizenz (oder technisch gesprochen eine yalst-Site). Falls Sie also unter shop1.example.com einen Store für Autoersatzteile und unter shop2.example.com einen Blumenversand betreiben, brauchen Sie zwei Lizenzen, ganz egal ob bei Kauf- oder Mietlösung (die Kauflösung kann in dieser Hinsicht die günstigere Variante sein, da Zusatzlizenzen hier 50% des Erstlizenzpreises kosten). Haben Sie hingegen unter www.example.com Ihre Startseite, unter shop.example.com Ihren Online-Shop und unter blog.example.com Ihr Blog – immer jeweils zum gleichen Thema – ist eine yalst-Lizenz ausreichend. Auch für die englische Version Ihrer deutschsprachigen Website brauchen Sie keine Zusatzlizenz, sofern die Seiten thematisch identisch sind. Falls Sie sich nicht sicher, ob Sie für Ihr Projekt mit einer Lizenz auskommen, können Sie jederzeit gerne bei uns nachfragen, z.B. via Live-Chat. Ob Sie – im Falle mehrerer Websites – Ihre Lizenzen auch alle nutzen oder überall ein und dasselbe yalst einbinden, bleibt Ihnen überlassen. Wichtig ist nur, dass Sie über ausreichend viele Lizenzen verfügen.

Nun zu den organisatorischen und technischen Aspekten. Pro yalst-Lizenz/Site verfügen Sie u.a. über individuelle

(Design-)Einstellungen
Chat-Historien
Statistiken
Operatoren (Online-Berater)

Wenn Sie also ein- und dieselbe yalst-Site in verschiedene Websites einbinden, hat der Chat überall das gleiche Grunddesign und die erfassten Statistiken stellen ein Mischmasch Ihrer Websites dar. Falls die Einzelseiten keine eindeutigen Bezeichnungen haben, ist unter Umständen nicht einmal klar, von welcher Website ein eingehender Chat überhaupt kommt. Die einzige organisatorische Möglichkeit, hier Unterscheidungen vorzunehmen, sind Abteilungen, welche ab der Business-Edition genutzt werden können. Diese bieten Ihnen z.B. die Option festzulegen, dass in yalst Website A Abteilung A und Website B Abteilung B ist. Im Einbindungscode der betreffenden Webseite schlägt sich dies im Zusatzparameter &dept=A bzw. dept=B nieder. Dadurch erreichen Sie folgendes:

Sie können pro Operator festlegen, ob dieser zu Abteilung A, B oder beiden gehört. Über Chats von Website A werden nur Operatoren aus Abteilung A oder beiden alarmiert.
Sie können sich die Chat-Historien nur für eine bestimmte Abteilung ansehen.
In einigen Statistiken (z.B. Chat-Statistiken) ist ebenfalls eine Aufschlüsselung nach Abteilungen möglich.
Jede Abteilung kann ein eigenes Logo für den Kopfbereich der Chat-Fenster haben sowie eigene Chat-Buttons und eigene Floskeln.

„Sauberer“ ist jedoch die Nutzung einer separaten Lizenz, da hier wirklich alle Daten und Einstellungen strikt voneinander getrennt sind. Der einzige Nachteil dieser Variante ist, dass Operatoren, die für mehrere Websites die Online-Beratung übernehmen, mehrere Operator-Konsolen geöffnet haben müssen. Da unsere Operator-Konsolen jedoch sehr klein sind (450 x 600 Pixel), können Sie diese bequem nebeneinander auf Ihren Bildschirm legen.

Operator-Konsole

Operator-Konsole

Falls noch irgendwelche Fragen zum Thema yalst auf mehreren Websites offen geblieben sein sollten, zögern Sie bitte nicht, uns zu kontaktieren.

New JavaScript Visitor Api for Chat Events and Actions

8. Februar 2013/in Tipps und Tricks /von Matthias Seemann

The JavaScript Visitor Api for Chat provides a flexible way of integrating pre-chat actions and events; as well as visitor tracking on web pages. E.g. examining the support availability, tracking chat progress and painting click-to-chat buttons are highly customisable.

Floskeln und Autofloskeln

Tipp-Vorschau

Automatische Wortvervollständigung

Praktische Tastenkombinationen

Letzten Beitrag zurückholen

Overview

Customising the Chat

Responsibilities for the Host App

iOS

Background Execution

Android

Background Execution

Screenshots

Limitations (Roadmap)

Einbindung des Chat-Buttons

Besucher- und Warenkorb-Monitoring

Conversion-Tracking

Hinweis für https-Seiten

TL;DR

Update – this post’s solution is now obsolete (1. Aug. 2014)

The Original Problem

RequireJS in the Visitor Api

The Solution

An Example

SITEMAP

Schlagwörter

Kategorien

Aktuelles

Aktuelle Version

Aktueller Status

Links für unsere Kunden

Business Hours