diff --git a/layout/_partials/post/post-reward.njk b/layout/_partials/post/post-reward.njk
index 2db383c..ba332de 100644
--- a/layout/_partials/post/post-reward.njk
+++ b/layout/_partials/post/post-reward.njk
@@ -1,6 +1,6 @@
 <div class="reward-container">
   <div>{{ page.reward_settings.comment }}</div>
-  <button onclick="document.querySelector('.post-reward').classList.toggle('active');">
+  <button>
     {{ __('reward.donate') }}
   </button>
   <div class="post-reward">
diff --git a/layout/_partials/sidebar/site-overview.njk b/layout/_partials/sidebar/site-overview.njk
index 41e472c..47bea75 100644
--- a/layout/_partials/sidebar/site-overview.njk
+++ b/layout/_partials/sidebar/site-overview.njk
@@ -62,10 +62,8 @@
 
 {%- if theme.chat.enable and (theme.chatra.enable or theme.tidio.enable or theme.gitter.enable) %}
   <div class="sidebar-button site-overview-item animated">
-  {%- if theme.chatra.enable %}
-    <button onclick="Chatra('openChat', true);">
-  {%- elif theme.tidio.enable %}
-    <button onclick="tidioChatApi.open();">
+  {%- if theme.chatra.enable or theme.tidio.enable %}
+    <button>
   {%- elif theme.gitter.enable %}
     <button class="js-gitter-toggle-chat-button">
   {%- endif %}
diff --git a/layout/_third-party/chat/tidio.njk b/layout/_third-party/chat/tidio.njk
index 3ba22a5..8b222cf 100644
--- a/layout/_third-party/chat/tidio.njk
+++ b/layout/_third-party/chat/tidio.njk
@@ -1 +1,2 @@
 <script src="//code.tidio.co/{{ theme.tidio.key }}.js"></script>
+{{ next_js('third-party/chat/tidio.js') }}
diff --git a/source/js/next-boot.js b/source/js/next-boot.js
index 2bd8a64..f55ef51 100644
--- a/source/js/next-boot.js
+++ b/source/js/next-boot.js
@@ -76,6 +76,7 @@ NexT.boot.refresh = function() {
   NexT.utils.registerActiveMenuItem();
   NexT.utils.registerLangSelect();
   NexT.utils.registerSidebarTOC();
+  NexT.utils.registerPostReward();
   NexT.utils.wrapTableWithBox();
   NexT.utils.registerVideoIframe();
 };
diff --git a/source/js/third-party/chat/chatra.js b/source/js/third-party/chat/chatra.js
index 66736a9..e495b8e 100644
--- a/source/js/third-party/chat/chatra.js
+++ b/source/js/third-party/chat/chatra.js
@@ -1,10 +1,19 @@
-/* global CONFIG */
+/* global CONFIG, Chatra */
 
-if (CONFIG.chatra.embed) {
-  window.ChatraSetup = {
-    mode    : 'frame',
-    injectTo: CONFIG.chatra.embed
-  };
-}
+(function() {
+  if (CONFIG.chatra.embed) {
+    window.ChatraSetup = {
+      mode    : 'frame',
+      injectTo: CONFIG.chatra.embed
+    };
+  }
 
-window.ChatraID = CONFIG.chatra.id;
+  window.ChatraID = CONFIG.chatra.id;
+
+  const chatButton = document.querySelector('.sidebar-button button');
+  if (chatButton) {
+    chatButton.addEventListener('click', () => {
+      Chatra('openChat', true);
+    });
+  }
+})();
diff --git a/source/js/third-party/chat/tidio.js b/source/js/third-party/chat/tidio.js
new file mode 100644
index 0000000..bffb918
--- /dev/null
+++ b/source/js/third-party/chat/tidio.js
@@ -0,0 +1,10 @@
+/* global tidioChatApi */
+
+(function() {
+  const chatButton = document.querySelector('.sidebar-button button');
+  if (chatButton) {
+    chatButton.addEventListener('click', () => {
+      tidioChatApi.open();
+    });
+  }
+})();
diff --git a/source/js/utils.js b/source/js/utils.js
index af7e6a2..15af8a3 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -282,6 +282,14 @@ NexT.utils = {
     });
   },
 
+  registerPostReward: function() {
+    const button = document.querySelector('.reward-container button');
+    if (!button) return;
+    button.addEventListener('click', () => {
+      document.querySelector('.post-reward').classList.toggle('active');
+    });
+  },
+
   activateNavByIndex: function(index) {
     const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
     if (!target || target.classList.contains('active-current')) return;