<form id="demoForm" onsubmit="return loadWidget(demoHost.value, demoAccount.value, demoConfig.value), false">
  <input id="demoHost" type="text" placeholder="host (eg. qa.nanorep.co)" required><br>
  <input id="demoAccount" type="text" placeholder="account (eg. qa)" required><br>
  <input id="demoConfig" type="text" placeholder="configId (optional)"><br>
  <button type="submit">Load widget</button>
</form>

function loadWidget(host, account, configId) {
  /* widget embed code */
  !function(t,e,o,c,n,a){var s=window.nanorep=window.nanorep||{};s=s[e]=s[e]||{},s.apiHost=a,s.host=n,s.path=c,s.account=t,s.protocol="https:"===location.protocol?"https:":"http:",s.on=s.on||function(){s._calls=s._calls||[],s._calls.push([].slice.call(arguments))};var p=s.protocol+"//"+n+c+o+"?account="+t,l=document.createElement("script");l.async=l.defer=!0,l.setAttribute("src",p),document.getElementsByTagName("head")[0].appendChild(l)}(account,"floatingWidget","floating-widget.js","/web/", location.host, host);document.getElementById('demoForm').style.display='none';if(configId){nanorep.floatingWidget.on('init',function(){this.setConfigId(configId)})};
  /* widget embed code */

  // provide custom UI implementation to support custom skin
  nanorep.floatingWidget.on('init', function() {
    this.useCustomUI({
      constructor: function(api, cnf) {
        // save reference to the API object
        this.api = api;

        // create widget container
        this.container = document.createElement('div');
        this.container.innerHTML =
          '<div class="mywidget">' +
            '<div class="mywidget__content">' +
              '<div class="mywidget__log"></div>' +
              '<div class="mywidget__quick-options"></div>' +
            '</div>' +
            '<input class="mywidget__input" placeholder="Type your question here">' +
          '</div>';
        document.body.appendChild(this.container);

        // save reference to core nodes
        this.content = this.container.querySelector('.mywidget__content');
        this.log = this.container.querySelector('.mywidget__log');
        this.input = this.container.querySelector('.mywidget__input');
        this.quickOptionsContainer = this.container.querySelector('.mywidget__quick-options');

        // initialize input field
        api.setUserInput({ input: this.input });
      },
      addUserMessage: function(message) {
       // display user message in conversation log
        var newNode = document.createElement('div');
        newNode.innerHTML = '<div class="mywidget-message mywidget-message--user">' + message.html + '</div>';
        this.log.appendChild(newNode);
        this._scrollToBottom();
      },
      addBotMessage: function(message) {
        // display bot message in conversation log
        var newNode = document.createElement('div');
        newNode.innerHTML = '<div class="mywidget-message mywidget-message--bot" id="msg' + message.id + '">' + message.html + '</div>';
        this.log.appendChild(newNode);
        this._scrollToBottom();
      },
      addAgentMessage: function(message) {
        // display agent message in conversation log
        var newNode = document.createElement('div');
        newNode.innerHTML = '<div class="mywidget-message mywidget-message--agent">' + message.html + '</div>';
        this.log.appendChild(newNode);
        this._scrollToBottom();
      },
      addQuickOption: function(optionName, activate) {
        // this function will be called when quick option button should be added to the list of quick actions
        var button = document.createElement('button');
        button.className = 'mywidget__quick-option';
        button.onclick = activate;
        button.appendChild(document.createTextNode(optionName));
        this.quickOptionsContainer.appendChild(button);
        this._scrollToBottom();
      },
      removeQuickOptions: function() {
        // remove all available quick options
        this.quickOptionsContainer.innerHTML = '';
      },
      addPersistentOption: function(optionName, message, activate) {
        // draw persistent option in specific message
        var messageContainer = document.getElementById('msg' + message.id),
            button = document.createElement('button');

        button.onclick = activate;
        button.className = 'mywidget__persistent-option';
        button.appendChild(document.createTextNode(optionName));
        messageContainer.appendChild(button);
      },
      reset: function() {
        // reset entire widget UI to initial state
        this.log.innerHTML = '';
        this.removeQuickOptions();
      },
      _scrollToBottom: function() {
        // helper function to scroll conversation to the bottom when message is added
        var maxScrollValue = this.content.scrollHeight - this.content.offsetHeight;
        if (this.content.scrollTop < maxScrollValue) {
          this.content.scrollTop = maxScrollValue;
        }
      }
    });
  });

}

// prepopulate field values if host/account/kb are defined in documentation page URL (not related to the demo)
(function(url) {
  var pairs = url.substr(url.indexOf('?') + 1).split('&'), params = {};

  for (var i = 0; i < pairs.length; i++) {
    var data = pairs[i].split('=');
    params[data[0]] = decodeURIComponent(data[1]);
  }

  document.getElementById('demoHost').value = params.host || '';
  document.getElementById('demoAccount').value = params.account || '';
  document.getElementById('demoConfig').value = params.configId || '';
}(top.location.href));