Custom Launcher

By default, Kayako messenger shows a bubble launcher to maximize and minimize the messenger window. If required you can hide the launcher icon and instead define your own launcher.

Toggling Messenger

Let's start by building a toggle button which can be used in place of launcher icon to maximise and minimise the messenger.

<a href="" onclick="toggleMessenger(event)"> Need help? </a>

Next, let's make sure the default launcher is hidden by default.

kayako.ready(function () {
  kayako.config = {
    hideLauncher: true
  }
})

Finally create the toggleMessenger method, which will use the Javascript API to toggle the messenger state.

function toggleMessenger (e) {
  if (kayako.visibility() === 'minimized') {
    kayako.maximize()
  } else {
    kayako.minimize()
  }
  e.preventDefault()
}

Moving A Step Ahead

Let's say you also want to show a count of unread messages next to the launcher element so that the user knows when they have received a new message and click the button to open the messenger and read the message(s).

<a href="" onclick="toggleMessenger(event)">
    Need help? 
    <span id="kayako-unread-counts"></span>
</a>

Finally, listen for unread counts event and update the span element.

kayako.ready(function () {
  kayako.hideLauncher = true

  // listen for realtime updates
  kayako.on('unread_messages_count_changed', function (count) {
    const element = document.getElementById('kayako-unread-counts')

    if (count > 0) {
      var suffix = count === 1 ? '' : 's'
      element.style.display = 'block'
      element.innerHTML = count + ' new message' + suffix
    } else {
      element.style.display = 'none'
    }

  })

})

Above you listened for unread_messages_count_changed and update the span element HTML with the messages count, and hide the element when there are no unread messages.