-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathattentionGrabber.html
More file actions
102 lines (87 loc) · 5.92 KB
/
Copy pathattentionGrabber.html
File metadata and controls
102 lines (87 loc) · 5.92 KB
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<head>
<title>How-To | Attention Grabber</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>Seize The Attention</h1>
<ul>
<strong><li><a href="index.html">Home</a></li></strong>
<strong><li><a class="active" href="attentionGrabber.html">Attention Grabber</a></li></strong>
<strong><li><a 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>Install</h3>
<p>Before we dive into into it, find out how to install the Chatbot on your page <a href="https://www.olark.com/install"><em>here.</em></a></p>
<h3>Attention Grabber API Calls</h3>
<p>
The Attention Grabber is a feature of the chat box that allows you
to draw the user's attention to the chat box itself. Many features
of the attention grabber can be customized. You can use a custom image,
adjust the size, and even set custom messages to display to the visitor
after a specified number of seconds. All API calls are placed near the
bottom of the embed code under the comment:
/* custom configuration goes here (www.olark.com/documentation) */
</p>
<p>
<li><strong>Online Attention Grabber Image</strong></li>
<dd><br>If you would like to add a custom image to your Attention Grabber
while online, you would do so like this:</dd>
<iframe width="100%" height="100" src="//jsfiddle.net/doddp/95j29wcj/2/embedded/js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<br><br><li><strong>Offline Attention Grabber Image</strong></li>
<dd><br>If you would like to add a custom image when you are offline, you
would do so like this:</dd>
<iframe width="100%" height="100" src="//jsfiddle.net/doddp/evp6acsv/embedded/js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<br><br><li><strong>Adjusting The Image</strong></li>
<dd><br>When you navigated to this page, you probably noticed the surprised face of Patrick Star in the bottom right corner of the screen! You can
customize the dimensions of the image to fit the size of the chat window itself.<br>
These are the setting for the attention grabber on this page:</dd>
<iframe width="100%" height="150" src="//jsfiddle.net/doddp/bgv98thq/embedded/js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<br><br><li><strong>Have At It!</strong></li>
<dd><br>Below is a JS Fiddle with the code to embed the Olark Chatbot to your
website. Experiment with the customizations we discussed on this page!
Just click the icon "edit in JS Fiddle" and edit away! Look for the comment:
/* custom configuration goes here */ near the bottom of the JavaScript, and enter your code there!</dd>
<iframe width="100%" height="400" src="//jsfiddle.net/bcmoney/kdo313wr/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</p>
</div>
<!-- Enable the Attention Grabber -->
<script>olark.configure("features.attention_grabber", true);</script>
<!-- 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) */
// Offline
olark.configure('CalloutBubble.offline_bubble_image_url', 'PatrickSurprise.jpg' );
olark.configure('CalloutBubble.offline_bubble_width', 349);
olark.configure('CalloutBubble.offline_bubble_height', 349);
// Online
olark.configure('CalloutBubble.bubble_image_url', 'PatrickSurprise.jpg' );
olark.configure('CalloutBubble.bubble_width', 349);
olark.configure('CalloutBubble.bubble_height', 349);
olark.configure('CalloutBubble.slide', true);
olark.configure('WelcomeAssist.welcome_new_visitors', true );
olark.configure('features.greeter', 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>