Zweitsprache Archive - yalst - Live Support Software | Live Chat Software

Obwohl die Version 9.408 eigentlich nur ein Bugfix-Release ohne grössere zusätzliche Funktionalitäten ist, gibt es doch eine Sache, über die es zu schreiben lohnt. So kann man den Tab des Laschenchats jetzt sehr tiefgreifend über CSS anpassen.

Dazu muss man eine CSS-Datei irgendwo auf seinem Webspace hinterlegen. Wenn die yalst-Einbindung per HTTPS gemacht wird, was sie sollte, dementsprechend auch unter HTTPS.

Die entsprechende URL wird dann im HTML-Codegenerator in der Administration unter „Einbindung“ – „HTML-Codegenerator“ – „1. Live-Support-Einbindung in Ihre Webseite“:

an der entsprechenden Stelle eingetragen:

Hier natürlich die URL zur der CSS-Datei auf dem eigenen Webspace hineinschreiben. Der Einbindungscode bekommt dann einen neuen Parameter tab_button_css_url: \x26tab_button_css_url=https%3A%2F%2Fwww.example.com%2Fcustom_tab.css

Ausgehend vom „normalen“ Tab:

kann man relativ einfach kann man nun die Textgröße, die Fontfamilie und den Fontstyle anpassen:

.tab .text {
font-family: Verdana; /* font family style of the text in the tab */
font-size: large; /* font size style of the text in the tab */
font-style:italic;/* font style of the text in the tab */
}

.tab .text {

font-family: Verdana; /* font family style of the text in the tab */

font-size: large; /* font size style of the text in the tab */

font-style:italic;/* font style of the text in the tab */

}

und den doppelten Rahmen entfernen:

.tab:before {
content: initial;
}

.tab:before {

content: initial;

}

Beides vereint sieht dann so aus:

Aber um zu zeigen, was sonst noch möglich ist, wird hier anhand einer CSS-Datei veranschaulicht, dass man durchaus in der Lage ist, auch ein eigenes Bild in die Lasche zu integrieren. Dabei wird der eigentliche Tab nur noch als Container benutzt und der Container mit dem Text wird der neue Tab. Das before-Element, welches vorher die zweite Linie enthielt, wird dabei als Container für das neue Bild benutzt. Dieses muss natürlich auch per HTTPS irgendwo auf Ihrem Webspace liegen.

Hier ist das CSS mit vielen Kommentaren:

.tab .text { /* this element will be our new tab */
font-family: Verdana; /* font family style of the text in the tab */
font-size: large; /* font size style of the text in the tab */
font-style:italic; /* font style of the text in the tab */
background-color: #92d53f; /* new background color of the tab, background color of the integration code is set to transparent below */
padding: 15px 20px 15px 20px; /* font size style of the text in the tab */
margin: -10px;
border-radius: 5px 5px 0 0;
}

.tab .text:hover {
background-color: #639328; /* new hover color of the tab, normally calculated automatically from the background color of the integration code is set to transparent below */
}

.tab:before {
content: url('https://www.example.com/darkgreen.png'); /* the dark green chat bubble, replace by your own URL */
position: relative; /* that's the relative position*/
z-index: 2; /* the z-index to put in on top of the new tab*/
left: 40px;
top: 2px;
background: transparent;
}

.tab:after {
background: transparent;
}

.tab, .tab:hover {
padding: 20px 10px 0 10px; /* here the width and height of the tab will be extented to give space to the new tab and the added image*/
background: transparent; /* the original background color or hover color of the integration code is set to transparent*/
border: transparent; /* the original border color or hover border color of the integration code is set to transparent*/
}

.badge-wrapper {
top: 41px; /*you have to ajust that carefully while having a chat running and a minimized tab to put the badge back to the right place */
}

.tab .text { /* this element will be our new tab */

font-family: Verdana; /* font family style of the text in the tab */

font-size: large; /* font size style of the text in the tab */

font-style:italic; /* font style of the text in the tab */

background-color: #92d53f; /* new background color of the tab, background color of the integration code is set to transparent below */

padding: 15px 20px 15px 20px; /* font size style of the text in the tab */

margin: -10px;

border-radius: 5px 5px 0 0;

}

.tab .text:hover {

background-color: #639328; /* new hover color of the tab, normally calculated automatically from the background color of the integration code is set to transparent below */

}

.tab:before {

content: url('https://www.example.com/darkgreen.png'); /* the dark green chat bubble, replace by your own URL */

position: relative; /* that's the relative position*/

z-index: 2; /* the z-index to put in on top of the new tab*/

left: 40px;

top: 2px;

background: transparent;

}

.tab:after {

background: transparent;

}

.tab, .tab:hover {

padding: 20px 10px 0 10px; /* here the width and height of the tab will be extented to give space to the new tab and the added image*/

background: transparent; /* the original background color or hover color of the integration code is set to transparent*/

border: transparent; /* the original border color or hover border color of the integration code is set to transparent*/

}

.badge-wrapper {

top: 41px; /*you have to ajust that carefully while having a chat running and a minimized tab to put the badge back to the right place */

}

Und hier ist dann das Resultat:

Mit ein bisschen Geduld lässt sich also der Tab grundsätzlich umstylen.

Grundsätzlich gibt es in yalst eine Hauptsprache. Diese ist entweder Deutsch oder Englisch und ist neben der Sprache des Chats auf Besucherseite auch die Sprache für das Frontend in der Operator-Konsole („Arbeitsplatz der Agenten“) und der Administration. Neben dieser Hauptsprache kann man pro Zugang optional eine Zweitsprache auswählen.

Die Auswahl der Zweitsprache kann dabei in der Adminstration unter „Konfiguration“ – „Einstellungen“ – „Sonstiges“ erfolgen. Hierbei können Sie dann – je nach Hauptsprache – Deutsch, Englisch, Spanisch, Französisch und Italienisch auswählen.

Neben dem DropDown für die Zweitsprache finden Sie den Button „Textausgaben für die Zweitsprache“, der auf eine entsprechende Unterseite mit einer Vielzahl von Texten für die Zweitsprache leitet. Hier sind diese Texte für z. B. eine Zweitsprache „Englisch“ definiert.

Wenn Sie diese Einstellungen vorgenommen haben, wird Ihnen in den Chatfenstern (hier: der Chat direkt in der Seite) von yalst eine Umschaltung auf die Zweitsprache (hier: Spanisch) angeboten:

Damit ist es schon fast geschafft. Wenn man den Chat auf der Webseite direkt in der Zweitsprache anbieten will, kann man das im HTML-Codegenerator wählen. Diesen finden Sie in der Administration unter „Einbindung“ – „HTML-Codegenerator“ – „1. Live-Support-Einbindung in Ihre Webseite“.

Dort wählen Sie als Sprache die entsprechende Zweitsprache aus:

Im Einbindungscode taucht dann ein spezieller Parameter „\x26lang=2“ auf und der Chat läuft initial in der Zweitsprache z.B. in Spanisch. Die Umschaltmöglichkeit bleibt dabei natürlich bestehen.

Um die Texte im eigentlichen Tab auf der Webseite anzupassen, die dann ja auch in der Zweitsprache angezeigt werden sollten, müssen Sie diese ändern („Text bei „online“, Text bei „busy“, Text bei „offline“). Auch das lässt sich im HTML-Codegenerator einstellen:

Diese Texte werden dann, im Gegensatz zu den meisten anderen Texten in yalst, direkt in den Einbindungscode integriert. Das ermöglicht Ihnen, auf verschiedenen Seite unterschiedliche Texte zu verwenden oder die Besucher auf zweisprachigen Webseiten mit demselben Chat, aber in unterschiedlichen Sprachen zu empfangen.

Done!

Beiträge

Wie kann ich das Design des Tabs für die Lasche ändern?

Zweitsprache in yalst – ein kurzes HowTo

SITEMAP

Kategorien

Aktuelles

Aktuelle Version

Aktueller Status

Links für unsere Kunden

Business Hours