TalkJS Documentation

The Chat API + Javascript SDK for websites and apps

Log in or Sign up to view personalized docs.

Popup

Friday, May 10, 2019 1:12 AM

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 Popup.select). Create a Popup through Session.createPopup and then call Popup.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 Popup

hide

Closes the Popup, but doesn't remove it from the DOM

mount

Mounts the Popup to the parent container

off

Used to stop listening to TalkJS events.

on

Triggers when the popup is opened

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

select

Switches the active conversation the conversation identified by conversation, which can be either a Conversation object or a TalkJS conversation id.

setPresence

Sets metadata for the current session.

show

Shows the Popup, previously hidden or mounted with a parameter show: false

toggleDesktopNotifications

Deprecated. Please use Session.setDesktopNotificationEnabled instead.

Properties

messageField
MessageField		Encapsulates the message entry field tied to the currently selected conversation.

Method Details

createHtmlPanel

popup.createHtmlPanel(options)
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
HtmlPanelOptions

HtmlPanelOptions

conversation
Conversation | ConversationBuilder | string
optional		Either a Conversation object (as returned from getOrCreateConversation) or the id field of a conversation (which you may have stored in your database). If given the HTML panel called will only show up for that conversation.
height
number
optional		Optional, defaults to 300 (px).
show
boolean
optional		Optional, defaults to true. Set false if you don't want the HTML panel to be shown after createHtmlPanel is called. You can change the visibility of the HTML panels by calling .hide() or .show() on the HtmlPanel instance returned by createHtmlPanel's promise.
url
string		Required. URL you want to load inside the HTML panel. Url can be absolute ("https://www.example.com/register-form.html") or relative ("register-form.html"). We recommend using same origin pages to have better control of the page. Learn more about HTML Panels and same origin pages here.

Returns

Promise<HtmlPanel>

destroy

popup.destroy()
Destroys the Popup

Call this before removing the Popup container from the DOM.

Parameters

None.

Returns

void

hide

popup.hide()
Closes the Popup, but doesn't remove it from the DOM

Parameters

None.

Returns

void

mount

popup.mount(options)
Mounts the Popup to the parent container

Parameters

options
{ show?: boolean; }
optional

Returns

Promise<void>

off

This method has 5 overloads:
popup.off(eventType, handler)
Used to stop listening to TalkJS events.

Stops listening for the open event

Parameters

eventType
"open"
handler
(event: OpenEvent) => void

Returns

void
popup.off(eventType, handler)
Used to stop listening to TalkJS events.

Stops listening for the close event

Parameters

eventType
"close"
handler
(event: CloseEvent) => void

Returns

void
popup.off(eventType, handler)
Used to stop listening to TalkJS events.

Stops listening for the sendMessage event

Parameters

eventType
"sendMessage"
handler
(event: SendMessageEvent) => void

Returns

void
popup.off(eventType, handler)
Used to stop listening to TalkJS events.

Stops listening for the focus event

Parameters

eventType
"focus"
handler
() => void

Returns

void
popup.off(eventType, handler)
Used to stop listening to TalkJS events.

Stops listening for the blur event

Parameters

eventType
"blur"
handler
() => void

Returns

void

on

This method has 5 overloads:
popup.on(eventType, handler)
Triggers when the popup is opened

Parameters

eventType
"open"
handler
(event: OpenEvent) => void

Returns

void
popup.on(eventType, handler)
Triggers when the popup is closed

Parameters

eventType
"close"
handler
(event: CloseEvent) => void

Returns

void
popup.on(eventType, handler)
Triggers when the user sends a message using the TalkJS UI

Parameters

eventType
"sendMessage"
handler
(event: SendMessageEvent) => void

Returns

void
popup.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

void
popup.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

void

on("blur") 

popup.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

void

on("focus") 

popup.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

void

on("sendMessage") 

popup.on(eventType, handler)
Triggers when the user sends a message using the TalkJS UI

Parameters

eventType
"sendMessage"
handler
(event: SendMessageEvent) => void

Returns

void

select

popup.select(conversation)
Switches the active conversation the conversation identified by conversation, which can be either a Conversation object or a TalkJS conversation id.

Parameters

conversation
string | Conversation | ConversationBuilder

Returns

void

setPresence

popup.setPresence({ visible, custom })
Sets metadata for the current session.

Parameters

{ visible, custom }
{ visible?: boolean; custom?: { [key: string]: string; }; }

Returns

void

show

popup.show()
Shows the Popup, previously hidden or mounted with a parameter show: false

Parameters

None.

Returns

void

toggleDesktopNotifications

popup.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

Returns

void