timed delay

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><a href="https://docs.roko.mobi/v2.0/docs/web-basic-setup#section-1-get-your-instabot-api-key">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>Delay (seconds):
  <input type="delay" data-bind="value: timerDelay" />
</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="delay"] {
  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: 10px;
  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, delay) {
   this.apiKey = ko.observable(api);
   this.eventTrigger = ko.observable(event);
   this.timerDelay = ko.observable(delay);

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

     string = '<scr' + 'ipt type="text/javascript" src="//app.instabot.io/jsapi/rokoInstabot.js"> \n\tapiKey: "' + this.apiKey() 
     + '", \n\tinitialEvent: "' + this.eventTrigger() 
     + '", \n\tinitialDelay: ' + this.timerDelay() 
     + '\n</scr' + 'ipt>';
     return string;

   }, this);
 }

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



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