FAQ

Handoff to other system #

You can use Clerk.io Chat as the first-line assistant and hand the conversation to your own support chat when a visitor asks to speak to a human.

Clerk.io calls the onSupport hook when the Chat support action is triggered. The callback receives an event object containing a summary of the conversation. In the example below, the event object is named e.

Use the summary to open your own chat provider with the conversation context. Replace the placeholder functions with the API or JavaScript integration supplied by your chat provider.

Clerk('config', {
  key: 'YOUR_PUBLIC_API_KEY',
  chat: {
    onSupport: function (e) {
      Clerk('chat', 'disable');
      Clerk('chat', 'close');

      open_support_chat({
        message: e
      });
    }
  }
});

If your provider needs a specific field from the event object, inspect e in the browser console and pass that field instead of the complete object.

function open_support_chat(context) {
  // Replace this with your chat provider's integration.
  window.SendDeskWidget.open({
    context: context.message
  });
}

The exact method for opening the external chat depends on the provider. The important parts are to preserve the summary, disable Clerk.io Chat, and open the other chat after the handoff data is ready.

Accessibility features #

Clerk.io Chat is designed to work with keyboard navigation and screen readers. Its controls use clear names and states, so visitors can understand and operate Chat without relying on a mouse or visual cues.

Opening Chat #

• Chat is announced to screen readers as a dialog with a clear name.
• The launcher tells visitors whether Chat is open or closed.
• When Chat opens, keyboard focus moves into the panel. When it closes, focus returns to the control the visitor used before opening it.
• Pressing Escape closes Chat only while the visitor is using Chat. It does not change how Escape works elsewhere on the webshop.

Keyboard navigation #

• Visitors can use Tab and Shift+Tab to move through Chat controls in a logical order, including nested controls such as clearing, resizing, and closing Chat.
• Focus stays within the Chat panel while it is open, so it does not jump unexpectedly to the page behind it.
• Buttons and links show a clear, high-contrast focus outline.
• Controls have descriptive names, including open or close Chat, clear conversation, enlarge or shrink Chat, dismiss notification, and previous or next products.

Messages #

• Screen readers announce a new assistant reply when the reply is complete.
• Visitors can move keyboard focus to individual text messages to review them.
• The message field is exposed as a labelled text box.
• Send and microphone controls are real buttons with clear names. Their disabled state is also communicated when an action is unavailable.
• Decorative avatars are ignored by screen readers, reducing unnecessary announcements.

Notifications and products #

• Toast notifications announce the notification message itself, rather than only announcing the dismiss control.
• Product carousel arrows are removed from keyboard navigation on mobile when they are hidden.
• Where consent text is shown next to the message field, it is linked to the field as additional information for screen-reader users.

These features make Chat easier to use for visitors who navigate by keyboard, use a screen reader, or need clear visual focus indicators. Your webshop’s surrounding theme and content should also follow accessible design practices.