Custom made launcher

The first step is to set the takuSettings.custom_launcher configuration. This can be any valid CSS selector. So, if you'd like a specific element to serve as your launcher button, you can do it like this:

1
window.Taku('news:boot', {
2
  api_public_key: 'Your public API key. You will get it after sign up.',
3
  custom_launcher: '#taku-launcher'
4
});

Then, you'll need to add this id or class attribute to your HTML element that you want to use as the launcher button. For example:

1
<button id="taku-launcher">Click me!</button>

Show unread messages badge

You'll likely want to show a red alert when there are new messages in Taku that haven't been seen by your users. With a custom launcher, you'll need to manually enable this. To do this, you'll have to respond to Taku events: badge:show and badge:hide, and modify your custom launcher based on these events.

Here's an example of what it might look like:

1
window.Taku('news:on', 'badge:show', function() {
2
  // This is just an example, you can do it any way you want
3
  document.querySelector('#taku-launcher').classList.add('badge');
4
});
5

6
window.Taku('news:on', 'badge:hide', function() {
7
  document.querySelector('#taku-launcher').classList.remove('badge');
8
});

And if you want to use some pre-made CSS for the unread messages badge, you can use what we've got in Taku:

1
#taku-launcher {
2
  position: relative;
3
}
4

5
#taku-launcher::before {
6
  content: '';
7
  position: absolute;
8
  /* adjust position to fit your launcher */
9
  top: -3px;
10
  right: -3px;
11
  width: 17px;
12
  height: 17px;
13
  border-radius: 17px;
14
  background-color: #f64b4b;
15
  pointer-events: none;
16
  transform: scale(0);
17
  transition: transform 200ms;
18
}
19

20
#taku-launcher.badge::before {
21
  transform: scale(1);
22
}

That's it! You now have your very own, fully personalized Taku launcher button!