Öffentliche Komponente

A part of the "Chat" module is the public component that allows to integrate this module into any website. Once the public component is installed, visitor of the website will be able to communicate with the TeamWox users through the chat. All chats are stored within the system. Dialogs that are bound to clients are conveniently displayed on a separate tab when viewing them in the "Organization" module.

The TeamWox groupware is protected from spam attacks through the public component of the "Chat" module. After receiving a large number of requests from one IP address, a ban is set for 2 minutes to several hours, depending on the frequency of such requests.

Two versions of the public chat are available: Flash and JavaScript.

Flash Version of the Public Chat

In order to initialize the Flash-version of the public component of the "Chat" module, you should place the "support.html" file containing the following code at your website:

<html style="height:100%;">
<head>
 <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
 <body style="margin:0px;">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
 width="100%" height="100%" id="main" align="middle">
     <param name="allowScriptAccess" value="sameDomain" />
     <param name="allowFullScreen" value="false" />
     <param name="movie" value="support.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#FFFFFF" />
     <param name="flashvars" value="url=https://team.yourdomain.com" />
     <embed src="support.swf" flashvars="url=https://team.yourdomain.com" width="100%"
 height="100%" quality="high" bgcolor="#FFFFFF" name="main" align="middle"
 allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash"
 pluginspage="http://www.macromedia.com/go/getflashplayer" />
   </object>
 </body>
</html>

In selben Verzeichnis muss sich auch die Datei "support.swf" befinden. Download support.swf and support.html

JavaScript Version of the Public Chat

To initialize the JavaScript version of the public component, you should place the "support.html" file containing the following code at your website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="chat/chat.css" type="text/css" rel="stylesheet" />
<script src="chat/chat.js" type="text/javascript"></script>
</head>
<body>
<div id="chat"></div>
<script type="text/javascript">
window.Chat.init(document.getElementById('chat'),
  {
   url : 'https://team.yourdomain.com/',
   files : 'chat/'
  });
</script>
</body>
</html>

In the same category, you should place the 'chat' folder, which contains all the files required for chat operation. Download files for JavaScript chat version.

To adjust the connection, you should change the address in the "url" parameter specifying the address of your TeamWox server.

It is strongly recommended to work with the chat using the secured "https" protocol for keeping save the information transmission between the website and the TeamWox system. However, to work with this protocol, you must have an SSL certificate signed by one of the trusted certificate companies, that can be installed through the "Administration" or during the installation of the TeamWox system. If you use a self-signed certificate delivered together with the TeamWox system, then the connection can be established only via the "http" protocol. In this case, you should specify "http" instead of "https" before the domain name in the HTML file.

You can also set up different parameters of the chat window within the "Value" attribute of the <param> tag and the "Flashvars" attribute of the <embed> tag. For the JavaScript version, the window parameters are specified inside the "window.Chat.init()" function.

client details: name, email, phone, company, account

digital_signature

group

topic

cache

language

close (this parameter is available only in the Flash version)

filter

group_id

topic (for autologin)

config

autologin

different parameters of appearance (only for Flash)

In Unterabschnitten dieses Kapitels können Sie die ausführlichen Beispiele der Implementierung der öffentlichen Komponente des "Chat"-Moduls in den Sprachen PHP und .NET finden.

Allgemeine Einstellungen

Information über den Kunden

Für die Information über den Kunden sind folgende Parameter einzugeben:

name=[Name des Kunden]

email=[Email des Kunden]

phone=[Telephon des Kunden]

company=[Unternehmen des Kunden]

account=[Nummer des Accounts des Kunden]

Diese Parameter stellen die vorbestimmten Werte der Felder für Kunden dar. Namen, Emailadressen, Telefone und Namen des Unternehmens können automatisch aus den Informationen der in Ihrer Seite registrierten Kunden übernommen werden. Dabei werden diese Felder den Kunden für die Bearbeitung unzugänglich.

Im TeamWox-System erfolgt die Bindung der Dialoge an Organisationen automatisch nach der Emailadresse.

digital_signature=[MD5 der Verknüpfung der dargestellten Felder mit einem Schlüsselwort]

Damit der Austausch der Daten des Benutzer mit den auf der Webseite vorhandenen Informationen möglich ist (Name, Telefon, Name des Unternehmens usw.), müssen Sie der Datei "support.html" die Parameter der digitalen Signatur hinzufügen (digital_signature). Im Wert des Parameters "digital_signature" muss man mit hash MD5 die Verknüpfung der Werte der dargestellten Felder (name, company, phone usw.) und des Schlüsselwortes angeben. Dieses Schlüsselwort wird auch in den Einstellungen des Moduls "Chat" angegeben. Im folgenden wird die Prüfung der digitalen Signatur vom TeamWox-System durchgeführt, im Erfolgsfall werden die Felder für Benutzer automatisch ausgefüllt und für die Bearbeitung geschlossen.

Zur Zeit ist diese Technologie in Entwicklung. Für den Datenaustausch reicht es aus, dem Parameter "digital_signature" jeden beliebigen Wert zuzuordnen.

group=[Name der Gruppe der Online Beratung]

Dieser Parameter ist für die Auswahl der Gruppe bestimmt, die standardmäßig im Chat-Fenster gewählt wird. Wenn die Benennung der Gruppe aus zwei Wörtern besteht, muss man statt eines Leerzeichens zwischen den Wörtern "%20" eingeben, z.B.: "technical%20support".

topic=[GANZE ODER TEILBENENNUNG DES THEMAS]

In jeder Gruppe können vorbestimmte Themen für Diskussion erstellt werden. Dieser Parameter ist für die Auswahl des Standard-Themas im Chat-Fenster bestimmt. Als Wert dieses Feldes kann auch nur ein Teil Themen-Namens angegeben werden. Das System wird die Suche des angegebenen Wortes oder der Phrase unter den erstellten Themen durchführen und das passende verwenden.

cache=[ERLAUBEN VON CACHE DER DATEN]

Im Standard werden die Daten, die vom Benutzer beim Eingang in "Chat" eingegeben wurden, gecacht. Um Cache abzuschalten, muss man  "cache" mit dem Wert "false" angeben.

language=[SPRACHE]

Im Standard wird die vom System verwendete Sprache gewählt. Um diese zu ändern, müssen Sie in diesem Parameter einen der folgenden Werte angeben:

ru —für Russisch;

en — für Englisch;

cn — für Chinesisch;

tr — für Türkisch;

ar — für Arabisch;

es — für Spanisch;

it — für Italienisch;

fr — für Französisch;

de — für Deutsch;

tat — für Tatarisch;

az — für Aserbaidschanisch.

Only two languages are available in the JavaScript version: ru and en.

close=[Benennung der Funktion JAVASCRIPT, die das Fenster schließt]

Dieser Parameter schließt bei Klick auf die Schaltfläche "Beenden" automatisch das Chatfenster.

filter=[Schlüsselwort]

This parameter allows to filtrate only necessary service groups by the keywords specified in them. In such a manner you can make available only specific groups when calling the chat from a website. We can consider as an example the English page of a website where there is no need in the Russian speaking group. If you specify "english" in this parameter and in the settings of the service group, clients will be able to see only that group. You can specify only one value in the "filter" parameter of the HTML file used on the website. However, you can specify several values in the settings of a service group. Thus, you will be able to receive messages from different websites through one group.

Let us consider an example when we have two websites dedicated to different products and one group that provides their support.

In this case, in the HTML file for the first website we specify the "product1" keyword:

Flash version:

<param name="flashvars" value="filter=product1&url=https://team.yourdomain.com" />

The same parameters are specified for the "embed" tag.

JavaScript version:

window.Chat.init(document.getElementById('chat'),
  {
   url : 'https://team.yourdomain.com',
   filter : 'product1',
  });

In the HTML file for the second website we specify the "product2" keyword:

Flash version:

<param name="flashvars" value="filter=product2&url=https://team.yourdomain.com" />

Add the same value in the "embed" tag.

JavaScript version:

window.Chat.init(document.getElementById('chat'),
  {
   url : 'https://team.yourdomain.com',
   filter : 'product2',
  });

Then we specify both of these parameters separated by comma in the settings of the service group in the "Keywords" field: product1, product2:

General group

Now requests from both websites will be addressed to one service group.

Now let us consider another example when we need to delimit the availability of different service groups for different websites. We have three versions of the website: in the English, Russian and Chinese languages. There is the "Support (en/ru)" group for the English and Russian versions and "Support (cn)" group for the Chinese version.

We should specify the "en" keyword in the HTML file for the English website:

Flash version:

<param name="flashvars" value="filter=en&url=https://team.yourdomain.com" />

JavaScript version:

window.Chat.init(document.getElementById('chat'),
  {
   url : 'https://team.yourdomain.com',
   filter : 'en',
  });

For the Russian version set "ru":

Flash version:

<param name="flashvars" value="filter=ru&url=https://team.yourdomain.com" />

JavaScript version:

window.Chat.init(document.getElementById('chat'),
  {
   url : 'https://team.yourdomain.com',
   filter : 'ru',
  });

For Chinese set "cn":

Flash version:

<param name="flashvars" value="filter=cn&url=https://team.yourdomain.com" />

JavaScript version:

window.Chat.init(document.getElementById('chat'),
  {
   url : 'https://team.yourdomain.com',
   filter : 'cn',
  });

Then in the settings of the "Support (en/ru)" group we should specify the "en" and "ru" keywords separated by comma, and in the settings of "Support (cn)" - only "cn".

Group for english and russian version of website

Group for chinese version of website

In this case only the corresponding service groups will be available for the clients on the websites.

Each parameter in the Flash version must be separated by the & symbol.

An example of correct parameters specification in the Flash version is given below:

<param name="flashvars" value="name=Name&style_head=chatlogo.gif&url=https://team.yourdomain.com" />

However, you should specify the values that are picked up at your website (the information specified by the clients when they register at your website).

Automatischer Zugang zum Chat

Es ist möglich, dass sich Benutzer für den Chat autorisieren müssen (Login) und dass Sie im Chat-Fenster die Information über sich selbst nicht sehen können z.B. wenn ein Benutzer vom Personal Cabinet auf der Seite kommt (dabei ist sie/er ein autorisierter Benutzer und die komplette Information über sie/ihn (Name, Email, Telefon usw.)) ist bekannt.

Ursache ist das Fehlen der Aufforderung der Einstellungen vom TeamWox-Server: Gruppen, Themen und Einstellungen des Moduls (Felder, die im Fenster des Einganges dargestellt werden) werden nicht angefordert.

Für Login in den Chat müssen alle Angaben über den Benutzer ausgefüllt werden (Name, Telefon, Email usw.). Eine notwendige Bedingung ist das Vorhandensein des Parameters  group_id, der oben beschrieben wurde.

Für Login in den Chat sind folgende Parameter vorgesehen:

group_id=[IDENTIFIKATOR DER GRUPPE]

Als Wert dieses Parameters muss die ID der Gruppe angegeben werden. Diese wird neben dem Titel des Fensters Editieren der Einstellungen der Gruppe dargestellt (angegeben in Klammern nach dem Symbol #). Man kann nur einen Identifikator angeben.

topic=[VOLLSTÄNDIGER NAME DES THEMAS]

Bei der automatischen Autorisierung unterscheidet sich das Verhalten dieses Parameters von der Autorisierung durch Eingangsfenster. In diesem Fall wird der Parameterwert dem Thema des Chatdialogs zugeordnet. Bei Aufruf des Chats aus dem Personal Cabinet des Benutzers können Sie beispielsweise "topic=Frage%20aus%20Profil%20" eingeben.

config=[BITMASKE ALS EINE GANZZAHL]

Dieser Parameter ist für Ein-bzw.Ausschaltung der zusätzlichen Felder des Zugangsfensters bestimmt :

E-mail — 8

Rechnung — 4

Gesellschaft — 2

Telefon — 1

Standardmäßig sind diese Felder ausgeschaltet und ihr Ausfüllen wird beim Eingang in den Chat nicht geprüft. Zum Hinzufügen dieser Felder müssen Sie im Wert des Parameters "config" die Summe ihrer Werte angeben, z.B. für die Darstellung der Felder "Gesellschaft" und "Rechnung" muss man im Wert des Parameters 6 (4 + 2) angeben.

autologin=[ERLAUBNIS ZUR AUTOMATISCHEN AUTORISIERUNG]

Um die Möglichkeit der automatischen Autorisierung einzuschalten, muss man den Parameter "autologin" mit dem Wert "true" angeben.

autologin: true,

Wenn dieser Parameter nicht angegeben wird oder sein Wert  "false" ist, ist die automatische Autorisierung unmöglich.

Outfit Einstellungen

Parameter der Eingabefelder:

style_input_out_border_color=[FARBE DER FELDERGRENZEN IM NORMALEN ZUSTAND]

style_input_over_border_color=[FARBE DER FELDERGRENZEN BEIM STELLEN DES MAUSZEIGERS]

style_input_press_border_color=[FARBE DER FELDERGRENZEN BEIM KLICKEN MIT DER MAUS]

style_input_error_background_color=[HINTERGRUNDFARBE DER FELDER BEI ANGABE EINES NICHT KORREKTES WERTES]

Parameter der Tasten:

style_button_out_first_color=[FARBE DES OBEREN TEILS DER TASTE IM NORMALEN ZUSTAND ]

style_button_out_second_color=[FARBE DES UNTEREN TEILS DER TASTE IM NORMALEN ZUSTAND]

style_button_out_border_color=[FARBE DER TASTENGRENZE IM NORMALEN ZUSTAND]

style_button_over_first_color=[FARBE DES OBEREN TEILS DER TASTE BEIM STELLEN DES MAUSZEIGERS]

style_button_over_second_color=[FARBE DES UNTEREN TEILS DER TASTE BEIM STELLEN DES MAUSZEIGERS]

style_button_over_border_color=[FARBE DER TASTENGRENZE BEIM STELLEN DES MAUSZEIGERS]

style_button_press_first_color=[FARBE DES OBEREN TEILS DER TASTE BEIM DRÜCKEN]

style_button_press_second_color=[FARBE DES UNTEREN TEILS DER TASTE BEIM DRÜCKEN]

style_button_press_border_color=[FARBE DER TASTENGRENZE BEIM DRÜCKEN]

Parameter des Logos auf der Eingangsseite:

style_head=[PFAD ZUR DATEI DES LOGOBILDES]

style_head_x=[EINRÜCKUNG DES LOGOS VON DER LINKEN GRENZE DES FENSTERS IN PIXEL]

style_head_y=[EINRÜCKUNG DES LOGOS VON DER OBEREN GRENZE DES FENSTERS IN PIXEL]

Es sind folgende Formate der Logodateien zulässig: *.jpg, *.gif, *.png, *.swf. Wenn diese Anforderungen nicht eingehalten werden, wird Standardlogo  TeamWox dargestellt.

Parameter des Logos auf der Dialogseite:

style_logo=[PFAD ZUR DATEI DES LOGOBILDES]

style_logo_x=[EINRÜCKUNG DES LOGOS VON DER LINKEN GRENZE DES FENSTERS IN PIXEL]

style_logo_y=[EINRÜCKUNG DES LOGOS VON DER OBEREN GRENZE DES FENSTERS IN PIXEL]

Es sind folgende Formate der Logodateien zulässig: *.jpg, *.gif, *.png, *.swf. Wenn diese Anforderungen nicht eingehalten werden, wird Standardlogo  TeamWox dargestellt.

Parameter des Fensters der Einschätzung und des Ausgangs

style_form_background_color=[HINTERGRUNDFARBE DES FENSTERS]

style_form_head_color=[FARBE DES FENSTERKOPFES]

style_form_head_text_color=[FARBE DES FENSTERTITELS]

style_form_title=[TEXT DES FENSTERTITELS]

Andere Parameter:

style_scroll_icon_color=[FARBE DES DREIECKS AUF DER TASTE DER ÖFFNUNG DER AUFKLAPPLISTE]

style_line_select_color=[FARBE DER GEWÄHLTEN ZEILE IN DER AUFKLAPPLISTE]

style_frame=[ZEIGEN/VERDECKEN INTERNE FENSTERGRENZE]
Es sind die Werte "true" oder "false" für Zeigen oder Verdecken der Grenze möglich.

Setup of appearance is available only in the Flash version of the public chat.

Alle Farben müssen im hexadezimalen Format,  ZB  "#000000" eingegeben werden.

Aufruf des Chatfensters

Um den Chat zu beginnen, müssen Sie diese HTML-Seite in einem selbstständigen Fenster aufrufen. Hierzu dient der folgende Abschnitt:

<a href="javascript:void(0)" onclick="window.open('support.html','support','toolbar=no,resizable=yes,
status=no,menubar=no,location=no,width=600,height=500');">Online Assistance</a>

Login Fenster

Vor dem Beginn des Dialogs muß der Kunde folgendes Formular ausfüllen :

Forme

Name — Name

Email — Emailadresse

Telefon — Telefonnummer

Gesellschaft — Name des Unternehmens.

Konto — Kontonummer

Gruppe — Auswahl des Namens einer Gruppe, die vorläufig im Modul  "Chat" erstellt wurde. Für die Auswahl der Gruppe muss man mit der linken Maustaste in das Feld klicken und in der sich öffnenden Liste die gewünschte Gruppe anklicken.

Thema — Auswahl des Dialogthemas. Für die Auswahl eines Themas müssen Sie mit der linken Maustaste in das Feld klicken und in der sich öffnenden Liste das gewünschte Thema anklicken. Themen der Dialoge müssen auch vorläufig in der Gruppe erstellt werden.

Zum Start des Dialogs müssen Sie auf die Schaltfläche "Anfangen" im Fenster unten rechts klicken.

Dialogfenster

Das Dialogfenster des Kunden sieht so aus:

Dialogfenster

Im oberen Teil des Fensters finden Sie die Informationen über den Dialog, im unteren Teil ein Feld zur Texteingabe. Um eine Nachricht zu senden, müssen Sie die Schaltfläche "Senden" anklicken oder die Tastenkombination "Ctrl+Enter" drücken.

Im Chat-Fenster finden Sie auch folgende 'Verwaltungselemente':

Mit Klick auf die Schaltfläche "vollständig" können Sie einen Dialog beenden und das Dialogfenster schließen. Wenn ein Kunde den Dialog beendet, erscheint im Dialogfenster des Mitarbeiters der Hinweis, dass der Kunde den Dialog geschlossen hat.

Durch Klick auf das Symbol Schall kann man den Sound bei Eingang einer neuen Meldungen ein-bzw.ausschalten.

Mit Klick auf die Schaltfläche "In die Zwischenablage kopieren" wird der Text in die Zwischenablage kopiert, von wo aus sie diesen an anderer Stelle einfügen können.

Bewertung des Dialogs

Im oberen Teil des Dialogfensters kann der Kunde für die Hilfe, die ein Mitarbeiter des Unternehmens während des Chat geleistet hat, eine Note geben. Beim Anklicken des Sternchens wird das folgende Fenster geöffnet:

Einschätzung des Dialogs

Für die Bewertung des Dialogs klicken Sie mit der linken Maustaste auf das erste Sternchen, halten die Maustaste fest und ziehen mit der Maus bis zu dem gewünschten Sternchen. Die Bewertung wird nach einer Skala von 1 bis 5 vorgenommen, fünf Sternchen sind die Bestnote. Die Bewertung wird in der Liste der Dialoge in der einzelnen Spalte dargestellt. Im Modul sind auch Berichte über Noten der Dialoge zugänglich.