Chatbox
Tuesday, November 12, 2019 7:28 AMinterface Chatbox
A messaging UI for just a single conversation There is no way for the user to switch between conversations (but you can change the active conversation through select). Create a Chatbox through Session.createChatbox and then call mount to show it.Methods
createHtmlPanel | HTML Panels allow you to place a HTML document in an iframe in your chats, just above the entry box. |
destroy | Destroys the chatbox. |
mount | Renders the UI inside a DOM element specified by |
off | Used to stop listening to TalkJS events. |
on("blur") | Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it) |
on("focus") | Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it) |
on("sendMessage") | Triggers when the user sends a message using the TalkJS UI |
on("translationTriggered") | Triggers when the user toggles translation in a conversation |
select | Switches the active conversation the conversation. |
setMessageFilter | Used to control which messages are shown in the message list, depending on a type, origin or custom message attributes. See MessagePredicate for all available options. |
setPresence | Sets metadata for the current session. |
setTranslationEnabledDefault | Enable/disable translation by default. This setting is applied to any conversation for which you haven't set a specific value. |
setTranslationEnabledForConversation | Enable or disable translation for a conversation. |
toggleDesktopNotifications | Deprecated. Please use Session.setDesktopNotificationEnabled instead. |
Properties
messageField | Encapsulates the message entry field tied to the currently selected conversation. |
Method Details
createHtmlPanel
chatbox.createHtmlPanel(options): Promise<HtmlPanel>
HTML Panels allow you to place a HTML document in an iframe in your chats, just above the entry box.
Using HTML Panels, you can extend TalkJS UIs to have anything from credit card payments to lead collection forms, or, for instance, to show the product details of a marketplace transaction between your users. See our HTMLPanels documentation for more info
Parameters
options | |||||||||
interface HtmlPanelOptions
|
Returns
Promise<HtmlPanel>destroy
chatbox.destroy()
Destroys the chatbox.
Call this before removing the chatbox container from the DOM.
Parameters
Returns
voidmount
chatbox.mount(container): Promise<void>
Renders the UI inside a DOM element specified by
container
. container
must either be a DOM Element (as returned by e.g. document.getElementById
) or a JQuery object with a single element.
Parameters
container HTMLElement | JQuery | null |
Returns
Promise<void>off
This method has 5 overloads:chatbox.off(eventType, handler)
Used to stop listening to TalkJS events.
Stops listening for the _sendMessage_ event
Parameters
eventType "sendMessage" | |
handler (event: SendMessageEvent) => void | The handler function must be the same handler function that was passed to |
Returns
voidchatbox.off(eventType, handler)
Used to stop listening to TalkJS events.
Stops listening for the _sendMessage_ event
Parameters
eventType "sendMessage" | |
handler (event: SendMessageEvent) => void | The handler function must be the same handler function that was passed to |
Returns
voidchatbox.off(eventType, handler)
Used to stop listening to TalkJS events.
Stops listening for the _focus_ event
Parameters
eventType "focus" | |
handler () => void | The handler function must be the same handler function that was passed to |
Returns
voidchatbox.off(eventType, handler)
Used to stop listening to TalkJS events.
Stops listening for the _blur_ event
Parameters
eventType "blur" | |
handler () => void | The handler function must be the same handler function that was passed to |
Returns
voidchatbox.off(eventType, handler)
Used to stop listening to TalkJS events.
Stops listening for the _translationToggled_ event
Parameters
eventType "translationToggled" | |
handler () => void | The handler function must be the same handler function that was passed to |
Returns
voidon("blur")
chatbox.on(eventType, handler)
Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)
Parameters
eventType "blur" | |
handler (event: BlurEvent) => void |
Returns
voidon("focus")
chatbox.on(eventType, handler)
Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)
Parameters
eventType "focus" | |
handler (event: FocusEvent) => void |
Returns
voidon("sendMessage")
chatbox.on(eventType, handler)
Triggers when the user sends a message using the TalkJS UI
Parameters
eventType "sendMessage" | |
handler (event: SendMessageEvent) => void |
Returns
voidon("translationTriggered")
chatbox.on(eventType, handler)
Triggers when the user toggles translation in a conversation
Parameters
eventType "translationToggled" | |
handler (event: TranslationToggledEvent) => void |
Returns
voidselect
chatbox.select(conversation)
Switches the active conversation the conversation.
conversation
, can be either a Conversation object or a TalkJS conversation id.
Parameters
conversation string | Conversation | ConversationBuilder |
Returns
voidsetMessageFilter
chatbox.setMessageFilter(filter)
Used to control which messages are shown in the message list, depending on a type, origin or custom message attributes. See MessagePredicate for all available options.
Parameters
filter | |||||||||
interface MessagePredicate
|
Returns
voidsetPresence
chatbox.setPresence({ visible, custom })
Sets metadata for the current session.
Parameters
{ visible, custom } {
visible?: boolean
custom?: {
[key: string]: string
}
} |
Returns
voidsetTranslationEnabledDefault
chatbox.setTranslationEnabledDefault(enabled)
Enable/disable translation by default. This setting is applied to any conversation for which you haven't set a specific value.
Parameters
enabled boolean | "auto" | Whether conversations should be translated by default or not. Pass "auto" to enable translation for conversations with users with different locales. |
Returns
voidsetTranslationEnabledForConversation
chatbox.setTranslationEnabledForConversation(conversation, enabled)
Enable or disable translation for a conversation.
Parameters
conversation string | ConversationBuilder | The conversation for which this hsould be be set. If not specified, the setting will be applied to the currently selected conversation. |
enabled boolean | Whether translation should be enabled |
Returns
voidtoggleDesktopNotifications
chatbox.toggleDesktopNotifications(isEnabled)
Please use Session.setDesktopNotificationEnabled instead.
This method will keep being supported, but for new projects, we recommend that you use Session.setDesktopNotificationEnabled.
Sets desktop notification on or off. Has the same effect as toggling the "Desktop notification" toggle in the TalkJS Inbox UI. Use this function to replicate that toggle elsewhere in your UI if you're using TalkJS in a mode that doesn't show this toggle.
Deprecated.
Parameters
isEnabled boolean |