<tori-chatbox>

<tori-chatbox> renders an inline chatbox.

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

<tori-chatbox
  app-id="APP_ID"
  agent-id="AGENT_ID"
  style="width: min(400px, 100%); height: 600px;"
></tori-chatbox>

Attributes and properties

app-id

Required. The Tori app ID used by this chatbox.

JavaScript property: appId

agent-id

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

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 chatbox 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 chatbox = document.querySelector("tori-chatbox");

chatbox.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 chatbox 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 chatbox chooses its initial conversation.

<tori-chatbox
  app-id="APP_ID"
  agent-id="AGENT_ID"
  resume-conversation="false"
></tori-chatbox>

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 chatbox = document.querySelector("tori-chatbox");
const conversationId = chatbox.startNewConversation();