<tori-popup>

<tori-popup> renders a floating launcher and popup chatbox.

<script type="module" src="https://asktori.ai/cdn/tori-latest.js"></script>

<tori-popup
  app-id="APP_ID"
  agent-id="AGENT_ID"
></tori-popup>

Attributes and properties

app-id

Required. The Tori app ID used by this popup.

JavaScript property: appId

agent-id

Required. The Tori agent ID that should handle conversations started from this popup.

JavaScript property: agentId

user-id

Optional. The end user's stable Tori user ID. Must start with user-.

JavaScript property: userId

Provide this together with token to identify a known user. Omit both user-id and token to use anonymous visitor mode.

token

Optional. A TalkJS authentication JWT for the provided user-id.

JavaScript property: token

Optional when tokenFetcher is provided. Supplying an initial token avoids an extra request while the popup starts. Generate this token on your server. See the TalkJS authentication docs.

tokenFetcher

Optional function property for logged-in users. It should fetch and return a JWT for the same user-id. Tori uses it for the initial token when token is omitted and before a short-lived token expires.

Assign it as a JavaScript property:

const popup = document.querySelector("tori-popup");

popup.tokenFetcher = async () => {
  const response = await fetch("/api/tori-token", { method: "POST" });
  const { token } = await response.json();
  return token;
};

resume-conversation

Optional boolean. Defaults to true.

JavaScript property: resumeConversation

When false, the popup starts with a new conversation on initial load even if an existing conversation is stored for this browser tab. This option is only used while the popup chooses its initial conversation.

show-launcher

Optional boolean. Defaults to true.

JavaScript property: showLauncher

Set to false to hide the built-in launcher button.

<tori-popup
  app-id="APP_ID"
  agent-id="AGENT_ID"
  show-launcher="false"
></tori-popup>

open

Optional boolean. Defaults to false.

JavaScript property: open

Controls whether the popup is open.

<tori-popup
  app-id="APP_ID"
  agent-id="AGENT_ID"
  open
></tori-popup>

fullscreen

Optional. Defaults to auto.

JavaScript property: fullscreen

Accepted values:

• auto: fullscreen on small screens, floating on larger screens
• true: always fullscreen
• false: always floating

onOpenChange

Optional function property. Called whenever the popup open state changes.

This must be assigned as a JavaScript property:

const popup = document.querySelector("tori-popup");

popup.onOpenChange = (open) => {
  console.log(open);
};

Read-only properties

userId

The active Tori user ID, or null before the session is ready.

For anonymous visitors, this is the generated anonymous user ID.

conversationId

The active conversation ID, or null before a conversation has been selected.

Methods

startNewConversation()

Starts a new conversation and returns the new conversation ID.

const popup = document.querySelector("tori-popup");
const conversationId = popup.startNewConversation();