Chat Widget

The chat widget is a full-page or large overlay chat interface that opens when a visitor clicks the chat button on your site. It provides a rich conversation experience with your agent.

Feature	Corner Button	Chat Widget
Size	Small bubble in the corner	Full panel (covers part of the page)
Interaction	Quick messages	Full conversation with history
Customization	Color, position, icon	Color, size, position, greeting, avatar
Best for	Quick help, simple questions	In-depth conversations, support flows

The corner button is the trigger. The chat widget is the conversation panel that opens when the button is clicked.

Configuration

Appearance

Setting	Options	Default
Widget width	360px - 480px	400px
Widget height	480px - 720px	600px
Position	Bottom-right, Bottom-left	Bottom-right
Theme	Light, Dark, Auto (matches system)	Light
Primary color	Any hex color	Your brand color
Border radius	0px - 24px	16px

Content

Setting	Description
Welcome message	First message shown when the widget opens
Placeholder text	Input field placeholder ("Ask me anything...")
Header title	Widget header text (your agent's name)
Header subtitle	Below the title ("Typically replies in seconds")
Avatar	Agent avatar shown in the header and with messages

Behavior

Setting	Options
Auto-open	Open the widget automatically after N seconds (or never)
Open on page load	Start with the widget open
Sound	Play a sound when the agent responds
Typing indicator	Show "Agent is typing..." animation
Conversation persistence	Remember conversation across page navigations
Close button	Show/hide close button in header

Embed code

<!-- Add before </body> -->
<script
  src="https://embed.tinycommand.com/agent.js"
  data-agent-id="YOUR_AGENT_ID"
  data-position="bottom-right"
  data-primary-color="#1c3693"
  data-auto-open="false"
></script>

Available data attributes

Attribute	Description
`data-agent-id`	Your agent's ID (required)
`data-position`	`bottom-right` or `bottom-left`
`data-primary-color`	Hex color for the widget theme
`data-auto-open`	`true` or `false`
`data-auto-open-delay`	Seconds before auto-opening (e.g., `5`)
`data-greeting`	Custom welcome message
`data-theme`	`light`, `dark`, or `auto`
`data-hide-launcher`	`true` to hide the corner button (for custom triggers)

JavaScript API

Control the widget programmatically:

// Open the widget
TinyAgent.open();

// Close the widget
TinyAgent.close();

// Toggle open/close
TinyAgent.toggle();

// Send a message programmatically
TinyAgent.sendMessage("I need help with billing");

// Set user context (for personalization)
TinyAgent.setUser({
  name: "Sarah Chen",
  email: "sarah@acme.com",
  plan: "Enterprise"
});

// Listen for events
TinyAgent.on('open', () => console.log('Widget opened'));
TinyAgent.on('close', () => console.log('Widget closed'));
TinyAgent.on('message', (msg) => console.log('Message:', msg));

Custom trigger buttons

Hide the default corner button and trigger the widget from your own UI:

<script src="https://embed.tinycommand.com/agent.js"
  data-agent-id="YOUR_AGENT_ID"
  data-hide-launcher="true">
</script>

<button onclick="TinyAgent.open()">
  Chat with us
</button>

Conversation persistence

When Conversation persistence is enabled:

Conversations survive page navigation (the user can browse your site and continue chatting)
Conversation history is stored in the browser's localStorage
History clears when the user clears browser data or after 30 days of inactivity
Each unique browser/device gets its own conversation thread

Tip

Use TinyAgent.setUser() to pass the logged-in user's information to your agent. This lets the agent personalize responses and look up the user's account data without asking them to identify themselves.

Note

The chat widget loads asynchronously and doesn't block your page's initial render. The script size is under 30KB gzipped, with no impact on Core Web Vitals.