• Translate

11/02/2017

How To Install Chat Admin From Chatra With Load OnClick Event

Tutorial Blogspot |

Advertisement

How To Install Chat Admin From Chatra With Load OnClick Event
One of the free chat widget admin that can be installed on the blog is a chat widget from Chatra.io with easy code installation with asynchronous. But for those of you who really care about loading blogs, still asynchronous still props.

For that I made a tutorial to install chat admin from Chatra with load onClick event so that js from this new chat will terload after button admin chat is clicked so really do not disturb loading blog.

For the demo please try chat admin on the following JsFiddle:


If you are interested to try it please follow the steps below.

1. Signup the Chatra Widget

Please signup Chatra widget at https://chatra.io/ by entering your email then click Sign Up button. Then please check your email, will enter an email from Chatra that includes the widget code, please note the code. Usually the widget code is as follows:
<!-- Chatra {literal} -->
<script>
    (function(d, w, c) {
        w.ChatraID = 'v6kwrLJ6ko3NZGMrS';
        var s = d.createElement('script');
        w[c] = w[c] || function() {
            (w[c].q = w[c].q || []).push(arguments);
        };
        s.async = true;
        s.src = (d.location.protocol === 'https:' ? 'https:': 'http:')
        + '//call.chatra.io/chatra.js';
        if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->

2. Modifying Widgets With OnClick Event

After getting the widget code it is time to modify the widget with onclick event.

Please attach the following code above the code </body>
<a class="chat-admin" id="chatadmin" href="javascript:void" onclick="loadHangout()">
  <svg viewBox="0 0 24 24">
    <path fill="#3d3c3f" d="M17,11H15V9H17M13,11H11V9H13M9,11H7V9H9M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" />
  </svg> Chat with Admin</a>
<!-- Chatra {literal} -->
<script>
//<![CDATA[
  function loadHangout() {
    var e = document.getElementById("chatadmin");
    e.style.display = "none";
    (function(d, w, c) {
      w.ChatraID = 'v6kwrLJ6ko3NZGMrS';
      var s = d.createElement('script');
      w[c] = w[c] || function() {
        (w[c].q = w[c].q || []).push(arguments);
      };
      s.async = true;
      s.src = (d.location.protocol === 'https:' ? 'https:' : 'http:') + '//call.chatra.io/chatra.js';
      if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');

  }
  //]]>
</script>
<!-- /Chatra {/literal} -->

Replace the code I marked with your widget code obtained from the first step. Then please save the following css code above code </head>  
<style>
.chat-admin {
  position: fixed;
  bottom: 0;
  right: 25px;
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  background-color: #fdfcff;
  overflow: hidden;
  font-size: 16px;
  color: #3d3c3f;
  text-decoration: none;
  z-index: 9999;
}
.chat-admin svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
</style>

Done, now just check the look of his chat button on the bottom right of your blog. To manage chat, please login on Chatra's dashboard.

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.