Talk messenger methods

When the Talk messenger widget is enabled on your website, you can choose to control it’s behavior programmatically.

Depending on your needs, the messenger methods described on this page can be:

A full list of the available methods and events is located at Talk JavaScript API.


Firstly, ensure that the Talk messenger widget is turned ON in Ortto, via Settings  Talk messenger.

Add Talk messenger methods to your website’s JavaScript

Any of the available Talk methods and events can be added to your website’s JavaScript.

The Talk messenger widget loads asynchronously, so you may wish to use the talk.ready flag to check whether it is already loaded:

//talk.ready flag;

//print to notify when ready
const notifyWhenReady = () => {

then, to be notified, listen for the ready event:

//notify when ready'ready', notifyWhenReady);
//stop notifying'ready', notifyWhenReady);

When the widget is ready, you can add any of the following methods to your site’s JavaScript to modify the widget’s behavior:

//open the widget'open');
//close the widget'close');
//hide the widget'hide');
//show the widget'show');

Add Talk messenger commands to your tracking code

If you are using commands that include, e.g.'show');, you may want to run those commands in your tracking code instead. This might be necessary if the Talk messenger widget is loading slowly on your website and is not yet available (undefined).

Adding commands to the tracking code will ensure that your commands are called when our capture script (and therefore the Talk messenger widget) is loaded, and avoids calling non-existent Talk methods.

You can add commands to the push method of the ap3c.cmd array of the tracking code.

For example, you want to change the chat icon to have a seasonal theme. You can add a set:style command to ap3c.cmd.push, similar this:

ap3c.cmd.push(() =>'set:style', { <add styling here> }));

Another example shows commands to notify when the Talk messenger widget is ready:

      ap3c.cmd.push(() => {
        const setReady = () => {
          const readyStateEl = document.getElementById("js-ready-state");
          readyStateEl.textContent = "ready";
        if ( {
        } else {
"ready", setReady);
          window.addEventListener("beforeunload", () => {
            // to remove event listener, use
  "ready", setReady);

Modify the Talk messenger widget icon container

If required, you can modify the Talk messenger widget icon container like so:

  container: {
    backgroundColor: 'red',
    border: '1px solid blue',