SDK Reference

SDK methods

After the SDK loads (via script embed or ES module), a global window.tinytalk object is available for programmatic control.

Method	Description
`toggle()`	Opens the messenger if hidden, closes it if visible

More methods will be added soon.

toggle()

<button onclick="window.tinytalk.toggle()">
  Chat with us
</button>

PostMessage events

The messenger emits events via postMessage that you can listen to from the parent page. This lets you react to user actions — for example, tracking conversions, triggering analytics, or showing a confirmation.

Listening for events

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://dashboard.tinytalk.ai') return;

  console.log(event.data.type); // e.g. "messenger.chat.sendMessage"
});

Always check event.origin before acting on postMessage events to avoid processing messages from untrusted sources.

Available events

Event	Description
`messenger.home.newConversation`	New conversation started from the Home tab
`messenger.messages.newConversation`	New conversation started from the Messages tab
`messenger.chat.sendMessage`	Message sent in the chat
`messenger.home.close`	Messenger closed from the Home tab
`messenger.messages.close`	Messenger closed from the Messages tab
`messenger.chat.close`	Messenger closed from the Chat tab
`messenger.chat.leadFormFieldFilled`	A lead form field was filled in
`messenger.chat.leadFormSubmitted`	Lead form was submitted

Example: track new conversations

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://dashboard.tinytalk.ai') return;

  if (event.data.type === 'messenger.chat.leadFormSubmitted') {
    // Send to your analytics
    analytics.track('lead_captured');
  }
});

Styling and Shadow DOM

The messenger widget renders inside a Shadow DOM. This means:

Your page’s CSS cannot override the messenger’s styles — custom stylesheets, global resets, and CSS frameworks like Tailwind or Bootstrap will not affect the widget.
The messenger’s styles won’t leak into your page — no risk of conflicts with your existing design.

This is by design. The Shadow DOM boundary ensures the messenger looks and works the same on every site, regardless of what CSS is loaded on the page. To customize the messenger’s appearance (colors, launcher icon, welcome message, etc.), use the settings under Messenger → Appearance.

Live demo

See the SDK in action — script embed, iframe embed, toggle button, and postMessage events — in this interactive CodePen:

Tiny Talk Demo

Live example with messenger widget, iframe embed, and event listeners.

Getting Started

Features

Integrations

Workspace & Team

Billing

SDK methods

toggle()

PostMessage events

Listening for events

Available events

Example: track new conversations

Styling and Shadow DOM

Live demo

Tiny Talk Demo

​SDK methods

​toggle()

​PostMessage events

​Listening for events

​Available events

​Example: track new conversations

​Styling and Shadow DOM

​Live demo

Tiny Talk Demo

SDK methods

toggle()

PostMessage events

Listening for events

Available events

Example: track new conversations

Styling and Shadow DOM

Live demo