- Joined
- Sep 15, 2014
- Messages
- 4,357
- Likes
- 8,864
- Degree
- 8
A while back I had the bright idea of creating a digital product and thought it would be pretty sweet if I could use a fake Chat Pop up Box to push a discounted offer for the product as some seemingly random bonus. I cleaned it up and here it is for everyone. A live example of the script and the output:
--
CSS inside the <head><head> tag:
--
HTML code sometime AFTER the opening <body> tag (I like the end):
--
javascripts/jQuery right BEFORE the closing </body> tag:
--
Setting this up might be a bit more involved since it has 2 external CSS files (you can combine them), and 2 external javascript files as well.
Here is the whole thing zipped up nice and pretty for you:
Faux-Chat-Box-Popup.zip
You can probably push this faux chatbox to push anything to be honest. I was lazy and used a discount. I would recommend using an added bonus as an add-on instead of a discount where you are taking money un-necessarily out of your pockets.
Later,
- CC
--
CSS inside the <head><head> tag:
Code:
<!-- Style this nonsense - @MercenaryCarter -->
<link rel="stylesheet" href="codez/jquery-ui-1.8.2.custom.css" type="text/css" media="screen">
<link rel="stylesheet" href="codez/jquery.ui.chatbox.css" type="text/css" media="screen">
<!-- End of style this nonsense - @MercenaryCarter -->--
HTML code sometime AFTER the opening <body> tag (I like the end):
Code:
<!-- This is require mated - @MercenaryCarter -->
<div id="chat_div" style="display:none;">
<div style="display: block; margin: 2px;">
<div style="display: inline-block; margin: 0px; width: 80px;">
<img src="codez/avatar.jpg" width="80" height="80">
</div>
<div style="display: inline-block; margin: 0px;">
<h2>Linda Williams</h2>
<span style="color:#999999; margin: 8px;">Support Operator</span><br>
<img src="codez/good.jpg" width="100" height="20" style="margin: 4px;">
</div>
</div>
<hr>
<p>My name is Linda and I am here to answer your questions about CCarter.</p>
<p>We want our free CCarter guide in the hands of as many people as possible, so for the next 20 visitors today,
if the price is prohibitive for you - please accept our special offer!</p>
<p>Grab your <font color="#0044ff">Exclusive Offer</font></a> to take benefit of your one time <a href="#"><font color="#00cc00"><b>2000%</b> OFF DISCOUNT</font></a>!</p>
<p>Have an wonderful day!</p>
<p>-Linda</p>
<hr>
<p><font color="#CC0033">This is an auto response, <b>Linda is currently offline at the moment</b>.</font></p>
<hr>
</div>
<!-- End of require mated - @MercenaryCarter -->--
javascripts/jQuery right BEFORE the closing </body> tag:
Code:
<!-- This is require mated - @MercenaryCarter -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="codez/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="codez/jquery.ui.chatbox.js"></script>
<script type="text/javascript">
function loadChat(){
$("#chat_div").css( "display", "block" );
box = $("#chat_div").chatbox({id:"Guest",
title : "Live Chat - Currently Offline",
offset: 20,
hidden: true,
messageSent : function(id, user, msg) {
$("#chat_div").chatbox("option", "boxManager").addMsg(id, msg);
}});
}
$(document).ready(function(){
setTimeout("loadChat()",8000); // Waits 8 seconds (8000 = 8 seconds)
});
</script>
<!-- End of require mated - @MercenaryCarter -->--
Setting this up might be a bit more involved since it has 2 external CSS files (you can combine them), and 2 external javascript files as well.
Here is the whole thing zipped up nice and pretty for you:
Faux-Chat-Box-Popup.zip
You can probably push this faux chatbox to push anything to be honest. I was lazy and used a discount. I would recommend using an added bonus as an add-on instead of a discount where you are taking money un-necessarily out of your pockets.
Later,
- CC
