Vanilla JavaScript framework to create conversational bots

index.html

<!-- Star me on Github: https://github.com/ThibaultJanBeyer/ui-landing-bot -->

script.js

/*
 * Star me on Github: https://github.com/ThibaultJanBeyer/ui-landing-bot
 */

var uilb = new UILandingBot(document.body);

uilb
  .message({
      content: "Hey! 👋",
      cssClass: "no-icon",
      delay: 1000
  })
  .then(ok => 
      uilb.message({
      content:
          "I’m the friendly bot and I’m here to make you <strong>feel good</strong>!",
      delay: 1000
      })
  )
  .then(ok =>
      uilb.message({
      cssClass: "fill-img no-icon",
      content:
          'heyas pretty person',
      delay: 1000
      })
  )
  .then(ok =>
      uilb.message({
      content: "How do you feel?",
      delay: 1000
      })
  )
  .then(ok => 
  uilb.action({
      type: "button",
      items: [
          {
          text: "cat",
          value: "meow!"
          },
          {
          text: "awesome",
          value: "awesum!"
          }
      ]
      })
  )
  .then(ok => 
      uilb.message({
      human: true,
      content: ok
      })
  )
  .then(ok =>
      uilb.message({
      content: 'Feeling good now? Well, check out my <a href="https://github.com/ThibaultJanBeyer/ui-landing-bot">documentation on Github</a> and leave me a Star now 🌟😎🌟',
      delay: 1000
      })
  )
  .then(ok => 
      uilb.message({
      human: true,
      content: "I love you! 😍",
      delay: 2000
      })
  )
  .catch(error => console.log('error', error));

// Hash format for UILB:  message, content, delay

// Param is response key of ok
// Pointing to a uilb class obj 
// Which has keys: human, cssclass, content, delay
function navMenuGetChild(response_obj) {
    // need to setup ...
      // single step, no decisions
      // single step, button options
  // retrieveNext grabs the step in process
	  // UILB grabs message, formats and returns promise
    return uilb.message(retrieveNext());
}

scripts

<script src="https://thibaultjanbeyer.github.io/ui-landing-bot/dist/uilb.min.js"></script>

style.css

/*
 * Star me on Github: https://github.com/ThibaultJanBeyer/ui-landing-bot
 */

html {
  background: linear-gradient(to bottom right, #00ffba, #00ffde);
  width: 100%;
  height: 100%;
  color: #fff;
}

styles

<link href="https://thibaultjanbeyer.github.io/ui-landing-bot/dist/uilb.min.css" rel="stylesheet" />

vanilla-javascript-framework-to-create-conversational-bots.markdown

Vanilla JavaScript framework to create conversational bots

FREE landbot.io clone written in native Vanilla JavaScript. Dead simple & no dependencies, just pure joy! Star me on Github: https://github.com/ThibaultJanBeyer/ui-landing-bot

A Pen by Mirv on CodePen.

License.