Appearance, languages and accessibility

This page explains what the chat window looks like on your website and how visitors use it: the fields in the app with their limits and defaults, the trigger and the window, how the widget makes room for fixed bars, colours, font and image, the preview, the languages, the keyboard and accessibility. Adding the snippet to your site is covered in Embed the widget.

Settings in the app

Settings apply per assistant. Open Work › Assistants (app.xicbot.de/assistenten), click Edit on the assistant and go to the section Chat window on your website. It opens with the sentence “The chat window runs in its own frame. It can neither read nor change the page it sits on.” The fields appear in this order:

The number fields accept whole numbers within the range shown. The browser already refuses a value outside it, and the server checks the same limits again. A number field left empty saves the default from the table. Save at the end of the section stores every field of the chat window in one step, including allowed domains, outreach rules and consent text; while it runs the button reads Saving …, afterwards Saved. appears.

The roles Edit, Administration and Owner can make changes. With the Read role the button on the assistant says View, Save is disabled, and the page reads “With the Read role this area is view-only. Changes need at least the Edit role.” Roles are explained in Team and roles, the form workflow in Widget settings.

Trigger

The trigger is the button in the chosen corner that opens the window. Its edge is 56 pixels times Scale, so 45 pixels at 80 and 84 pixels at 150. Its rounding follows Corner radius, but at most half the edge: at scale 100 it becomes a circle from a radius of 28, and with the default of 18 it is a rounded square. It carries the Colour and a soft shadow.

Without an image the trigger shows three dots, 7 pixels at scale 100 and at least 5 pixels. The first two are black (#000000) or white, whichever reads better on the Colour; the third is cyan (#22d3ee). With an image, the image appears instead as a circle at 68 percent of the edge and at least 24 pixels.

• Pointer over it: the trigger gets slightly brighter.
• Keyboard focus: a 3-pixel cyan outline, 3 pixels away from the edge.
• Click, Enter or Space: opens the window; doing it again closes it.
• Name for screen readers: “Chat öffnen” until the settings have loaded, or “Open chat” with an English data-sprache, then the Heading in the window, and while the window is open “Chat schließen” or “Close chat”, depending on the window language. aria-expanded reports whether the window is open.

Window

The open window appears above the trigger, or below it for the top corners, with 12 pixels of space in between. It keeps the same side distance as the trigger, and its corners use Corner radius. Width and height are preferred sizes: the width is at most the browser width minus the side distance and 16 pixels, the height at most the browser height minus the edge distance, the trigger and 44 pixels. Example: in a browser window 700 pixels high, the window with default settings is 580 rather than 620 pixels tall.

Up to and including a browser width of 560 pixels, the open window covers the whole screen without a corner radius. The protected margins of devices with a notch or rounded screen are kept clear. The trigger is hidden in this form; the window closes with the X in the title bar or with Escape. When the width changes, for example when the device is turned, the form switches without a reload. Screen readers announce the window as a dialog named after the Heading in the window.

Making room for fixed bars

Many pages have fixed elements at the edge, such as a cookie notice, a basket bar or buttons of their own. The widget therefore looks in its own area for elements with position: fixed or position: sticky that are visible and at least 48 × 24 pixels. Its own area covers the trigger, the open window outside the full-screen form and the outreach speech bubble.

• Bar: If such an element is in the way, trigger, window and speech bubble move vertically away from the bottom or top edge until at least 12 pixels of space to the element remain. When the bar disappears, they return to their place.
• Wall: If the element is at least 80 percent as tall as the browser window, or there is not enough room to move aside, trigger and speech bubble step back and an open window closes. The conversation is kept and is there again the next time the window opens.
• Timing: the check runs on load and on opening, and also on resize, on scroll and when the structure of the page changes, the latter at most every 250 milliseconds.
• Full-screen form: here the window does not move aside; it lies above the page.

A frame of its own

The chat window is an iframe with an opaque origin of its own: the sandbox attribute allows scripts and opening links in a new tab, and allow-same-origin is missing. The window therefore has no access to your page or its cookies, and your page has none to the window. The two only exchange messages, listed in Messages between page and window.

The frame is only created after your page’s load event, so it does not hold up page rendering. With data-einwilligung="erforderlich" it also waits for the visitor’s consent, see data-einwilligung and How the loader starts. Its start values travel in the address fragment after #, and it loads with referrerpolicy="no-referrer".

Custom CSS is not supported. Trigger and shell carry their styles directly on the elements inside a shadow DOM, and the window brings its own styles inside the frame; selectors on your page reach neither. You shape the widget through the fields in the app, the three values from your page and the script attributes.

Colours and font

The Colour fills the trigger, the title bar, the visitor’s messages and the send button. The widget picks the text colour on top itself: black (#000000) or white, whichever its contrast calculation rates as more legible.

The widget reads exactly three values from your page and hands them to the window:

Window corners and trigger keep following the app’s Corner radius field, not the value from your page. Since every assistant has a Colour, your page’s brand colour is only visible until the settings have loaded. How these values combine with data-farbe and the app fields is described under Precedence.

Light or dark follows the device setting (prefers-color-scheme). In dark mode the window has a near-black background (#0a0f1f) and a cyan focus outline (#22d3ee); in light mode a white background and an indigo focus outline (#4338ca). There is no switch for this.

Scale sets the base font size in the window: 16 pixels at 100, 12.8 pixels at 80 and 24 pixels at 150. Every font size in the window depends on it and grows or shrinks in the same proportion: the messages, the heading, the header note, the consent step and the Your data area, the cards for assistant steps and products, comparisons, attachments, the status line and the limits notice. No text drops below 12 pixels. The status line, for example, is 13 pixels at 100, 19.5 pixels at 150 and at 80 not 10.4 but 12 pixels. The input field grows with it from 100 upwards and stays at 16 pixels below that. Icons, images and icon buttons keep their pixel sizes: icon buttons measure 44 pixels, 48 on touch devices. Buttons with text are at least 44 pixels tall and become taller when their text needs more room.

Image in the title bar

Under Image in the title bar, Choose file lets you pick a PNG, JPEG or WebP file. The note reads “PNG, JPEG or WebP. The image is cropped square from the centre and scaled to 96 pixels per edge before it is saved.” This happens in your browser: the app crops the image to a square from the centre, scales it to 96 × 96 pixels and prepares it as PNG; it is stored with Save. A 48-pixel preview shows the result. Without an image the text reads “No image set. The title bar then shows only the text.” Remove image clears the field, which also takes effect after Save. If the file cannot be read, the app shows “This file could not be read as an image.” and the previous image stays in place.

In the window the image sits at 32 pixels next to the heading, rounded with two thirds of your page’s corner radius, or 8 pixels without that value. Its alternative text is empty because the heading stands right beside it. On the trigger it replaces the three dots as a circle. The server only accepts an image if

• it arrives as a data address of type image/png, image/jpeg or image/webp in Base64,
• the value has at most 70,000 characters and the image data at most 49,152 bytes, and
• the bytes really form a PNG, JPEG or WebP image.

SVG is excluded because it is a document and can carry script. Trigger and window check the format a second time before showing it. If the server rejects an image, the image field shows “The image could not be used. Choose a PNG, JPEG or WebP file.”, together with the message “Please check the marked fields.” An image produced by the app’s cropping stays within these limits.

Preview in the app

In the section Embedding on your website, Show preview opens the window right inside the app and Close preview hides it again. The app explains: “The preview shows the window the way a visitor sees it. It does not answer and does not count as an embedding.”

• The preview runs in an isolated frame. Every role can open it.
• The preview shows the saved state. After a change, Save first, then close the preview and open it again.
• Only the window is shown, in a box 480 pixels high and at most 384 pixels wide. Trigger, corner and distances are not part of it.
• The interface follows the app language; values from a website are not included.
• The status line says “Preview - no answers are given here.”, the input field is locked, and the attach button is missing.
• If the chat window is not enabled or the assistant is not active, it says “This chat is not available.”; without an active version it says “This assistant is not ready yet.”

Languages

The window interface exists in German and English. Which language applies is decided in this order:

• If data-sprache on the snippet holds a language code such as de, en or en-GB, its first two letters count: with de or en that language applies. Other values change nothing.
• Otherwise English applies if the assistant’s active version is English, and German in every other case, including when there is no active version.

The server picks its own texts by the same rule: the header note, the limits notice and the default consent text. The greeting, outreach texts and a consent text of your own stay as you wrote them and are not translated. There are no further interface languages. The window sets the lang attribute to match, so screen readers pronounce correctly. The interface texts:

Visitor rights and consent are covered in Consent and visitor rights, the conversation itself in Chat in the widget.

Keyboard

On opening, the window puts focus into the input field. The field grows with the text up to 140 pixels in height and takes up to 4000 characters. While an input method is still composing characters, Enter does not send.

Accessibility

• The history is marked up as a log (role="log") with polite announcements, is named “Conversation” in English, and can be reached and scrolled with the keyboard.
• The status line carries role="status", so its messages are read out.
• The input field has a hidden label, and every icon button has a name.
• The typing indicator is named “Answer is being written”.
• Icon buttons are 44 × 44 pixels, 48 × 48 on touch devices; the input field is at least 44 pixels high, 48 there.
• Keyboard focus shows a 3-pixel outline.
• When the window is at most 380 pixels wide, the inner spacing gets tighter and messages may take 94 instead of 85 percent of the width.
• With the reduced-motion setting the typing indicator stands still, and the input field scrolls into view without animation.
• When the on-screen keyboard opens, the window adapts to the visible height and brings the input field into view.
• The title bar image has an empty alternative text because, next to the heading, it adds nothing of its own.

Notices in the window

Below the heading a small line reads “You are chatting with an automated assistant.” Above the input area sits the limits notice “Note: This assistant is a program, it can be wrong and it does not replace personal advice from our team.” The server supplies both texts, and both follow the window language. Where the limits notice comes from is explained in Fixed rules, the messages shown on faults in Messages.

When changes become visible

A window that is already loaded picks up changed display values and both notices when it is opened and when the visitor returns to the tab, at most once a minute and without a reload, even if only a notice has changed. Greeting, consent text and outreach rules take effect on the next page load. The consent text has one exception: if a visitor agrees to the previous wording, the service creates no conversation and the window shows the current wording for a new agreement, see Checks on the service side. Which setting arrives when is listed under When changes reach your website.

Frequent questions