launch Instabot on scroll (absolute)

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 down on a 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 data-bind="value: eventTrigger" />
</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>

JavaScript

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

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

		string = '<scr' + 'ipt type="text/javascript">
		window.checkScroll = true;
		window.myCustomInit = function () {
			window.Roko$(window).scroll(function () {
				var scrollTop = Roko$(window).scrollTop();
				
				var numPixelsToTrigger = 200;

				if (window.checkScroll && !window.Roko$("html.rokoinstabot-on").length && scrollTop >= numPixelsToTrigger) {
					window.checkScroll = false;
					window.RokoInstabot.trigger("Demo Site");
				}
			})
		};
		window.myCustomClose = function () {
			window.checkScroll = false;
		}
	</scr' + 'ipt>' + 
	'<scr' + 'ipt type="text/javascript" src="//portal.roko.mobi/jsapi/rokoInstabot.js?v=p90QRDrUcLLtq_XfKyNgqSBKBt_sze8URdIHQLkoY381">
		apiKey: "' + this.eventTrigger() + '",
		userName: "",
		showAlways: true,
		events: {
			init: window.myCustomInit,
			close: window.myCustomClose
		}
	</scr' + 'ipt>';

     //string = '<scr' + 'ipt type="text/javascript" src="//portal.roko.mobi/jsapi/rokoInstabot.js"> \napiKey: "' + this.apiKey() + '", \ninitialEvent: "' + this.eventTrigger() + '" ' + '\n</scr' + 'ipt>';
     
     
     return string;

   }, this);
 }

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


 $('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();
 });