How the application is laid out

The application at https://app.xicbot.de shows every area in the same frame: the header bar at the top, the area column on the left, an extra list in three of the areas, the work area in the middle and the status bar at the bottom. This page describes the frame, how the language is chosen, the settings on your device and the start page Overview. How you get in is covered in Sign-in and access.

Addresses and pages without sign-in

The application sits at the root of app.xicbot.de. Every area has its own path without a trailing slash, for example https://app.xicbot.de/assistenten. A bookmark, reloading the page or a shared address lead to the same place; without a session the way there leads through Sign in. The tab title of the start page reads “Overview - XICBOT”. Two addresses carry an addition: the Command line opens an assistant via /assistenten?a=…, the Overview opens a conversation via /gespraeche?g=…. An address that does not exist shows “This page does not exist” with Go to the overview inside the frame, and the tab title reads “This page does not exist - XICBOT”. If a page cannot be loaded, it shows “The page could not be loaded” with Reload.

Without signing in, only the access pages Sign in, Create account, Confirm your address, Reset password, New password and Accept invitation plus the Accessibility statement can be reached. Their addresses and what each page does are listed under The access pages.

Without a session, any other address leads to Sign in and, after signing in, back to that address. If the session has expired, no matter which tab noticed it, the page shows the notice “Your session has expired. Please sign in again.” If it was ended in another tab, for example by signing out or resetting the password there, the notice reads “The session was ended in another window. Please sign in again.” After you sign out yourself, no notice appears. If the service does not answer when the app opens or rejects the account, you stay signed in: the work area shows “You are still signed in, but the account could not be loaded.” with the reason, Try again after an outage or Sign out otherwise, plus Sign in with another account. When the connection comes back after an outage, the app reloads once by itself. From a window width of 960 pixels these pages have two columns: the form on the left, the column What the assistant does on the right, which screen readers skip and which disappears below 960 pixels. The Accessibility statement is a single-column document. At the foot of each of these pages sit the three buttons for language, appearance and Accessibility; there, the accessibility settings open below the content.

Interface language

The interface is available in German and English. The language is set by the first applicable item in this order:

1. 1

   Step 1

   Addition in the address

   An address with ?sprache=de or ?sprache=en sets the language. The addition counts as the choice on this device and is removed from the address bar after loading.

2. 2

   Step 2

   Choice on the device

   The language button on the right of the status bar shows the language it switches to: EN or DE. Screen readers hear Change language followed by the target language. The commands Language to English and Language to German make the same choice. The browser stores it; without storage it only applies until the page is reloaded.

3. 3

   Step 3

   Language of your sign-in

   When you create an account or accept an invitation, the language of that page is stored with your sign-in, German if none is given. If a language has been chosen on this device, every sign-in stores it with your sign-in again, German or English; without a choice the previous one stays. In the application the stored language only applies while no choice is stored on this device. The notice about a password change and your invitations to others are sent in this language.

4. 4

   Step 4

   Browser language

   If neither exists, the browser language decides: English gives English, any other language gives German.

An address with a leading language segment, for example /en/assistenten or /de/assistenten, redirects with status 308 to the same address without it. The query is kept, and the language segment counts as the choice on the device. The link in the confirmation message opens the application in the language of your sign-in. The chosen language is also set as the language of the page, so screen readers pronounce it correctly.

Header bar

The header bar is 48 pixels high. Before it, keyboard users find the skip link Skip to content, which appears with the first Tab press and jumps straight into the work area. From left to right the bar contains:

• Open menu, only below a window width of 900 pixels: opens the area column as a drawer.
• The symbol with the name XICBOT leads to the Overview. Below 640 pixels only the symbol is shown; screen readers still hear the name.
• The name of the active account with a coloured dot, or the account switcher if you belong to several accounts. Below 900 pixels neither is shown here.
• The Command line.
• Your email address, on wide screens only.
• Help and Sign out.

Switching accounts

If you belong to more than one account, the header bar shows the button Switch account instead of the name. The list shows the coloured dot, the name and your role for each account. The active account is marked Active, an account that is not active is marked suspended; deleted accounts are not listed. While switching, the chosen entry shows Switching and all entries are locked. Clicking the active account just closes the list, as do Escape and a click outside it.

The switch applies to your sign-in on every device, not just to this window: the service stores the chosen account, the application rebuilds on the Overview, and other open tabs in the same browser switch too. The chosen account's Audit log usually records the switch as Account switched; if this entry cannot be written, the switch still applies. Your role applies per account, so you can hold Administration in one and Read in another; what the area column shows changes with it. You can switch away from a locked account, but the target has to be active, otherwise “This account is locked. Please write to mail@xicbot.de.” appears below the list. If the account you are working in is paused or locked, the session ends at the next load with the notice “The account you last worked in is paused or locked. Please sign in again: if you belong to another account, you will land there.” Signing in then places you in an active account you own, otherwise in the one you have belonged to longest. If the chosen account no longer belongs to your sign-in, for example because you were removed from it, the list reloads and “This tenant is no longer available to your account. The list has been reloaded.” appears below it. If the list does not arrive, “This entry no longer exists. Reload the page to see the current state.” appears instead. More than 20 switches within a minute are answered with “Too many attempts. Please wait a moment.” How roles are assigned is described under Team and roles.

The colour of the dot is computed from the account, so it is the same on every device. There are eight mid-tones; green, amber and red are left out on purpose because the interface uses them for states. The name sits next to the dot; the colour only helps to tell accounts apart. Below 900 pixels the account switcher sits at the top of the area column drawer, and the status bar shows the name of the active account.

Command line

Open the Command line with Ctrl+K, or Cmd+K on a Mac, or with a click. The field starts with > and shows the placeholder Run a command …; on the right is the key hint “Ctrl K”, or “⌘ K” on a Mac. Below 900 pixels a finger-sized button replaces the field, screen readers hear Open command line, and the field opens below the header bar.

An empty field lists all commands. Every word you type has to appear in the name, kind or group of a command, also as part of a word and regardless of upper or lower case: “ass wor” finds Assistants in the Work group.

Clicking a match runs it as well. When the focus leaves the field, the list closes. If no command matches, the list shows No command matches. If the assistants cannot be loaded, the other commands keep working; a new attempt is made only after the page is reloaded.

Help and sign-out

Help opens the page of this documentation that matches the current area in a new tab, in the interface language. A half-filled form stays as it is. Screen readers hear “Help - opens the documentation in a new tab”. The table in the next section shows which area leads to which page; without a page of its own, the link leads to the Quick start.

Sign out ends the session at the service and removes it from the browser, even if the service does not answer; then Sign in appears. The Command line offers the same step under the kind Account.

Area column

The area column on the left is 216 pixels wide and orders the areas along the working path: first setting up and testing, then what conversations trigger, then the records, and finally administration. The open area is marked by a shaded background and a 2 pixel bar; screen readers announce it as the current page. The last column names the page that Help opens in each area.

Audit log and Interfaces only appear from the Administration role upwards, that is with Administration or Owner; with Read or Edit both are missing from the area column. Opening Audit log directly then shows “This needs at least the Administration role.” The Operator group only appears for the operator’s own accounts; members of a customer account do not see it. The table describes what the column shows. What each role may do is covered in Team and roles.

Narrow windows

Below a window width of 900 pixels the area column sits in a drawer 17 rem wide. Open menu in the header bar slides it in below the header bar and moves the focus to the entry of the open area. The header bar stays usable; the rest of the page is dimmed beneath it, and the work area, the area list and the status bar cannot be used. When closed, the drawer cannot be reached with the keyboard either. The account switcher sits at the top of the drawer. The drawer closes via:

• Close menu in place of Open menu.
• Escape; the focus returns to Open menu.
• A tap on the dimmed area.
• Choosing an area or any other page change.
• Opening the Command line.

Availability

Your Availability status sits at the foot of the area column. It is not an area but your own state: Available or Unavailable. Below it, Available shows the time, for example “available since 09:15”; if no time is known or you are Unavailable, it shows the note “Anyone marked available is shown in the inbox as available for a handover.”. The button below reads Mark me available or Mark me unavailable depending on the state and is locked while the request runs. If it fails, the previous state remains and a message appears below the button. While your email address is not confirmed, the button is missing; in its place you see “You can mark yourself as available once your email address is confirmed.” How handovers work is covered in Inbox.

Area list

In Assistants, Knowledge and Conversations a list 264 pixels wide sits between the area column and the work area, with the search field Search the list. Screen readers hear the title the area gives the list as its name, otherwise List in this area. Below 900 pixels the list sits above the work area, takes at most 40 percent of the window height, and every row is at least 44 pixels high. Depending on the situation the list shows:

What the entries themselves mean is covered in Assistants, Knowledge and Conversations.

Status bar

The status bar at the bottom edge is 28 pixels high. It is marked up as a status region whose changes screen readers announce without interrupting you. From left to right it shows:

The application fetches the usage only once your email address is confirmed, and then on every page change, at most every 15 seconds. If the request fails, the field stays empty. What units are and how the quota is measured is covered in Plans and quotas.

Below 900 pixels the bar only shows the dot, the account name on at most 40 percent of the width, and the settings; the area name, the usage and the word Connected are dropped. Not connected stays visible as a word, and so do, in the operator’s view during a takeover, Takeover, the operator’s address and End takeover. The bar then has two rows: at the top the account name, Takeover and the address, shortened if space runs out; below, End takeover on the left and the settings on the right. During a takeover, the area name and the usage are dropped below 1200 pixels already. On touch devices the bar is at least 44 pixels high, its buttons are finger-sized, and it keeps clear of the bottom edge of the screen, such as the swipe bar of a phone.

Settings on your device

Three buttons sit on the right of the status bar and at the foot of the pages without sign-in:

All three settings apply per browser. The appearance first follows the operating system setting, even if that changes while you work. Once you switch, the browser stores light or dark. To follow the operating system again, choose Match device under Appearance in the Accessibility panel. Appearance and accessibility settings are applied before the page is drawn for the first time.

Accessibility settings

The Accessibility panel opens at the top of the work area, and below the content on the pages without sign-in. The Command line opens it too. When it opens, the focus moves to its heading Accessibility. It closes with Close accessibility settings inside the panel, with the button that opened it, or with Escape while the focus is in the panel or on that button; the focus then returns to the button. It contains:

Reset to defaults restores the five accessibility defaults; the Appearance stays as it is. Below the panel it says: “These settings apply in this browser only and are not sent to the server.” Without storage in the browser, the settings only apply to the current window.

While your email address is unconfirmed

Until you have opened the link in the confirmation message, the banner Email address not confirmed yet appears at the top with the Send the message again button, and locked areas show “This area stays locked until the email address is confirmed.” Anyone who joins a team via an invitation counts as confirmed. What stays locked until then and how the banner responds to the button is described under Before confirmation.

Messages in the work areas

If the service declines a request or does not answer, the work areas show one of these messages:

Where an area lies outside your plan, the link Go to billing takes you further. What each plan includes is covered in Plans and quotas and on the pricing page.

The overview

The start page is called Overview, with the tab title “Overview - XICBOT”. It greets you with Welcome and your name, or your email address if no name is stored. Below come five figures for the last seven days, the Setup card with the next steps while anything is open, including the Add your website field as long as there is no source, then Conversations per day, What is set up and Recent conversations. Each card is described under The overview after signing in, the figures over longer periods under Analytics.

Accessibility statement

The statement is available without sign-in at https://app.xicbot.de/barrierefreiheit; the sign-in page links to it with Accessibility. Its text is only available in German and states:

What is in place:

• Five accessibility settings apply to the entire interface and persist across page changes; they take effect before the page is drawn.
• Horizontally scrolling regions can be reached with the keyboard and are marked up as labelled regions.
• Bar charts carry no information of their own: the same figures appear next to them as a table or visible labels, and the drawing is hidden from assistive technology.
• Messages appear as status or alert regions that screen readers pick up without any action; the history in the chat window is marked up as a running log.
• The chosen language is stored on the device and applies to every further page; a link can set it with ?sprache=de or ?sprache=en.

Known limitations:

• The assessment relies on measurements and keyboard operation; a full test with screen readers across all workflows is still outstanding.
• The chat window runs embedded on your website. Text size, contrast and focus order of the surrounding page are up to you.
• Knowledge base content comes from you; answers reproduce it without checking it for accessibility.
• The accessibility settings live in the browser; if no storage is available there, they only apply to the current window.

Under Feedback and contact the statement names the address mail@xicbot.de for barriers you run into. Back to sign-in leads to the sign-in page. How visitors operate the chat window on your website is covered in Appearance and accessibility.

Frequent questions