How To Make Show Hide Simple Web Chat From Tlk.io To AMP And Non AMP
How To Make Show Hide Simple Web Chat From Tlk.io To AMP And Non AMP - Simply chat or chat is a communication between 2 or more people on the internet using online media. And the chat widget on the web or blog serves as a place to chat to all blog visitors.
With chat widgets, every web or blog visitor can greet each other, ask, answer, or other conversations so that this makes a communication tool that makes the atmosphere of the web or blog more alive. And I happen to find a chat tool that is quite simple and very easy in using it. Users can sign in as anonymous with a name or log in using a Twitter or Facebook account.
This chat tool I found from tlk.io, the use is quite simple and no need to register. You just need to create a channel then the chat room was ready for use. You just share your chat room URL with your friends to join in the chat room.
And the chat widget from talk.io can be embedded in the web or blog. For that now I make this chat widget from tlk.io with show hide for AMP and Non AMP easily.
The first thing you do is make sure your channel can be created. Please go to tkl.io and please create your channel then click Join, after that please login with your Twitter or Facebook account in order to be your chat channel moderator.
Once the chat channel is created and you become a moderator, please follow the steps below to install this chat widget on your blog.
Please save the following 2 js above the code </head> or </head><!--<head/>--> and if it turns out in your blog template already there are both js, please step this step. Or if there is already js from one of them, then please equip with other js again.
Then please save the following HTML code for the chat icon to display this chat widget. Please save where you want to display it.
Please keep the following CSS in your AMP style amp-custom.
To set the location of the chat icon please set it on CSS .open-chat{position:fixed;top:20px;right:20px} which I marked above.
Then please save the following code above </body>
Please replace yourchannel code with your channel.
Finish and see the results.
Please save the following HTML code for the chat icon to display this chat widget. Please save where you want to display it.
Then please save the following code above code </body>
To set the location of the chat icon please set it on CSS .open-chat{position:fixed;top:20px;right:20px} which I marked above.
Please replace yourchannel code with your channel.
Finish and see the results.
For iframe chat it already uses script to delay loading iframe, so do not worry iframe will not interfere with loading your blog.
In this tlk.io Widget chat is of course provided for free, and you can become a cool chat widget sponsor for this chat widget can continue to be developed. Or you can donate if you like this chat widget.
Please sign in here to become a sponsor of this chat widget.
UPDATE
In chat, you can use smileys. Here's a list of smileys that can be used in this chat:
And following the format of writing:
How easy is not it? Cool also can I use AMP template? Not rigid though can not use jquery. Good luck and hopefully useful.
With chat widgets, every web or blog visitor can greet each other, ask, answer, or other conversations so that this makes a communication tool that makes the atmosphere of the web or blog more alive. And I happen to find a chat tool that is quite simple and very easy in using it. Users can sign in as anonymous with a name or log in using a Twitter or Facebook account.
This chat tool I found from tlk.io, the use is quite simple and no need to register. You just need to create a channel then the chat room was ready for use. You just share your chat room URL with your friends to join in the chat room.
And the chat widget from talk.io can be embedded in the web or blog. For that now I make this chat widget from tlk.io with show hide for AMP and Non AMP easily.
The first thing you do is make sure your channel can be created. Please go to tkl.io and please create your channel then click Join, after that please login with your Twitter or Facebook account in order to be your chat channel moderator.
Once the chat channel is created and you become a moderator, please follow the steps below to install this chat widget on your blog.
1. For Blog AMP
Please save the following 2 js above the code </head> or </head><!--<head/>--> and if it turns out in your blog template already there are both js, please step this step. Or if there is already js from one of them, then please equip with other js again.
<script async="" custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async="" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Then please save the following HTML code for the chat icon to display this chat widget. Please save where you want to display it.
<span aria-label='Open Chat' class='open-chat' on='tap:chat-kompi.show,chat-iframe.show,chat-box' role='button' tabindex='0'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M9,9H19V11H9V9M9,13H17V15H9V13Z' fill='#333'/></svg></span>
Please keep the following CSS in your AMP style amp-custom.
.chat-box-fixed{background:#fff;position:fixed;top:0;right:0;bottom:0;height:100%;height:100vh;width:300px;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;overflow:visible}
.close-chat:active,.close-chat:focus,.open-chat:active,.open-chat:focus{outline:0}
.close-chat{position:absolute;top:0;left:-25px;width:25px;height:25px;line-height:20px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2}
.chat-box-fixed amp-iframe{height:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0}
.lightbox-chat{background:rgba(0,0,0,.3);width:100%;height:100%;position:absolute}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.open-chat{position:fixed;top:20px;right:20px}.open-chat svg{vertical-align:middle;cursor:pointer}
.open-chat:hover svg path{fill:#2B0C93;transition:all .4s ease-in-out}
@media screen and (max-width:320px){.chat-box-fixed,.chat-box-fixed amp-iframe{width:280px;}}
To set the location of the chat icon please set it on CSS .open-chat{position:fixed;top:20px;right:20px} which I marked above.
Then please save the following code above </body>
<amp-lightbox id='chat-box' layout='nodisplay'>
<div aria-label='Close Chat Box' class='lightbox-chat' on='tap:chat-kompi.hide,chat-iframe.hide,chat-box.close' role='button' tabindex='0'>
<div class='chat-box-fixed' hidden='' id='chat-kompi'>
<div aria-label='Close Chat Box' class='close-chat' on='tap:chat-kompi.hide,chat-iframe.hide,chat-box.close' role='button' tabindex='0'>&times;</div>
<amp-iframe frameborder='0' height='300' hidden='' id='chat-iframe' layout='responsive' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/KompiAjaib/chat/master/kompi_tlkchat.html?channel=yourchannel' width='600'>
<amp-img height='100vh' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCo2esRlPEj1USU3zG6lYBQC6cQPqRsSsN5zPqJUvRm7NmhF6o_iuz4zS1d3GXxK9mVfTROG85uyNzVdok3nFjRtUBQCbS3e6sEZQ5zWoU59BMftJ_6qedQtZTHYtzTh9i9AS-6264WM/s1600/placeholder.png' width='auto'/></amp-iframe>
</div>
</div>
</amp-lightbox>
Please replace yourchannel code with your channel.
Finish and see the results.
2. For Non AMP blog
Please save the following HTML code for the chat icon to display this chat widget. Please save where you want to display it.
<span class='open-chat' onclick='loadChatbox()'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M9,9H19V11H9V9M9,13H17V15H9V13Z' fill='#333'/></svg></span>
Then please save the following code above code </body>
<style>
#chat-box,#chat-kompi{display:none}
#chat-box{position:fixed!important;z-index:1000;top:0!important;left:0!important;bottom:0!important;right:0!important}
.chat-box-fixed{background:#fff;position:fixed;top:0;right:0;bottom:0;height:100%;height:100vh;width:300px;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;overflow:visible}
.close-chat:active,.close-chat:focus,.open-chat:active,.open-chat:focus{outline:0}
.close-chat{position:absolute;top:0;left:-25px;width:25px;height:25px;line-height:20px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2}
.chat-box-fixed iframe{height:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0}
.lightbox-chat{background:rgba(0,0,0,.3);width:100%;height:100%;position:absolute}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.open-chat{position:fixed;top:20px;right:20px}.open-chat svg{vertical-align:middle;cursor:pointer}
.open-chat:hover svg path{fill:#2B0C93;transition:all .4s ease-in-out}
body.flow{overflow:hidden;position:relative;}
@media screen and (max-width:320px){.chat-box-fixed,.chat-box-fixed amp-iframe{width:280px;}}
</style>
<div id='chat-box'>
<div class='lightbox-chat' onclick='document.getElementById("chat-box").style.display="none";document.getElementById("chat-kompi").style.display="none";document.body.classList.remove("flow")'>
<div class="chat-box-fixed" id="chat-kompi">
<script>
//<![CDATA[
document.write('<div id="chat-kompi-in">')
document.write('<!--<iframe frameborder="0" height="300" id="chat-iframe" src="https://cdn.rawgit.com/KompiAjaib/chat/master/kompi_tlkchat.html?channel=yourchannel" width="600">');
document.write('</iframe>--></div>');
function loadChatbox(){var e=document.getElementById("chat-kompi-in");e.innerHTML=e.innerHTML.replace('<!--','').replace('-->','');var e=document.getElementById("chat-box");e.style.display="block";var e=document.getElementById("chat-kompi");e.style.display="block";var body = document.body;body.classList.add("flow");}
//]]>
</script>
<div class='close-chat' onclick='document.getElementById("chat-box").style.display="none";document.getElementById("chat-kompi").style.display="none";document.body.classList.remove("flow")'>&times;</div>
</div>
</div>
</div>
To set the location of the chat icon please set it on CSS .open-chat{position:fixed;top:20px;right:20px} which I marked above.
Please replace yourchannel code with your channel.
Finish and see the results.
For iframe chat it already uses script to delay loading iframe, so do not worry iframe will not interfere with loading your blog.
In this tlk.io Widget chat is of course provided for free, and you can become a cool chat widget sponsor for this chat widget can continue to be developed. Or you can donate if you like this chat widget.
Please sign in here to become a sponsor of this chat widget.
UPDATE
In chat, you can use smileys. Here's a list of smileys that can be used in this chat:
- :) = happy
- :D = laugh
- :( = unhappy
- :@ = angry
- :'( = cry
- :o = surprised
- ;) = wink
- :p = tongue
- :/ = displeased
- :| = sleep
- }:) = devil
- (y) = thumbsup
- 0:) Or o:) = saint
And following the format of writing:
- __bold__
- _italic_
- `code`
- ~~strike~~
- * list
- > blockquote
- --- hr
- [alt](link)
- 
How easy is not it? Cool also can I use AMP template? Not rigid though can not use jquery. Good luck and hopefully useful.
Post a Comment for "How To Make Show Hide Simple Web Chat From Tlk.io To AMP And Non AMP"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog