Introduction

This guide shares the configuration options you can use to change the messenger layout and behaviour.

All configuration options should be defined on page load. Changing them later will have no effect.

The config object can be used to define/override messenger options generated using the embed code. Below is the list of all the options.

<script>
 // Kayako messenger embed code ...
</script>
<script>
// example configuration override
kayako.config = {
      hideLauncher: false,
      forceLocale: 'fr',
      hideReplyTime: false,
      styles: {
        primaryColor: '#ee16a4'
        ...
      }
  }
<script>

Available options

hideLauncher

Hide the messenger launcher to use a custom button for toggling messenger.

kayako.config = {
  hideLauncher: true  
}

forceLocale

Kayako messenger automatically change to the user language if you have enabled it for Help Center. You can stop/customize this behaviour by forcing language using the configuration.

kayako.config = {
  forceLocale: 'fr_FR'
}

This also opens the possibility of changing the messenger language based upon your users preference.

launcherIcon

The launcher icon can also be customised by passing URL to an image.

kayako.config = {
  launcherIcon: 'http://path/to/custom/image.png'
}

primaryColor

The messenger primary colour is set when you generate the embed code from the admin interface. Also you can override it without touching the embed code.

kayako.config = {
  styles: {
    primaryColor: '#F1703F'
  }
}

Just like primaryColor following styles can be overridden as well.

kayako.config = {
  styles: {
    homeBackground: '#40364D',
    homePattern: 'http://path/to/image',
    homeTextColor: '#fff'
  }
}

Home screen title

You can also customize messenger title and welcome message for a fine tuned experience.

kayako.config = {
  homeTitles: [
    {
      locale: 'en-us',
      translation: 'Hello 👋'
    },
    {
      locale: 'de',
      translation: 'Hallo 👋'
    }
  ]
}

Home screen welcome text

kayako.config = {
  homeSubtitles: [
    {
      locale: 'en-us',
      translation: 'Welcome to ABCâ„¢ Support. Start a new conversation below.'
    },
    {
      locale: 'de',
      translation: 'Willkommen bei ABCâ„¢ Support. Starten Sie unten eine neue Unterhaltung.'
    }
  ]
}