Create a Chat Bot for your Website and Blogger using pure CSS
How to create a ChatBot for your Website and Blogger using pure js | Install ChatBot on your website
A chatbot is a programmed chat interface a website visitor can interact with. They are programmed to closely mimic human behavior and interact with the website visitor in a conversational manner
Follow the steps :
Step 1 :
Copy the HTML code
----------------HTML-----------------------
<b:if cond='data:view.isHomepage'>
<div class='hide' id='at-chat'>
<div id='app'>
<div class='bg-dark' id='headerchat'>
<div class='chat_option'>
<div class='header_img'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHffyL9Pot8kIgmL6S47pGp0WP5Fgpg9J9_Uau01Kz16_kqvB_G6pFH_n1EDLMEgstpyQTXJuMv6P2_pasqVoqXKI-x4nI99H7TDsnBHcsNweiWZg9pONbOLWgqLKOPb927HjBBBgQKUA/s320/%2523theraza24.jpg'/>
</div>
<span id='chat_head'>Raza</span> <br/> <span class='agent'>Bot</span> <span class='online'>(Online)</span>
<span class='chat_fullscreen_loader' id='chat_fullscreen_loader' style='display: block;'><i class='fullscreen zmdi zmdi-window-maximize'/></span>
</div>
<div class='close-chat' href='javascript:void'>×</div>
</div>
<div id='message-board'>
</div>
<div class='bg-light' id='form'>
<div id='filters' style='display: none;'>
<span class='list-f'>Template</span>
<span class='list-f'>Appsource</span>
<span class='list-f'>instagram</span>
<span class='list-f'>twitter</span>
<span class='list-f'>Author</span>
<span class='list-f'>More</span>
</div><div><svg class='btn-transparent btn-icon far fa-grin' id='fltr-i' style='width:35px;height:27px' viewBox='0 0 24 24'>
<path d='M12 12V19.88C12.04 20.18 11.94 20.5 11.71 20.71C11.32 21.1 10.69 21.1 10.3 20.71L8.29 18.7C8.06 18.47 7.96 18.16 8 17.87V12H7.97L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3H17C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L12.03 12H12M15 17H18V14H20V17H23V19H20V22H18V19H15V17Z' fill='#333'/>
</svg></div>
<div contenteditable='' id='message' placeholder='Type your message here' rows='1'/>
<div><svg class='btn-transparent btn-icon fas fa-paper-plane' id='send' type='' viewBox='0 0 448 448'><path d='M.213 32L0 181.333 320 224 0 266.667.213 416 448 224z'/></svg></div>
</div>
</div>
</div>
<div class='AT-Chatbot' href='javascript:void' title='Show Chat'><svg style='width:20px;height:17px' viewBox='0 0 24 24'>
<path d='M22 14H21C21 10.13 17.87 7 14 7H13V5.73C13.6 5.39 14 4.74 14 4C14 2.9 13.11 2 12 2S10 2.9 10 4C10 4.74 10.4 5.39 11 5.73V7H10C6.13 7 3 10.13 3 14H2C1.45 14 1 14.45 1 15V18C1 18.55 1.45 19 2 19H3V20C3 21.11 3.9 22 5 22H19C20.11 22 21 21.11 21 20V19H22C22.55 19 23 18.55 23 18V15C23 14.45 22.55 14 22 14M9.86 16.68L8.68 17.86L7.5 16.68L6.32 17.86L5.14 16.68L6.32 15.5L5.14 14.32L6.32 13.14L7.5 14.32L8.68 13.14L9.86 14.32L8.68 15.5L9.86 16.68M18.86 16.68L17.68 17.86L16.5 16.68L15.32 17.86L14.14 16.68L15.32 15.5L14.14 14.32L15.32 13.14L16.5 14.32L17.68 13.14L18.86 14.32L17.68 15.5L18.86 16.68Z' fill='currentColor'/>
</svg> Would you like some help?</div>
</b:if>
Step 2 :
Search <body> and Paste it Below Click here
Step 3 :
Copy the css and Paste it above closing </head> Tag
----------------------CSS-------------------------
<b:if cond='data:view.isHomepage'>
<style>
.chat-link{ background: #83c76d; color: #fff!important; box-shadow: 0 4px 8px rgb(0 0 0 / 10%); text-decoration: none!important; padding: 10px;padding: 5px 10px; } .list-f{ background: #fff; padding: 10px; box-shadow: 0 4px 8px rgb(0 0 0 / 10%); margin-bottom: 1px; border-radius: 3px; border: 1px solid #e0e0e0; font-size: 13px; cursor: pointer; color: #888; text-align: center; } #headerchat{ font-size: 13px;z-index: 99; font-weight: 500; color: #fff;position:relative; height: 55px; background: linear-gradient( 270deg , hsl(293, 100%, 63%), hsl(264, 100%, 61%)); border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 8px; }.chat_option .agent { font-size: 12px; font-weight: 300; }.chat_option .online { font-size: 11px; font-weight: 300;color:yellow; }#chat_head{font-size: 19px;} .chat_option img { border-radius: 50%; width: 35px; float: left; margin: 2px 20px 10px 20px; border: 2px solid #fff; }#headerchat:after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 70px; height: 65px; background: rgba(0,0,0,.040); border-radius: 70px 0 5px 0; } .chat_option { float: left; font-size: 15px; list-style: none; position: relative; height: 100%; width: 100%; text-align: relative; letter-spacing: 0.5px; font-weight: 400; } #headerchat svg { width: 35px; height: 35px; flex: 0 0 auto;fill:#fff} .AT-chat-title{padding-left: 15px; font-size: 14px; font-weight: 600;color:#fff;} .AT-chat-title span { font-size: 11px; font-weight: 400; display: block; line-height: 1.58em; margin: 0; color:#fff; } #at-chat { box-sizing: border-box !important; outline: none !important; position: fixed; width: 350px; border-radius: 10px; box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28); bottom: 90px; right: 30px; overflow: hidden; z-index: 99; animation-name: showchat; animation-duration: 1s; transform: scale(1); } .AT-Chatbot { background: linear-gradient( 270deg , hsl(293, 100%, 63%), hsl(264, 100%, 61%)); color: #fff; position: fixed; display: flex; font-weight: 400; justify-content: space-between; z-index: 98; bottom: 90px; right: 30px;cursor:pointer; font-size: 15px; padding: 10px 20px; border-radius: 5px; box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28); } .AT-Chatbot svg { transform: scale(1.2); margin: 0 10px 0 0; } .close-chat { position: absolute; top: 5px; right: 15px; color: #fff; font-size: 30px;z-index:99; } @keyframes ZpjSY { 0% { background-color: #b6b5ba; } 15% { background-color: #111; } 25% { background-color: #b6b5ba; } } @keyframes hPhMsj { 15% { background-color: #b6b5ba; } 25% { background-color: #111; } 35% { background-color: #b6b5ba; } } @keyframes iUMejp { 25% { background-color: #b6b5ba; } 35% { background-color: #111; } 45% { background-color: #b6b5ba; } } @keyframes showhide { from { transform: scale(0.5); opacity: 0; } } @keyframes showchat { from { transform: scale(0); opacity: 0; } } @media screen and (max-width: 480px) { #at-chat { width: auto; left: 5%; right: 5%; font-size: 80%; } } .hide { display: none; animation-name: showhide; animation-duration: 0.5s; transform: scale(1); opacity: 1; } .show { display: block; animation-name: showhide; animation-duration: 0.5s; transform: scale(1); opacity: 1; } .bg-dark { background: hsl(231, 50%, 50%); } .bg-light { background: hsla(231, 10%, 90%, 0.8); } .text-light { color: #f0f0f0; } .align-center { text-align: center; position: absolute; align-items: center; top: 12px;right: 127px; } .btn-transparent { border: 0; background: 0; } .btn-icon { width: 60px; height: 24px; } #app { background: #ffffff; display: grid; height: 337px; position: relative; box-sizing: border-box !important; outline: none !important; border-radius: 10px; box-shadow: 0 1px 15px rgb(32 33 36 / 28%); overflow: hidden; z-index: 99; grid-template-rows: 63px 1fr auto; } #form { display: grid; grid-template-columns: 50px auto 50px; align-items: center; } #headerchatx { position: relative; display: flex; align-items: center; padding: 30px 40px; background-color: #4dc247; } #message-board { display: grid; align-self: end; grid-auto-rows: minmax(min-content, max-content); padding: 12px 0; box-sizing: border-box; max-height: 100%; overflow-x: hidden; overflow-y: scroll;margin-bottom: 13px; } .at-chat-post { position: relative; margin: 4px 10px; padding: 10px; border-radius: 10px; font-size: .9rem; word-break: break-word; } .post-user { justify-self: right; margin-right: 16px; background: linear-gradient( 270deg , hsl(293, 100%, 63%), hsl(264, 100%, 61%)); color:#fff; } .post-bot { justify-self: left; margin-left: 16px; background: rgba(0, 0, 0, 0.03); color:#666; } .post:after { content: ''; position: absolute; right: -10px; top: 10px; width: 0; height: 0; border: 10px solid transparent; border-top: 0; } .post-user:after { right: -10px; border-left-color: rgba(255, 152, 0, 0.1); border-left: 0; } .post-bot:after { left: -10px; border-right-color: rgba(64, 83, 191, 0.1); border-right: 0; } .timestamp { font-size: .6em; opacity: .4; margin: 5px 0 -5px; display: block; } #form { padding: 6px; grid-template-rows: auto 1fr; } #filters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); padding: 16px; grid-gap: 5px; margin-bottom: -5px; } #message { padding: 5px; font-size: 1rem; min-height: 25px; max-height: 25vh; overflow: auto; background: rgba(0, 0, 0, 0.05); color:#333; font-style: italic; outline: none; resize: none; } #form.focus { background: rgba(255, 152, 0, 0.1); } #message.focus { background: rgba(255, 255, 255, 0.5); } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: hsl(231, 50%, 50%, 10%); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #b30000; }
</style>
</b:if>
Step 4 :
Copy the Java and Paste it above the </body>
---------------------JS----------------
<b:if cond='data:view.isHomepage'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(() => {
function $postMessage() { $("#message").find("br").remove(); let $message = $("#message").html().trim(); $message = $message.replace(/<div>/, "<br>").replace(/<div>/g, "").replace(/<\/div>/g, "<br>").replace(/<br>/g, " ").trim(); if ($message) { const html = `<div class="at-chat-post post-user">${$message}</span></div>`; $("#message-board").append(html); $scrollDown(); botReply($message); }; $("#message").empty(); }; $("#message").on("keyup", (event) => { if (event.which === 13) $postMessage(); }).on("focus", () => { $("#message").addClass("focus"); }).on("blur", () => { $("#message").removeClass("focus"); }); $("#send").on("click", $postMessage); function botReply(userMessage) { const reply = generateReply(userMessage); if (typeof reply === "string") postBotReply(reply); else reply.forEach((str) => postBotReply(str)); }; function postBotReply(reply) { const html = `<div class="at-chat-post post-bot">${reply}</div>`; const timeTyping = 500 + Math.floor(Math.random() * 4000); $("#message-board").append(html); $scrollDown(); }; function $scrollDown() { const $container = $("#message-board"); const $maxHeight = $container.height(); const $scrollHeight = $container[0].scrollHeight; if ($scrollHeight > $maxHeight) $container.scrollTop($scrollHeight); } $("#fltr-i").on("click", () => { $("#filters").slideToggle(300); $("#fltr-i").toggleClass("fa fa-grin far fa-chevron-down"); }); $(".list-f").on("click", (event) => { const $smiley = $(event.currentTarget).clone().contents().addClass("fa-lg"); $("#message").append($smiley); $("#message").select(); });
function generateReply(userMessage) {
const message = userMessage.toLowerCase();
let reply = [`Sorry, I don't understand you.`, `Please try again`];
// Generate some different replies
if (/^hi$|^hell?o|^howdy|^hoi|^hey|^ola/.test(message)) reply = [`Hi`, `I'm ChatBot AT, What can I do for you?`];
else if (/help|sos|emergency|support/.test(message)) reply = [`I am here to help.`, `What seems to be the problem?`];
else if (/how|what|why/.test(message)) reply = userMessage + " what?";
else if (/^huh+|boring|lame|wtf|pff/.test(message)) reply = [`<span class="far fa-dizzy fa-2x"></span>`, `I'm sorry you feel that way`, `How can I make it better?`];
else if (/bye|ciao|adieu|salu/.test(message)) reply = [`Ok, bye :)`];
else if (/template/.test(message)) reply = [`Check Our Collection`, `<a class="chat-link" href="https://logicthemes.blogspot.com/">Click Here</a>`];else if (/test/.test(message)) reply = [`Ok`, `good its working`];
else if (/test/.test(message)) reply = [`Ok`, `good its working`];
else if (/test/.test(message)) reply = [`Ok`, `good its working`];
else if (/test/.test(message)) reply = [`Ok`, `good its working`];
return reply;
};
});
$(document).on("click", ".close-chat", function() { $("#at-chat") .addClass("hide") .removeClass("show"); }), $(document).on("click", ".AT-Chatbot", function() { $("#at-chat") .addClass("show") .removeClass("hide"); });
//]]>
</script> </b:if>
---------------------------------------
Demo
Download
Demo
Download
FAQS :
Are Chatbots free?
Deploy the free chatbot for instant engagement with the online visitors and scale up your Chatbot to a paid one when you feel the need to do so. There are plenty of Free Chatbot solution providers and allow businesses to deliver great customer service 24/7.
How to create a chatbot in 3 easy steps?
1 . Enter your bot name to get started. Select the type of bot that meets your business needs.
2. Customize the chatbot the way you want. Make a chatbot in a few minutes without any coding.
3. Add Chatbot to your website or mobile app. Respond automatically to customers in real-time.
What does a chatbot do?
A chatbot is a computer program that's designed to simulate human conversation. Users communicate with these tools using a chat interface or via voice, just like they would converse with another person. Chatbots interpret the words given to them by a person and provide a pre-set answer.
Can you make money from Chatbots?
Chatbots can make passive income in a variety of ways, from affiliate marketing, ad placement, lead generation to reducing overhead by automating expensive operations such as customer support. Time and effort are required to build a truly passive bot, but with the right flows it can be profitable over time
Are Chatbots good?
Chatbots – not for all-purpose chatting
Chatbots work best when used specifically. They're great for routine tasks and commonly asked questions. That's where they're capable and convenient, and that's where they can save you time and resources.
Are Chatbots good or bad?
But are these chirpy programs actually providing good customer service? If you've ever interacted with one, you probably know the answer is no. Poor interactions with chatbots are frustrating, and according to a 2018 survey, we have a clear preference for human customer service agents over bots
Disclaimer
This website is against giving any kind of download link. Only every type of information is provided here. And is not promoting any kind of piracy. Therefore, no download link will be seen here. If you have any objection to this, then contact us. After which this post will be removed within 1 day. Thank you!
Conclusion :
How to create a ChatBot for your Website and Blogger using pure CSS?
You will get the chat-bot for free to your website which will work for you 24/7.
.
Ask Question #theraza24
Blog ➤https://bit.ly/3vUqPt0
Facebook Page ➤https://bit.ly/3ew2svO
Twitter ➤https://bit.ly/2SC0mC1
Instagram ➤https://bit.ly/3o2cpUB
SEO Tracks
Click to SUBSCRIBE to more Videos!
➤https://bit.ly/33vo2u1
Please Like, Comment, Share and Subscribe THANK YOU!
If you guys want an new version leave a comment 🤗