launch Instabot on button/link-click

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>
Instabot JavaScript generator
</p>

<p><a href="https://docs.instabot.io/docs/web-basic-setup#section-1-get-the-instabot-javascript" target="_blank">API Key</a>
  <input data-bind="value: apiKey" />
</p>

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

<button class="btn" data-clipboard-target="#instabot">Get my script!</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: 7px;
  width: 400px;
}

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: 1px solid #a9bac2;
}

.sdk-script {
  border: 1px solid #a9bac2;
  background-color: #f4f5f5;
  padding: 20px;
  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 .description {
  margin-bottom: 10px;
  border: 1px solid #a9bac2;
  background-color: #f4f5f5;
  padding: 20px;
  width: 900px;
}

.endPoint .sample {
 ...

JavaScript

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

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

     string = '<scr' + 'ipt type="text/javascript" src="//widget.instabot.io/jsapi/rokoInstabot.js" crossorigin> \napiKey: "' + this.apiKey() + '\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();
 });