doddman53.github.io/appearance.html at master · doddman53/doddman53.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
	<head>
		<title>How-To | Appearance</title>
		<link rel="shortcut icon" href="C:\Users\doddm\Desktop\CS 290\olark.ico" />
		<link rel="stylesheet" href="howto.css" type="text/css">
	</head>
	<body>
		<div id="header">
			<h1>Make It Beautifully Unique</h1>
			<ul>
				<strong><li><a href="index.html">Home</a></li></strong>
				<strong><li><a href="attentionGrabber.html">Attention Grabber</a></li></strong>
				<strong><li><a class="active" href="appearance.html">Appearance</a></li></strong>
				<strong><li><a href="greeter.html">Greet Your Users</a></li></strong>
				<strong><li><a href="combined.html">All Together</a></li></strong>
			</ul>
		</div>
		<div id="container">
				<h3>Appearance Settings</h3>
					<p>
						Now we can play around with the appearance of the chatbox itself. This is what will really set
						the chatbox in your page apart from other websites, giving your page a fresh and unique feel to
						users. The Olark Chatbot API allows you to customize all aspects of the the chat box including
						its size, color, and its shape.
					</p>
					<p>
						<br><br><li><strong>Primary Color</strong></li>
							<dd><br>
									Let's change the color of our chat box to light salmon. Why? Because it's a lot different
									than the default color, and because why not. Here's how you'd do that:
							</dd>
							<script async src="//jsfiddle.net/doddp/LoxLm5nn/embed/js/"></script>

						<br><br><li><strong>Tab or No?</strong></li>
							<dd><br>
									You can also decide whether or not you want your chat box to appear as a fixed tab at the bottom of your screen, or if you want it to appear as a floating button. Either is fine, but I
									prefer the aesthetic of the floating button. Let's do that here:
							</dd>
							<script async src="//jsfiddle.net/doddp/kf5hju1m/embed/js/"></script>

						<br><br><li><strong>Never Underestimate the Power of the Dark Side</strong></li>
							<dd><br>
									Dark layouts always looking nice and sleek. It just so happens you can change the layout of your chat box to be dark if you so choose. Here's how:
							</dd>
							<script async src="//jsfiddle.net/doddp/p02uzcgn/embed/js/"></script>
					</p>
		</div>


<!-- begin olark code -->
<script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
f[z]=function(){
(a.s=a.s||[]).push(arguments)};var a=f[z]._={
},q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
0:+new Date};a.P=function(u){
a.p[u]=new Date-a.p[0]};function s(){
a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
b.contentWindow[g].open()}catch(w){
c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
/* custom configuration goes here (www.olark.com/documentation) */

// Change the primary color
olark.configure('system.hb_primary_color', '#ffa07a'); // light salmon

olark.configure('system.hb_position', 'right');

olark.configure('system.hb_show_as_tab', false);

olark.configure('system.hb_dark_theme', true);

olark.identify('6854-997-10-1606');/*]]>*/</script><noscript><a href="https://www.olark.com/site/6854-997-10-1606/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
<!-- end olark code -->
	</body>
</html>