I'm trying to hide chat widget and wanted to only popup when a button is click. But it seems the chat widget is always persistent even if you put this under a DIV and put style to hide.
I tried javascript but still still not working.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Making this work.</title>
</head>
<style type="text/css">
.toggle {display:none;}
.show {display:block;}
</style>
<body>
<a href="#" id="toggle">Trigger</a>
<div class="toggle">
<p> I'm here.
<div class="inside_fb_con">
<div class="fb-chat-wraper-qwerttefgsd" id="chat-fb"></div>
<script> "use strict"; function chatWidget() { function getCookie(name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + "=([^;]*)"));return matches ? decodeURIComponent(matches[1]) : undefined; } var anonymousID = getCookie("anonymousID"); if (anonymousID) { var chatFb = document.getElementById('chat-fb'); var ref = ""; var traits = { anonymousID: anonymousID, payload: ref }; traits = JSON.stringify(traits);traits = btoa(traits); var newRef = 'base64_' + traits; var el = document.createElement('div'); el.className = 'fb-customerchat'; el.setAttribute('page_id', 461422510724453); el.setAttribute('ref', newRef); el.setAttribute('theme_color', '#0184ff'); el.setAttribute('logged_in_greeting', 'Hi, what vehicle would you love to get MaskProtected?'); el.setAttribute('logged_out_greeting', 'Login with your messenger to get started.'); el.setAttribute('greeting_dialog_display', ''); el.setAttribute('greeting_dialog_delay', ''); document.querySelector('.fb-chat-wraper-qwerttefgsd').appendChild(el); FB.XFBML.parse(); } else { var _chatFb = document.getElementById('chat-fb'); var _ref = ""; var el = document.createElement('div'); el.className = 'fb-customerchat'; el.setAttribute('page_id', 461422510724453); el.setAttribute('ref', _ref); el.setAttribute('theme_color', '#0184ff'); el.setAttribute('logged_in_greeting', 'Hi, what vehicle would you love to get MaskProtected?'); el.setAttribute('logged_out_greeting', 'Login with your messenger to get started.'); el.setAttribute('greeting_dialog_display', ''); el.setAttribute('greeting_dialog_delay', ''); document.querySelector('.fb-chat-wraper-qwerttefgsd').appendChild(el); FB.XFBML.parse(); } } window.fbMessengerPlugins = window.fbMessengerPlugins || { init: function () { FB.init({ appId : '345027132667121', autoLogAppEvents : true, xfbml : false, version : 'v3.0' }); chatWidget(); }, callable: [] }; window.fbAsyncInit = window.fbAsyncInit || function () { window.fbMessengerPlugins.callable.forEach(function (item) { item(); }); window.fbMessengerPlugins.init(); }; setTimeout(function () { (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }, 0); </script>
</div>
</p>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$('#toggle').click(function() {
$('.toggle').slideToggle('fast').addClass( "show" );
return false;
});
</script>
</body>
</html>
It should be hidden on page load. And only show when button is clicked/triggered.
You need to change visible for block, for example. This way it should work. You are correct on setting the default none value.
Visibility is another property which values can be visible or hidden. It differs from the display block or none because it still renders the element on the DOM, making it occupy its spacing, it is only hidden.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Making this work.</title>
</head>
<style type="text/css">
</style>
<body>
<a href="#" id="toggle">Trigger</a>
<div class="toggle">
<p> I'm here.
<div class="inside_fb_con">
<div class="fb-chat-wraper-qwerttefgsd" id="chat-fb"></div>
<script> "use strict"; function chatWidget() { function getCookie(name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + "=([^;]*)"));return matches ? decodeURIComponent(matches[1]) : undefined; } var anonymousID = getCookie("anonymousID"); if (anonymousID) { var chatFb = document.getElementById('chat-fb'); var ref = ""; var traits = { anonymousID: anonymousID, payload: ref }; traits = JSON.stringify(traits);traits = btoa(traits); var newRef = 'base64_' + traits; var el = document.createElement('div'); el.className = 'fb-customerchat'; el.setAttribute('page_id', 461422510724453); el.setAttribute('ref', newRef); el.setAttribute('theme_color', '#0184ff'); el.setAttribute('logged_in_greeting', 'Hi, what vehicle would you love to get MaskProtected?'); el.setAttribute('logged_out_greeting', 'Login with your messenger to get started.'); el.setAttribute('greeting_dialog_display', ''); el.setAttribute('greeting_dialog_delay', ''); document.querySelector('.fb-chat-wraper-qwerttefgsd').appendChild(el); FB.XFBML.parse(); } else { var _chatFb = document.getElementById('chat-fb'); var _ref = ""; var el = document.createElement('div'); el.className = 'fb-customerchat'; el.setAttribute('page_id', 461422510724453); el.setAttribute('ref', _ref); el.setAttribute('theme_color', '#0184ff'); el.setAttribute('logged_in_greeting', 'Hi, what vehicle would you love to get MaskProtected?'); el.setAttribute('logged_out_greeting', 'Login with your messenger to get started.'); el.setAttribute('greeting_dialog_display', ''); el.setAttribute('greeting_dialog_delay', ''); document.querySelector('.fb-chat-wraper-qwerttefgsd').appendChild(el); FB.XFBML.parse(); } } window.fbMessengerPlugins = window.fbMessengerPlugins || { init: function () { FB.init({ appId : '345027132667121', autoLogAppEvents : true, xfbml : false, version : 'v3.0' }); chatWidget(); }, callable: [] }; window.fbAsyncInit = window.fbAsyncInit || function () { window.fbMessengerPlugins.callable.forEach(function (item) { item(); }); window.fbMessengerPlugins.init(); }; setTimeout(function () { (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }, 0); </script>
</div>
</p>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.toggle').hide();
});
$('#toggle').click(function() {
$('.toggle').slideToggle('fast').addClass( "show" );
return false;
});
</script>
</body>
</html>