launch Instabot on page-scroll (percentage)

by Jimmy Ng

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<p>
Open Instabot when user scrolls a certain percentage of the page
</p>

<p><a href="https://docs.roko.mobi/docs/web-basic-setup#section-1-get-your-instabot-api-key" target="_blank">API Key</a>
  <input data-bind="value: apiKey" />
</p>
<p><a href="https://docs.roko.mobi/docs/web-launch-instabot-on-page-load#section-1-set-up-an-event-trigger-for-your-conversation" target="_blank">Event-Trigger</a>
  <input type="eventTrigger" data-bind="value: eventTrigger" />
</p>

<p>Percentage of page to scroll before trigger (0-100)
  <input type="scrollAmount" data-bind="value: scrollAmount" />
</p>

<p>
  <textarea id="instabot" class="sdk-script" data-bind="text: instabotSnippet"></textarea>
</p>

<button class="btn" data-clipboard-target="#instabot">copy script to clipboard</button>

CSS

* {
  outline: none;
}

body {
  padding: 15px;
}

* {
  font: 16px "pf_dindisplay_proregular";
  color: #505962;
}

h1 {
  font: 30px "pf_dindisplay_probold";
  margin: 20px 0;
}

hr {
  margin: 15px 0;
}

input {
  padding: 5px;
  width: 400px;
  margin-left: 10px;
}

input[type="eventTrigger"]{
  padding: 5px;
  width: 200px;
  margin-left: 10px;
}

input[type="scrollAmount"]{
  padding: 5px;
  width: 50px;
  margin-left: 10px;
}

select {
  padding: 8px;
  width: 350px;
}

.actions a {
  display: inline-block;
  padding: 0;
  padding: 0 20px;
  line-height: 35px;
  border-radius: 7px;
  color: #fff;
  border: 1px solid #38a1e9;
  background: #38a1e9;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
}

.actions a:hover {
  opacity: 0.8;
}

.sdk-script {
  border: 1px solid #a9bac2;
  background-color: #f4f5f5;
  padding: 5px;
  width: 550px;
  height: 125px;
  font: 16px "pf_dindisplay_proregular";
  resize: none;
}

.field {
  margin-bottom: 10px;
}

.field .field-title {
  font: 16px "pf_dindisplay_proregular";
  line-height: 16px;
  margin-bottom: 5px;
}

.field .field-title .optional {
  font: 14px "pf_dindisplay_prolight_italic";
  text-transform: lowercase;
}

.field .field-content input,
.field .field-content textarea {
  width: 400px;
}

.field .field-content input[type='checkbox'] {
  padding: 0;
  width: 20px;
  margin: 0;
}

.field .field-content textarea {
  height: 150px;
  padding: 7px;
}

.fields-group:before,
.fields-group:after {
  content: " ";
  display: table;
}

.fields-group:after {
  clear: both;
}

.fields-group .field {
  float: left;
  margin-right: 10px;
}

.endPoint {
  margin-bottom: 30px;
}

.endPoint .title {
  margin-bottom: 10px;
  text-decoration: none;
  display: block;
}

.endPoint .title span {
  font: 22px "pf_dindisplay_probold";
  text-transform: uppercase;
}

.endPoint .title .handler {
  font: 20px "pf_dindisplay_proregular";
  text-transform: none;
}

.endPoint...

JavaScript

var generateInstabotJS = function(api, event, scrollAmount) {
   this.apiKey = ko.observable(api);
   this.eventTrigger = ko.observable(event);
   this.scrollAmount = ko.observable(scrollAmount);

   this.instabotSnippet = ko.computed(function() {

		string = '<scr' + 'ipt type="text/javascript">\n 		window.checkScroll = true;\n 		window.myCustomInit = function () {\n 			window.Roko$(window).scroll(function () {\n 				var scrollHeight = Roko$(window.document.body).get(0).scrollHeight, scrollTop = Roko$(window).scrollTop();\n 				 				var percentageOfPageScrollToTrigger = ' + this.scrollAmount() + ';\n  				if (window.checkScroll && !window.Roko$("html.rokoinstabot-on").length && scrollTop / scrollHeight * 100 >= percentageOfPageScrollToTrigger) {\n 					window.checkScroll = false;\n 					window.RokoInstabot.trigger("' + this.eventTrigger() + '"); 				} 			}) 		};\n 		window.myCustomClose = function () {\n 			window.checkScroll = false; 		}\n 	</scr' + 'ipt>\n 	<scr' + 'ipt type="text/javascript" src="//portal.roko.mobi/jsapi/rokoInstabot.js?v=p90QRDrUcLLtq_XfKyNgqSBKBt_sze8URdIHQLkoY381">\n 		apiKey: "' + this.apiKey() + '",\n 		userName: "",\n 		showAlways: true,\n 		events: {\n 			init: window.myCustomInit,\n 			close: window.myCustomClose\n 		}\n 	</scr' + 'ipt>';
     
     
     return string;

   }, this);
 }

 // Activates knockout.js
 ko.applyBindings(new generateInstabotJS("FILL-ME-IN", "FILL-ME-IN", 15));


 $('button').tooltip({
   trigger: 'click',
   placement: 'bottom'
 });

 function setTooltip(message) {
   $('button').tooltip('hide')
     .attr('data-original-title', message)
     .tooltip('show');
 }
 function hideTooltip() {
   setTimeout(function() {
     $('button').tooltip('hide');
   }, 2000);
 }

 // clipboard copy button
 var clipboard = new Clipboard('.btn');

 clipboard.on('success', function(e) {
   setTooltip('Copied!');
   hideTooltip();
 });

 clipboard.on('error', function(e) {
   setTooltip('Failed!');
   hideTooltip();
 });