Chatbox

Used to stop listening to TalkJS events.

off(eventType: 'blur' | 'focus' | 'sendMessage' | 'translationToggled') => void;

Enable/disable translation by default. This setting is applied to any conversation for which you haven't set a specific value.

setTranslationEnabledDefault(enabled: boolean | 'auto') => void

Triggers a KeyupEvent when the user releases a key.

This event is only emitted when captureKeyboardEvents is enabled. In that case, it is emitted for every keypress, including regular letters typed into text fields.

event.isInputFocused is true when a TalkJS input area is focused (eg the message field, the search box, or adjacent buttons). When this is the case, keypresses are likely to cause changes inside the chat UI. We recommend that you discard these events except when implementing global shortcuts that should take effect regardless of whether the user is typing a message or otherwise interacting with the chat UI using the keyboard.

All other event fields are the same as the corresponding fields in the browser's KeyboardEvent.

type KeyupHandler = (event: KeyupEvent) => void;

Emitted through on("keyup") when the user presses a key. All fields except isInputFocused precisely match the corresponding fields in the browser's KeyboardEvent.

Triggers when the user sends a message using the TalkJS UI

type SendMessageHandler = (event: SendMessageEvent) => void;

This event is triggered before the message is sent to TalkJS, allowing you to modify the contents of the message or its metadata by using override().

override({ text, custom }: {
  text?: string;
  custom?: CustomData;
}) => void;

Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)

type BlurHandler = (event: BlurEvent) => void;

BlurEvent is an empty object

Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)

type FocusHandler = (event: FocusEvent) => void;

FocusEvent is an empty object

Triggers when the user toggles translation in a conversation

type TranslationToggledHandler = (event: TranslationToggledEvent) => void;

This event is triggered when the user toggles real-time message translation using the built-in toggle.

This object represents data associated with a conversation.

The subject, photoUrl, custom and welcomeMessages properties can be set through ConversationBuilder.setAttributes.

{
  id: '87d70908d90cee5d12bd',
  subject: 'Random conversation',
  photoUrl: null,
  topicId: null,
  welcomeMessages: null,
  custom: {}
}

Lets you show only specific messages in the chat panel.

Copy
// Assuming you have set a `category` custom field in your messages.
// Only show messages that have no category set:
{
  custom: {
    category: '!exists'
  }
}

Copy
// Assuming you have set a `category` custom field in your messages.
// Only show messages of that have the category "shoes"
{
  custom: {
    category: ['==', 'shoes']
  }
}

Copy
// Assuming you have set a `topic` custom field in your messages.
// Only show messages that have the 'topic' either "inquiry" or "reservation"
{
  custom: {
    topic: ['oneOf', ['inquiry', 'reservation']]
  }
}

Copy
// Don't show messages that were sent via the REST API
{
  origin: ['!=', 'rest']
}

Copy
// Only show messages sent by users with the role of 'admin' and the user ID is 1.
{
  sender: {
    role: ['==', 'Admin'],
    id: ['==', '1']
  }
}

Copy
// Only show messages of the type "SystemMessage"
{
  type: ['==', 'SystemMessage']
}