Introduction

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

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

Recommended page structure for overriding messenger 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.'
    }
  ]
}