Tipps und Tricks Archive - yalst - Live Support | Live Chat | Live Help

Das WordPress-Plugin für den yalst Live Chat

28. July 2015/in Aktuelles, Tipps und Tricks /by 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. June 2015/in Tipps und Tricks /by 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. May 2015/in Tipps und Tricks /by 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 /by 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 /by 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. February 2013/in Tipps und Tricks /by 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. February 2013/in Tipps und Tricks /by 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.

yalst 9.0 im Detail (Teil 1): Einbindungen

2. May 2012/in Tipps und Tricks /by Markus Jasinski

Dieser Artikel wendet sich an alle Nutzer von yalst 9.0, die unsere Software bereits in einer früheren Version genutzt haben. Mit yalst 9.0 haben wir zum ersten Mal seit Erscheinen der Software im Jahre 2003 die Einbindungscodes (also der HTML-Code, der in Ihre Webseite integriert wird und z.B. für die Anzeige des Chat-Buttons zuständig ist) grundsätzlich geändert. Bisher konnte es nämlich passieren, dass beim Ausfall oder Überlastung des Livesupport-Servers der Seitenaufbau der einbindenden Webseite verzögert wird.

Dieses ist nun Geschichte. Die neue Einbindung erfolgt “asynchron”, d.h., der Ladevorgang Ihrer Webseite wird nicht negativ beeinflusst. Die Einbindungscodes sind dadurch ein wenig länger als vorher, hier ein Beispiel:

<!– LiveSupport Integration Code – always use HTML code generator to create –>
<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://rd.livesupportserver.de/yalst-dev/yalst.js.php?site=40000-1&y_span_id=” + spanID;
anchorElement.parentNode.insertBefore(script, anchorElement);
})();
–>
</script>
<!– End of LiveSupport Integration Code –>

Bei einigen wenigen Einbindungsarten wie Conversion-Tracking oder Tracking-Daten werden nun statt eines Einbindungscodes direkt entsprechende JavaScript-Variablen gesetzt. Dies ist erforderlich, da bei asynchronen Einbindungen die korrekte Abfolge der einzelnen Einbindungen nicht sichergestellt ist.

Wie bisher auch können Sie alle Einbindungscodes über unseren HTML-Codegenerator Ihres yalst-Kundenbereichs interaktiv erzeugen. Der HTML-Codegenerator gibt ausschließlich die neuen Codes aus.

HTML-Codegenerator

Selbstverständlich unterstützt yalst nach wie vor auch die klassischen Einbindungscodes, damit Sie yalst 9.0 ohne Änderungen an Ihrer Website einsetzen können. Wir empfehlen Ihnen jedoch aufgrund der Vorteile der neuen Codes, die Einbindungen in Ihrer Webseite entsprechend zu ändern. Bitte kontaktieren Sie unseren Support, falls Sie Fragen zum Thema Einbindung haben.

Kauflösung: FAQs beim Serverwechsel

23. August 2011/in Tipps und Tricks /by Markus Jasinski

Wer yalst als Kauflösung betreibt, also die Skripte auf seinen eigenem System – sei es ein Webhosting-Paket oder ein eigener Server – hostet, steht ggf. mal vor dem Problem, dass ein Providerwechsel oder der Umzug auf einen besseren Server ins Haus steht. Was bedeutet das für die yalst-Installation? Dieser Artikel, den wir bei neuen Informationen zu diesem Thema erweitern werden, soll die am häufigsten gestellten Fragen hierzu beantworten (aktueller Stand: August 2011).

Für weitergehende Informationen wenden Sie sich bitte an unseren Support. Bitte beachten Sie, dass tiefergehende Support-Anliegen im Bereich Installation, insbesondere wenn sie sich nicht auf die Erstinstallation beziehen, ggf. kostenpflichtig sein können.

yalst-Umzug

Muss ich bei der Auswahl des neuen Webspaces bzw. des neuen Servers etwas beachten?
Ja! Achten Sie bitte unbedingt darauf, dass die yalst-Systemvoraussetzungen auch auf dem neuen System erfüllt sind. Das wird häufig vergessen, weil viele Nutzer in erster Linie ihre Homepage vor Augen haben. Wenn Sie keine Neuinstallation vornehmen, sondern Ihre alte Installation herüberkopieren (siehe nächste Frage), findet keine automatische Überprüfung der Systemvoraussetzungen statt. Sie können z.B. unsere yalst-Checker (s.u. auf der Seite) verwenden, um die Systemvoraussetzungen vorab zu klären.

Muss ich eine Neuinstallation von yalst auf dem neuen System vornehmen?
In den meisten Fällen ist dies nicht erforderlich. Kopieren Sie einfach das yalst-Verzeichnis auf Ihr neues System. Zusätzlich muss die yalst-Datenbank ebenfalls kopiert werden (je nach vorhandenen Möglichkeiten entweder durch Kopieren der Dateien oder über Ex- und Import. Die neuen Datenbankzugangsdaten tragen Sie bitte in der Textdatei yalst/data/yalst.ini ein.

Brauche ich einen neuen Lizenz-Key?
Ja. Sobald sich IP-Adresse, Datenbankname- und/oder -host ändern, benötigen Sie einen neuen Lizenz-Key. Diesen können Sie selber über unseren Kundenbereich erzeugen und herunterladen. Zuvor aktualisieren Sie dort bitte Ihre Lizenzdaten gemäß den Gegebenheiten auf Ihrem neuen Server. Den neuen Lizenz-Key können Sie über yalst-Setup (yalst/setup) webbasiert in Ihre Installation einspielen.

Was passiert, wenn sich durch den Umzug auch die Domain ändert?
In diesem Fall sind weitere Dinge zu beachten. Die neue Domain muss in die Textdatei yalst/data/yalst.ini (domain = …) eingetragen werden. Zusätzlich müssen Sie alle Einstellungen ändern, in denen die alte Domain verwendet wird. Das können u.a. Chat-Buttons, Logos oder Sound-Einstellungen sein.

Mit Ihren Besuchern per Du

7. July 2011/in Tipps und Tricks /by Markus Jasinski

Ikea und Apple machen es vor und sprechen ihre Besucher (nicht nur) auf den Webseiten mit “Du” an. Ziel dabei ist u.a., Nähe und Vertrautheit zu den Kunden herzustellen. Wenn Sie eine Community-Site oder ein soziales Netzwerk betreiben, ist das “Du” auf der Homepage sowieso gang und gäbe.

Können Sie auf einer solchen Website Website yalst einsetzen? Ja! Mit nur einer Einstellung im Administrationsbereich – unter Konfiguration > Einstellungen > Sonstiges – stellen Sie alle Fenster und Dialoge (bis auf Texte und Floskeln, die Sie selber konfiguriert haben) auf “Du” um:

Besucher-Anrede

Nach dem Speichern der Einstellungen stehen Ihnen alle Fenster auf Besucher-Seite mit der geänderten Anredeform zur Verfügung:

Chat-Startfenster

Chat-Startfenster

Kontaktformular

Kontaktformular

Das WordPress-Plugin für den yalst Live Chat

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

Einbindung des Chat-Buttons

Besucher- und Warenkorb-Monitoring

Conversion-Tracking

Hinweis für https-Seiten

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

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

Configure RequireJS to load the yalst live chat JavaScript Api

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

yalst auf mehreren Websites nutzen

New JavaScript Visitor Api for Chat Events and Actions

yalst 9.0 im Detail (Teil 1): Einbindungen

Kauflösung: FAQs beim Serverwechsel

Mit Ihren Besuchern per Du

SITEMAP

Categories

Current Version

Current Status

Links for our Customers

Business Hours

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

Tags

Categories

Current Version

Current Status

Links for our Customers

Business Hours