JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<div id="chat_box">
		<button type="button" class="btn" id="popupEmailCheck">
			<img class="chat_msg" src="https://static.hsappstatic.net/conversations-internal-components/static-1.4787/img/visitor-widget/launcher-open-icon.svg"/>
		</button>

		<div class="chat_form">
			<div class="heading">
				<img src="<?php echo $url; ?>static/quantzig/custom_home/img/Quantzig-_White.png" alt="Quantzig Logo" title="Quantzig Logo">
				<h1>Hello there! <img src="<?php echo $url; ?>static/quantzig/custom_home/img/waving-hand.svg"></h1>
				<p>Please introduce yourself to speak with someone from our team.</p>
			</div>

			<div class="form_details">
				<span class="line"></span>
				<!-- <form  id="chatPopUpName" method="post"> -->
					<div class="form-group">
						<input type="text" class="form-control" id="popupName" name="popupName" placeholder="Enter your name">
						<span class="err_pop_name" style="color:red;"></span>
					</div>

					<div class="form-group">
						<input type="email" class="form-control" id="popupEmail" name="popupEmail" placeholder="Enter your business email">
						<span class="err_pop_email" style="color:red;"></span>
						<input type="hidden" name="country" class="nEwCountry" value="<?php echo $nEwCountry; ?>">

					</div>
					<!-- <input type="submit" value="Submit" id="popupSubmitBtn"> -->
					<button class="btn" type="submit" id="popupSubmitBtn"><img src="<?php echo $url; ?>static/quantzig/custom_home/img/send-button.svg"> Start chatting</button>
				<!-- </form> -->
			</div>
			<!-- form details -->

		</div>

		<!-- chat form -->

	</div>
	<!-- chabox -->

CSS

.chat_form .form_details #popupSubmitBtn:focus {
    box-shadow: none;
   	}
	div#myBtn.stickey-contact{display: none;}
	button#popupEmailCheck {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9999999999999999999999999 !important;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: rgb(94, 124, 169);
	box-shadow: none !important;
	border-radius: 50%;
	padding-top: 10px;
	}
	#hubspot-messages-iframe-container{
		z-index: 5 !important;
		display: none !important;
	}
	button#popupEmailCheck img{
		width: 18px;
	position: relative;
	bottom: 3px;
	}

	.chat_form{
	width: 359px;
	background-color: #fff;
	position: fixed;
	bottom: 79px;
	right: 15px;
	border-radius: 5px;
	z-index: 100;
	padding-bottom:20px;
	box-shadow: 0 -2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	display: none;
	}

	.chat_form .heading{
	background: url(<?php echo $url; ?>static/quantzig/custom_home/img/parallax-bg.jpg);
	padding: 20px 20px 95px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}

	.heading img{
	margin-bottom: 15px;
	width: 95px;
	}

	.heading h1{
	color: #fff;
	font-weight: bold;
	font-size: 25px;
	margin-bottom: 10px;
	font-weight: 500;
	}
	.heading h1 img {
	    width: 29px;
	    margin-bottom: 0px;
	    position: relative;
	    bottom: 4px;
	}
	.heading p{
	font-size: 15px;
	margin: 0px;
	color: #ffffffc7;
	line-height: initial;
	}

	.chat_form .form_details{
	width: 90%;
	display: block;
	margin: auto;
	background-color: #fff;
	padding: 20px;
	margin-top: -60px;
	border-radius: 5px;
	position: relative;
	box-shadow: 0 -2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	}

	.chat_form .form_details .form-control{
	font-size: 13px;
	padding: 6px 6px;
	}

	.chat_form .form_details #popupSubmitBtn{
		padding: 5px 20px;
	font-size: 14px;
	text-align: center;
	border-radius: 25px;
	background-color: #233f67;
	color: #fff;
	}

	span.line{
			height: 3px;
	    background-color: #233f67;
	    position: absolute;
	    bottom: 0px;
	 ...

JavaScript

/* $con = array('India','United States of America (USA)');
$ip = $_SERVER['REMOTE_ADDR'];
   $dataArray = json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));
   $nEwCountry = $dataArray->geoplugin_countryName; */




var msg = 'https://static.hsappstatic.net/conversations-internal-components/static-1.4787/img/visitor-widget/launcher-open-icon.svg';
			var clse = 'https://static.hsappstatic.net/conversations-internal-components/static-1.4787/img/visitor-widget/launcher-close-icon.svg';

			jQuery('button#popupEmailCheck').click(function() {
				if (jQuery('.chat_msg').attr('src') === msg) {
					jQuery('.chat_msg').attr('src', clse);
					jQuery('.chat_form').slideDown()
				} else {
					jQuery('.chat_msg').attr('src', msg)
					jQuery('.chat_form').slideUp()

				}
			});
      
      
      jQuery('#popupSubmitBtn').click(function(){
			  var popupName = jQuery("#popupName").val();
			  var popupEmail = jQuery("#popupEmail").val();

			  if(popupName == ""){
			    jQuery(".err_pop_name").html("Please enter your name");
			    return false;
			  }else{
			    jQuery(".err_pop_name").html("");
			  }
			  if(popupEmail == ""){
			    jQuery(".err_pop_email").html("Please enter your email id");
			    return false;
			  }else{
			    var b_val  = bussiness_validate_email(jQuery("#popupEmail").val());
			    if(b_val != -1){
			      jQuery(".err_pop_email").html("Please enter valid business emai id");
			      return false;
			    }else{
			      jQuery(".err_pop_email").html("");
			    }
			  }

			 

			});
      
      // Email Validation
			function bussiness_validate_email(email){
			  // alert("this is");
			  email = email.toLowerCase();
			  // var names_arr = ['gmail.com','hotmail.com','live.com','msn.com','aol.com','yahoo.com','inbox.com','gmx.com','me.com','yahoo.co.in','outlook.com'];
			  var names_arr = ["gmail.com","outlook.com","hotmail.com","yahoo.com","163.com","qq.com","aol.com","126.com",
			 ...