Facebook Chat Plugin

Developer
Georgi Demirev
Size
2,774 Kb
Views
36,432
  1. Facebook Chat Plugin Previews
  2. Facebook Chat Plugin HTML Codes
  3. Facebook Chat Plugin CSS Codes
  4. Facebook Chat Plugin JS Codes

How do I make an facebook chat plugin?

What is a facebook chat plugin? How do you make a facebook chat plugin? This script and codes were developed by Georgi Demirev on 11 November 2022, Friday.

Facebook Chat Plugin Previews
IQ Test

Facebook Chat Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Facebook Chat Plugin</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="fb-chat"> <div class="toggle"><svg xmlns="http://www.w3.org/2000/svg" width="2485" height="2500" viewBox="96 93 322 324"><path d="M257 93c-88.918 0-161 67.157-161 150 0 47.205 23.412 89.311 60 116.807V417l54.819-30.273C225.449 390.801 240.948 393 257 393c88.918 0 161-67.157 161-150S345.918 93 257 93zm16 202l-41-44-80 44 88-94 42 44 79-44-88 94z" fill="#fff"/></svg> Имате въпроси? Пишете ни!</div> <div class="close">X</div> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fklin.bg&tabs=messages&width=250&height=300&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=385423118195111" width="250" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> <div class="mobile"><a target="_blank" href="https://m.me/1538486732859227?ref=messenger_commerce_1163199097047119_https://klin.bg/"><svg xmlns="http://www.w3.org/2000/svg" width="2485" height="2500" viewBox="96 93 322 324"><path d="M257 93c-88.918 0-161 67.157-161 150 0 47.205 23.412 89.311 60 116.807V417l54.819-30.273C225.449 390.801 240.948 393 257 393c88.918 0 161-67.157 161-150S345.918 93 257 93zm16 202l-41-44-80 44 88-94 42 44 79-44-88 94z" fill="#fff"/></svg> Пишете ни!</a></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Facebook Chat Plugin - Script Codes CSS Codes

body { font-family: sans-serif; font-size: 14px; }
iframe { width: 100%;
}
#fb-chat { position: fixed; right: 15px; bottom: -315px; background: #e3e3e3; width: 250px; height: 300px; transition: all 0.5s ease; z-index: 45;
}
#fb-chat.active { bottom: 15px;
}
#fb-chat .toggle { position: fixed; right: 15px; bottom: 15px; height: 40px; line-height: 40px; z-index: -1; background-color: #006eff; color: #fff; cursor: pointer; padding: 0 15px; transition: all 0.5s ease;
}
#fb-chat.active .toggle { bottom: -55px;
}
#fb-chat .toggle svg { display: inline-block; width: 20px; height: 20px; vertical-align: middle;
}
#fb-chat .close { position: absolute; width: 30px; height: 30px; top: -15px; right: -15px; background-color: #006eff; text-align: center; line-height: 30px; color: #fff; cursor: pointer;
}
#fb-chat .mobile { height: 40px; line-height: 40px; background-color: #006eff; position: fixed; bottom: 15px; right: 15px; cursor: pointer; padding: 0 10px;
}
#fb-chat .mobile a { display: block; height: 40px; text-align: center; color: #fff; text-decoration: none;
}
#fb-chat .mobile a svg { display: inline-block; width: 20px; height: 20px; vertical-align: middle;
}
@media (max-width: 1024px) { #fb-chat .toggle, #fb-chat .close, #fb-chat iframe { display: none; }
}
@media (min-width: 1025px) { #fb-chat .mobile { display: none; }
}

Facebook Chat Plugin - Script Codes JS Codes

$('#fb-chat .toggle, #fb-chat .close').on('click touchstart', function(e) { e.preventDefault(); if(e.type == "touchstart") { if($('#fb-chat').hasClass('active')) { $('#fb-chat').removeClass('active'); } else { $('#fb-chat').addClass('active'); } } else if(e.type == "click") { if($('#fb-chat').hasClass('active')) { $('#fb-chat').removeClass('active'); } else { $('#fb-chat').addClass('active'); } }
});
Facebook Chat Plugin - Script Codes
Facebook Chat Plugin - Script Codes
Home Page Home
Developer Georgi Demirev
Username nicotinell
Uploaded November 11, 2022
Rating 3
Size 2,774 Kb
Views 36,432
Do you need developer help for Facebook Chat Plugin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Georgi Demirev (nicotinell) Script Codes
Name
Custom ordered list with FontAwesom
A Pen by Georgi Demirev
BetterNav
Carousel with animation
Responsive Team Member Cards
Full screen blurred background with caption
How margins work
Layers effect with Stellar.js
FontAwesome icons with animation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!