Darstellung, Sprachen und Bedienung

Diese Seite beschreibt, wie das Chatfenster auf Ihrer Website aussieht und wie Besucher es bedienen: die Felder in der App mit Grenzen und Grundwerten, Auslöser und Fenster, das Ausweichen vor festen Leisten, Farben, Schrift und Bild, die Vorschau, die Sprachen, die Tastatur und die Barrierefreiheit. Wie Sie den Schnipsel auf Ihrer Seite einsetzen, steht unter Widget einbauen.

Einstellungen in der App

Die Einstellungen gelten je Assistent. Öffnen Sie Arbeit › Assistenten (app.xicbot.de/assistenten), klicken Sie beim Assistenten auf Bearbeiten und gehen Sie zum Abschnitt Chatfenster auf Ihrer Website. Er beginnt mit dem Satz „Das Chatfenster läuft in einem eigenen Rahmen. Es kann die Seite, auf der es liegt, weder lesen noch verändern.“ Die Felder stehen in dieser Reihenfolge:

Die Zahlenfelder nehmen ganze Zahlen im angegebenen Bereich an. Einen Wert außerhalb weist schon der Browser zurück, der Server prüft dieselben Grenzen noch einmal. Ein geleertes Zahlenfeld speichert den Grundwert aus der Tabelle. Speichern am Ende des Abschnitts sichert alle Felder des Chatfensters in einem Schritt, auch erlaubte Domains, Ansprache und Einwilligungstext; währenddessen steht auf dem Knopf Wird gespeichert …, danach erscheint Gespeichert.

Ändern können die Rollen Bearbeiten, Verwaltung und Inhaber. Mit der Rolle Lesen heißt die Schaltfläche am Assistenten Ansehen, Speichern ist gesperrt, und darunter steht „Mit der Rolle Lesen lässt sich hier nur ansehen. Ändern kann, wer mindestens die Rolle Bearbeiten hat.“ Die Rollen erklärt Team und Rollen, den Ablauf im Formular Widget einstellen.

Auslöser

Der Auslöser ist die Schaltfläche in der gewählten Ecke, die das Fenster öffnet. Seine Kante misst 56 Pixel mal Skalierung, also 45 Pixel bei 80 und 84 Pixel bei 150. Die Rundung folgt dem Eckenradius, höchstens aber der halben Kante: bei Skalierung 100 wird er ab einem Radius von 28 zum Kreis, mit dem Grundwert 18 ist er ein abgerundetes Quadrat. Er trägt die Farbe und einen weichen Schatten.

Ohne Bild zeigt der Auslöser drei Punkte, 7 Pixel groß bei Skalierung 100 und mindestens 5 Pixel. Die ersten beiden sind schwarz (#000000) oder weiß, je nachdem, was auf der Farbe besser lesbar ist, der dritte ist cyan (#22d3ee). Mit Bild erscheint stattdessen das Bild als Kreis, 68 Prozent der Kante groß und mindestens 24 Pixel.

• Zeiger darüber: der Auslöser wird etwas heller.
• Tastaturfokus: ein 3 Pixel breiter Rahmen in Cyan mit 3 Pixel Abstand.
• Klick, Enter oder Leertaste: öffnet das Fenster, ein zweites Mal schließt es.
• Name für Screenreader: bis die Einstellungen geladen sind „Chat öffnen“, mit englischem data-sprache „Open chat“, danach die Überschrift im Fenster, bei offenem Fenster „Chat schließen“ oder „Close chat“, je nach Sprache des Fensters. aria-expanded meldet, ob das Fenster offen ist.

Fenster

Das offene Fenster erscheint über dem Auslöser, bei den oberen Ecken darunter, mit 12 Pixel Luft dazwischen. Zur Seite hält es denselben Abstand wie der Auslöser, seine Ecken tragen den Eckenradius. Breite und Höhe sind Wunschmaße: die Breite ist höchstens die Breite des Browserfensters abzüglich Seitenabstand und 16 Pixel, die Höhe höchstens die Höhe des Browserfensters abzüglich Kantenabstand, Auslöser und 44 Pixel. Beispiel: In einem 700 Pixel hohen Browserfenster wird das Fenster mit den Grundwerten 580 statt 620 Pixel hoch.

Bis einschließlich 560 Pixel Breite des Browserfensters füllt das offene Fenster die ganze Fläche, ohne Eckenradius. Die geschützten Ränder von Geräten mit Aussparung oder abgerundetem Bildschirm bleiben frei. Der Auslöser ist in dieser Form verborgen; geschlossen wird mit dem X in der Titelleiste oder mit Escape. Ändert sich die Breite, etwa beim Drehen des Geräts, wechselt die Form ohne Neuladen. Screenreader kennen das Fenster als Dialog mit der Überschrift im Fenster als Namen.

Ausweichen vor festen Leisten

Viele Seiten haben feste Elemente am Rand, etwa einen Cookie-Hinweis, eine Leiste zum Warenkorb oder eigene Knöpfe. Das Widget sucht darum in seinem eigenen Bereich nach Elementen mit position: fixed oder position: sticky, die sichtbar und mindestens 48 × 24 Pixel groß sind. Zum eigenen Bereich gehören der Auslöser, das offene Fenster außerhalb der vollflächigen Form und die Sprechblase der Ansprache.

• Leiste: Liegt ein solches Element im Weg, rücken Auslöser, Fenster und Sprechblase senkrecht von der unteren bzw. oberen Kante weg, bis mindestens 12 Pixel Luft zum Element bleiben. Verschwindet die Leiste, kehren sie an ihren Platz zurück.
• Wand: Ist das Element mindestens 80 Prozent so hoch wie das Browserfenster oder reicht der Platz zum Ausweichen nicht, treten Auslöser und Sprechblase zurück, und ein offenes Fenster schließt sich. Das Gespräch bleibt erhalten und steht beim nächsten Öffnen wieder da.
• Zeitpunkt: geprüft wird beim Laden und beim Öffnen, dazu bei Größenänderung, beim Scrollen und bei Änderungen am Aufbau der Seite, diese höchstens alle 250 Millisekunden.
• Vollflächige Form: hier weicht das Fenster nicht aus, es liegt über der Seite.

Eigener Rahmen

Das Chatfenster ist ein iframe mit eigener, undurchsichtiger Herkunft: das Attribut sandbox erlaubt Skripte und das Öffnen von Verweisen in einem neuen Tab, allow-same-origin fehlt. Das Fenster hat damit keinen Zugriff auf Ihre Seite oder deren Cookies, und Ihre Seite keinen auf das Fenster. Beide tauschen nur Nachrichten aus; welche, steht unter Nachrichten zwischen Seite und Fenster.

Der Rahmen entsteht erst nach dem Ereignis load Ihrer Seite und hält deren Aufbau damit nicht auf. Mit data-einwilligung="erforderlich" wartet er zusätzlich auf die Zustimmung des Besuchers, siehe data-einwilligung und Wie der Lader startet. Seine Startwerte stehen im Fragment der Adresse hinter #, und er lädt mit referrerpolicy="no-referrer".

Eigenes CSS ist nicht vorgesehen. Auslöser und Hülle tragen ihre Stile direkt am Element in einem Shadow DOM, das Fenster bringt seine Stile im Rahmen mit; Selektoren Ihrer Seite erreichen beides nicht. Gestalten lässt sich das Widget über die Felder in der App, die drei Werte Ihrer Seite und die Script-Attribute.

Farben und Schrift

Die Farbe färbt Auslöser, Titelleiste, die Nachrichten des Besuchers und den Sendeknopf. Die Schrift darauf wählt das Widget selbst: schwarz (#000000) oder weiß, je nachdem, welche der beiden seine Kontrastrechnung als besser lesbar ausweist.

Von Ihrer Seite liest das Widget genau drei Werte und gibt sie an das Fenster weiter:

Fensterecken und Auslöser folgen weiter dem Feld Eckenradius der App, nicht dem Wert Ihrer Seite. Weil jeder Assistent eine Farbe hat, ist die Markenfarbe Ihrer Seite nur bis zum Laden der Einstellungen zu sehen. Wie sich diese Werte mit data-farbe und den Feldern der App verrechnen, steht unter Rangfolge.

Hell oder dunkel richtet sich nach der Einstellung des Geräts (prefers-color-scheme). Im dunklen Modus hat das Fenster einen fast schwarzen Grund (#0a0f1f) und einen cyanfarbenen Fokusrahmen (#22d3ee), im hellen einen weißen Grund und einen indigoblauen Fokusrahmen (#4338ca). Einen Schalter dafür gibt es nicht.

Die Skalierung setzt das Grundmaß der Schrift im Fenster: 16 Pixel bei 100, 12,8 Pixel bei 80 und 24 Pixel bei 150. Alle Schriftgrößen im Fenster hängen daran und wachsen oder schrumpfen im selben Verhältnis: die Nachrichten, die Überschrift, der Hinweis im Kopf, Einwilligung und der Bereich Ihre Daten, die Karten zu Schritten des Assistenten und zu Produkten, Vergleiche, Anhänge, die Statuszeile und der Grenzenhinweis. Unter 12 Pixel fällt dabei keine Schrift. Die Statuszeile etwa misst 13 Pixel bei 100, 19,5 Pixel bei 150 und bei 80 nicht 10,4, sondern 12 Pixel. Das Eingabefeld wächst ab 100 mit und bleibt darunter bei 16 Pixel. Symbole, Bilder und Knöpfe mit Symbol behalten ihre Pixelmaße: Knöpfe mit Symbol messen 44 Pixel, auf Touch-Geräten 48. Knöpfe mit Text sind mindestens 44 Pixel hoch und werden höher, wenn ihre Schrift mehr Platz braucht.

Bild in der Titelleiste

Unter Bild in der Titelleiste wählen Sie mit Datei wählen eine Datei im Format PNG, JPEG oder WebP. Der Hinweis dazu lautet „PNG, JPEG oder WebP. Das Bild wird quadratisch aus der Mitte beschnitten und auf 96 Pixel Kantenlänge gebracht, bevor es gespeichert wird.“ Das geschieht in Ihrem Browser: Die App schneidet das Bild quadratisch aus der Mitte, bringt es auf 96 × 96 Pixel und legt es als PNG bereit; gespeichert wird es mit Speichern. Eine Vorschau von 48 Pixel zeigt das Ergebnis. Ohne Bild steht dort „Kein Bild hinterlegt. Die Titelleiste zeigt dann nur den Text.“ Bild entfernen leert das Feld, wirksam ebenfalls nach Speichern. Lässt sich die Datei nicht lesen, meldet die App „Diese Datei ließ sich nicht als Bild lesen.“, und das bisherige Bild bleibt stehen.

Im Fenster steht das Bild mit 32 Pixel neben der Überschrift, gerundet mit zwei Dritteln des Eckenradius Ihrer Seite, ohne diesen Wert mit 8 Pixel. Es hat einen leeren Alternativtext, weil die Überschrift daneben steht. Auf dem Auslöser ersetzt es als Kreis die drei Punkte. Der Server nimmt ein Bild nur an, wenn

• es als data-Adresse vom Typ image/png, image/jpeg oder image/webp in Base64 vorliegt,
• die Angabe höchstens 70 000 Zeichen und die Bilddaten höchstens 49 152 Bytes umfassen und
• die Bytes tatsächlich ein PNG-, JPEG- oder WebP-Bild ergeben.

SVG ist ausgeschlossen, weil es ein Dokument ist und Skript tragen kann. Auslöser und Fenster prüfen das Format beim Anzeigen ein zweites Mal. Lehnt der Server ein Bild ab, steht am Bild „Das Bild ließ sich nicht verwenden. Wählen Sie eine PNG-, JPEG- oder WebP-Datei.“, dazu die Meldung „Bitte prüfen Sie die markierten Felder.“ Ein Bild aus dem Zuschnitt der App bleibt innerhalb dieser Grenzen.

Vorschau in der App

Im Abschnitt Einbindung auf Ihrer Website öffnet Vorschau anzeigen das Fenster direkt in der App, Vorschau schließen blendet es wieder aus. Die App erklärt dazu: „Die Vorschau zeigt das Fenster so, wie ein Besucher es sieht. Sie antwortet nicht und gilt nicht als Einbindung.“

• Die Vorschau läuft in einem abgeschotteten Rahmen. Jede Rolle kann sie öffnen.
• Die Vorschau zeigt den gespeicherten Stand. Nach einer Änderung erst Speichern, dann die Vorschau schließen und wieder öffnen.
• Zu sehen ist nur das Fenster, in einem Kasten von 480 Pixel Höhe und höchstens 384 Pixel Breite. Auslöser, Ecke und Abstände zeigt sie nicht.
• Die Oberfläche folgt der Sprache der App; Werte einer Website fließen nicht ein.
• Die Statuszeile meldet „Vorschau - hier wird nicht geantwortet.“, das Eingabefeld ist gesperrt, und die Schaltfläche zum Anhängen fehlt.
• Ist das Chatfenster nicht freigegeben oder der Assistent nicht aktiv, steht dort „Dieser Chat ist nicht verfügbar.“, ohne aktive Fassung „Dieser Assistent ist noch nicht bereit.“

Sprachen

Die Oberfläche des Fensters gibt es auf Deutsch und Englisch. Welche Sprache gilt, entscheidet diese Reihenfolge:

• Steht an data-sprache am Schnipsel ein Sprachkürzel wie de, en oder en-GB, zählen dessen erste zwei Buchstaben: bei de oder en gilt diese Sprache. Andere Angaben ändern nichts.
• Sonst gilt Englisch, wenn die aktive Fassung des Assistenten Englisch ist, in allen anderen Fällen Deutsch, auch ohne aktive Fassung.

Nach derselben Regel wählt der Server seine eigenen Texte: den Hinweis im Kopf, den Grenzenhinweis und den vorgegebenen Einwilligungstext. Begrüßung, Texte der Ansprache und ein eigener Einwilligungstext bleiben so, wie Sie sie geschrieben haben, und werden nicht übersetzt. Weitere Sprachen für die Oberfläche gibt es nicht. Das Fenster setzt das Attribut lang passend, damit Screenreader richtig vorlesen. Die Texte der Oberfläche:

Besucherrechte und Einwilligung beschreibt Einwilligung und Besucherrechte, das Gespräch selbst Gespräch im Widget.

Tastatur

Beim Öffnen setzt das Fenster den Fokus in das Eingabefeld. Das Feld wächst mit dem Text bis 140 Pixel Höhe und nimmt bis zu 4000 Zeichen auf. Solange eine Eingabehilfe für Schriftzeichen noch Text zusammensetzt, sendet Enter nicht.

Barrierefreiheit

• Der Verlauf ist als Protokoll (role="log") mit zurückhaltender Ansage ausgezeichnet, heißt „Gesprächsverlauf“ und lässt sich mit der Tastatur ansteuern und scrollen.
• Die Statuszeile trägt role="status", ihre Meldungen werden vorgelesen.
• Das Eingabefeld hat eine unsichtbare Beschriftung, jeder Knopf mit Symbol trägt einen Namen.
• Die Tippanzeige heißt „Antwort wird geschrieben“.
• Knöpfe mit Symbol sind 44 × 44 Pixel groß, auf Touch-Geräten 48 × 48; das Eingabefeld ist mindestens 44 Pixel hoch, dort 48.
• Der Tastaturfokus zeigt einen 3 Pixel breiten Rahmen.
• Ist das Fenster höchstens 380 Pixel breit, rücken die Innenabstände enger, und Nachrichten dürfen 94 statt 85 Prozent der Breite einnehmen.
• Mit der Einstellung für reduzierte Bewegung steht die Tippanzeige still, und das Eingabefeld rückt ohne Animation ins Bild.
• Öffnet sich die Bildschirmtastatur, passt sich das Fenster der sichtbaren Höhe an und holt das Eingabefeld ins Bild.
• Das Bild in der Titelleiste hat einen leeren Alternativtext, weil es neben der Überschrift nichts Eigenes sagt.

Hinweise im Fenster

Unter der Überschrift steht klein „Sie schreiben mit einem automatischen Assistenten.“ Über dem Eingabebereich steht der Grenzenhinweis „Hinweis: Dieser Assistent ist ein Programm, er kann sich irren und ersetzt keine persönliche Beratung durch unsere Mitarbeiterinnen und Mitarbeiter.“ Beide Texte stellt der Server, beide folgen der Sprache des Fensters. Woher der Grenzenhinweis kommt, steht unter Feste Regeln, die Meldungen bei Störungen unter Meldungen.

Wann Änderungen sichtbar werden

Ein bereits geladenes Fenster übernimmt geänderte Anzeigewerte und die beiden Hinweise beim Öffnen und bei der Rückkehr in den Tab, höchstens einmal pro Minute und ohne Neuladen, auch wenn sich nur ein Hinweis geändert hat. Begrüßung, Einwilligungstext und Regeln der Ansprache greifen erst beim nächsten Laden der Seite. Eine Ausnahme gilt beim Einwilligungstext: Stimmt ein Besucher noch dem bisherigen Text zu, legt der Dienst kein Gespräch an, und das Fenster zeigt ihm den geltenden Text zur erneuten Zustimmung, siehe Prüfungen beim Dienst. Welche Einstellung wann ankommt, zeigt die Übersicht unter Wann Änderungen auf Ihrer Website ankommen.

Häufige Fragen