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 badge

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