Chatonio

This is taking longer than usual.

Chatonio

Web chat widget: controlling the chat from your site's code

October 26, 2026 4 viewsChannels & Integrations

Everything here goes into your own site's HTML or JavaScript, next to the embed snippet from Setting Up the Web Chat Widget. To remove the corner button itself, choose No launcher; see Web chat widget: choosing a launcher.

Opening the chat from your own button

Three ways, all of which work with any launcher style and are most useful with No launcher:

  • Add data-chatonio to any element. On its own it opens the chat; you can also set it to open, close or toggle.
  • Link to #chatonio, or to #chatonio-open, #chatonio-close, #chatonio-toggle.
  • Call chatonio('open'), chatonio('close') or chatonio('toggle') from your own code.
<button data-chatonio>Chat with us</button>
<a href="#chatonio">Chat with us</a>

Before calling chatonio(...) from your own JavaScript, add this line above the embed snippet, because the widget script loads asynchronously and the function does not exist until it has run:

<script>window.chatonio = window.chatonio || function(){ (chatonio.q = chatonio.q || []).push(arguments) }</script>

A click or a call made before the widget has finished loading is held and replayed once it is ready, so a button clicked immediately still works; if several arrive first, the most recent one wins. Triggers are matched on the page as a whole, so a button rendered later by a menu, a CMS block or a single-page app needs no extra setup. Ordinary link behaviour is left alone: Cmd-click or Ctrl-click on <a href="#chatonio"> still opens a browser tab. If a proactive greeting is waiting, opening the chat this way engages it rather than discarding it.

Starting the conversation with a message

A button can also bring a message with it, so a visitor who clicks "Get a quote" lands in the chat already asking about a quote. Add data-chatonio-message to the element. What happens next depends on the value of data-chatonio:

  • Fill in the message — data-chatonio on its own, or open. The chat opens with your text already in the message box. The visitor can change it, and nothing is sent until they press Send.
  • Send the message — data-chatonio="send". The chat opens and the message is sent straight away, as if the visitor had typed it, and the assistant starts answering.
<button data-chatonio data-chatonio-message="I'd like a quote for 50 seats">Get a quote</button>
<button data-chatonio="send" data-chatonio-message="Do you integrate with Telegram?">Ask about Telegram</button>

The same works from your own code: chatonio('open', 'your text') fills the message in, and chatonio('send', 'your text') sends it.

Good to know:

  • The pre-chat form still comes first. If your channel asks for a name, email or other details before chatting, a visitor who hasn't given them yet sees the form first, with the message that is about to be sent shown above it. The message goes out as soon as they submit the form. Visitors who already filled the form in are not asked again.
  • Clicking twice doesn't send twice. If the visitor's last message already says the same thing, the button just opens the chat.
  • Your team can tell. In the inbox, a message sent by a button is marked Sent by a button on your site, so nobody mistakes it for something the visitor typed. To tell your buttons apart, give each one a label: data-chatonio-ref="pricing-page", or chatonio('send', 'your text', { ref: 'pricing-page' }). The label appears next to the mark; visitors never see it.
  • If the visitor's previous conversation has ended, a send button starts a new one.
  • A message can be up to 4,096 characters. A send button without a message simply opens the chat.

Use send for clear one-click questions, and the fill-in version when the visitor will probably want to add something, such as an order number. A short reminder of all this sits on your web chat channel's page, under Open the chat from your own buttons.

Running the widget inside your own app

If your mobile or desktop app shows your website inside a built-in browser (a WebView), you can tell Chatonio so. Visitors then appear under your app’s name in Live visitors, on the conversation’s visitor panel and in the Apps tab of Insights, instead of as an ordinary browser. Add data-app (and, optionally, data-app-version) to the embed snippet on the pages your app opens:

<script async src="https://chatonio.com/widget/loader.js" data-channel-id="YOUR-CHANNEL-ID" data-app="Acme iOS" data-app-version="2.4.1"></script>

Add these attributes only when the page is actually running inside your app — for example, have your app add a marker to its user agent or to the address it opens, and include the attributes when you see it. Once a visitor has been identified as being in your app, their later pages keep that label even if one of them leaves the attributes out.

Well-known in-app browsers need nothing from you: Chatonio recognises Instagram, Facebook, Messenger, TikTok, Telegram, WeChat, VK, the Google and Yandex apps and others automatically, and shows any other built-in browser as Other app.

Signing visitors in

Two more commands sign the chat in as your site's signed-in user and out again: chatonio('login', …) and chatonio('logout'). They need a pass from your server and are available on paid plans. See Web chat widget: signing visitors in with their account.

Was this article helpful?