To use any element on your webpage as Taku widget launcher follow this steps:

• Go to “Widget Customization” page and then to “Launcher” section.
• Choose “Custom element on page” option in “Launcher type” field.
• Then enter “Custom element selector” which should be a valid selector of your page element.
• If you want to show red bubble on your custom element — toggle “Show badge notification on custom element”
• After that press “Save” and everything should be done.

Custom unread messages badge

If you want to also show custom badge when there are unread messages, 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!