launch Instabot on link/button-click - 2

by Jimmy Ng

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>
Open Instabot when user clicks a link or button
</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>
  <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;
}

.btn {
  border: 2px solid #a9bac2;
  }

.sdk-script {
  border: 1px solid #a9bac2;
  background-color: #f4f5f5;
  padding: 5px;
  width: 550px;
  height: 300px;
  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";
 ...

JavaScript

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

   this.instabotSnippet = ko.computed(function() {
   
   string = '<!-- script section #1 - should be embedded into a page more than once --> \n<scr' + 'ipt type="text/javascript" src="//widget.instabot.io/jsapi/rokoInstabot.js" crossorigin>\n\n    apiKey: "' + this.apiKey() + '"\n</scr' + 'ipt>\n\n\n<!-- script section #2 - can be embedded into a single page for as many instabots can be launched on that page --> \n<scr' + 'ipt type="text/javascript">\n    window.buttonClick = function() {\n\n        // this event-trigger must match what you configured in the portal\n        window.RokoInstabot.trigger("' + this.eventTrigger() + '")\n    }\n</scr' + 'ipt>';
   
     return string;

   }, this);
 }

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


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