Skip to main content

​
SDK methods

After the SDK loads (via script embed or ES module), a global window.tinytalk object is available for programmatic control.
MethodDescription
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

EventDescription
messenger.home.newConversationNew conversation started from the Home tab
messenger.messages.newConversationNew conversation started from the Messages tab
messenger.chat.sendMessageMessage sent in the chat
messenger.home.closeMessenger closed from the Home tab
messenger.messages.closeMessenger closed from the Messages tab
messenger.chat.closeMessenger closed from the Chat tab
messenger.chat.leadFormFieldFilledA lead form field was filled in
messenger.chat.leadFormSubmittedLead 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.