---
url: https://talkjs.com/docs/UI_Components/JavaScript/Classic/Popup
title: 'Popup'
minidoc-source: js
minidoc-lib: classic
---

## Popup
/** 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. */
export interface Popup extends UIBox  {
/** Destroys the popup and removes it from the DOM
Destroys the popup, removes it from the DOM and removes all event listeners it has running. */
destroy(): void;
/** Closes the popup, but doesn't remove it from the DOM */
hide(): void;
/** Renders the Popup UI on your page
Loads the popup in the background, but by default shows only the launcher button. Pass `{ show: true }` to open the popup as soon as it's loaded. */
mount(options?: {
show?: boolean;
}): Promise<void>;
/** Stops emitting events registered with Popup.on.
Please use the Subscription.unsubscribe method on the object returned by Popup `onXyz` instead.
@param eventType - 
@param handler - The handler function must be the same handler function that was passed to `on("open")` */
off(eventType: "open", handler: ()=>void): void;
/** Stops emitting events registered with Popup.on.
Please use the Subscription.unsubscribe method on the object returned by Popup `onXyz` instead.
@param eventType - 
@param handler - The handler function must be the same handler function that was passed to `on("close")` */
off(eventType: "close", handler: ()=>void): void;
/** Stops emitting events registered with Popup.on.
Please use the Subscription.unsubscribe method on the object returned by Popup `onXyz` instead.
@param eventType - 
@param handler - The handler function must be the same handler function that was passed to `on("sendMessage")` */
off(eventType: "sendMessage", handler: (event: SendMessageEvent)=>void): void;
/** Stops emitting events registered with Popup.on.
Please use the Subscription.unsubscribe method on the object returned by Popup `onXyz` instead.
@param eventType - 
@param handler - The handler function must be the same handler function that was passed to `on("focus")` */
off(eventType: "focus", handler: ()=>void): void;
/** Stops emitting events registered with Popup.on.
Please use the Subscription.unsubscribe method on the object returned by Popup `onXyz` instead.
@param eventType - 
@param handler - The handler function must be the same handler function that was passed to `on("blur")` */
off(eventType: "blur", handler: ()=>void): void;
/** Stops emitting events registered with Popup.on.
Please use the Subscription.unsubscribe method on the object returned by Popup `onXyz` instead.
@param eventType - 
@param handler - The handler function must be the same handler function that was passed to `on("translationToggled")` */
off(eventType: "translationToggled", handler: ()=>void): void;
/** Stops emitting events registered with Popup.on.
Please use the Subscription.unsubscribe method on the object returned by Popup `onXyz` instead.
@param eventType - 
@param handler - The handler function must be the same handler function that was passed to `on("keyup")` */
off(eventType: "keyup", handler: (event: KeyEvent)=>void): void;
/** Listens for an event.
Please use the `onXyz` methods on Popup instead. */
on(eventType: "open", handler: ()=>void): void;
/** Listens for an event.
Please use the `onXyz` methods on Popup instead. */
on(eventType: "close", handler: ()=>void): void;
/** Listens for an event.
Please use the `onXyz` methods on Popup instead. */
on(eventType: "sendMessage", handler: (event: SendMessageEvent)=>void): void;
/** Listens for an event.
Please use the `onXyz` methods on Popup instead. */
on(eventType: "focus", handler: ()=>void): void;
/** Listens for an event.
Please use the `onXyz` methods on Popup instead. */
on(eventType: "blur", handler: ()=>void): void;
/** Listens for an event.
Please use the `onXyz` methods on Popup instead. */
on(eventType: "translationToggled", handler: (event: TranslationToggledEvent)=>void): void;
/** Listens for an event.
Please use the `onXyz` methods on Popup instead. */
on(eventType: "keyup", handler: (event: KeyEvent)=>void): void;
/** Triggers when the popup is closed by the user
Only gets triggered when the user performs an action to close the popup, eg when they click the "X" on the launcher or, if enabled, in the popup header. This event is not triggered when you call Popup.hide or Popup.destroy. */
onClose(handler: ()=>void): Subscription;
/** Triggers when the popup is opened by the user
Only gets triggered when the user performs an action to open the popup. This event is not triggered when you call Popup.show or when you Popup.mount it with the `{show: true}` option. */
onOpen(handler: ()=>void): Subscription;
/** Shows the Popup
Use this to show a popup that was previously hidden or mounted with a parameter `show: false`. Note: does nothing on unmounted popups. Make sure you call Popup.mount once before you call `show()` or Popup.hide. */
show(): void;
}

## HtmlPanelOptions
/** */
export interface HtmlPanelOptions  {
/** 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. */
conversation?: Conversation|ConversationBuilder|string;
/** Optional, defaults to 100 (px). */
height?: number;
/** 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. */
show?: boolean;
/** 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. */
url: string;
}

## SelectConversationOptions
/** Selection parameters. */
export interface SelectConversationOptions  {
/** can be used to select the conversation as a guest, with limited functions */
asGuest?: boolean;
/** can be used to scroll to a specific message */
messageId?: string;
}

## UserPresence
/** */
export interface UserPresence  {
/** This is an additional parameter to store the custom fields that you may want to use in the REST API call.
Set any property to `null` to delete the existing value (if any). When omitted or `undefined`, the existing value remains unchanged. */
custom?: {
[name: string]: string|null;
}|null;
/** Manually sets the information about the visibility of TalkJS. This is useful when TalkJS is hidden with CSS. TalkJS will assume that UIs marked `visible: false` cannot be seen, and thus messages arriving on this UI will not be marked as read until you set `visible` to true again.
When omitted or `undefined`, the existing value remains unchanged. */
visible?: boolean;
}