Sizing and styling

The Tori JavaScript SDK ships the required chat UI styles inside the bundle. You only need to style the custom element's outer box and, for the popup, its launcher placement.

Popup placement

<tori-popup> includes its own fixed-position launcher and panel. It is designed to be appended near the end of <body>.

<body>
  <!-- page content -->
  <tori-popup app-id="APP_ID" agent-id="AGENT_ID"></tori-popup>
</body>

Move the popup to the bottom-left

You can override the popup launcher and panel placement with CSS:

tori-popup .tori-popup-launcher {
  right: auto;
  left: 20px;
}

tori-popup .tori-popup-panel {
  right: auto;
  left: 20px;
}

Fullscreen mobile behavior

With the default fullscreen="auto" behavior, the popup opens fullscreen on small screens. Set fullscreen="true" or fullscreen="false" to control this explicitly:

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

Inline chatbox size

Always give <tori-chatbox> a width and height. The simplest option is an inline style attribute:

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

You can also style chatboxes with CSS:

tori-chatbox {
  width: 100%;
  height: min(760px, calc(100vh - 160px));
}