<template>
  <div class="app-container chatbot-container">
    <h1>Chatbot Joe</h1>
  </div>
</template>

<script>
export default {
  name: 'Chatbot',
  components: { },
  data() {
  },
  mounted: () => {
    window.botpressWebChat.init({ host: 'http://localhost:3000', botId: 'joinbot' })
    setTimeout(() => {
      window.botpressWebChat.sendEvent({
        type: 'show',
        channel: 'web'
      })
      // window.botpressWebChat.sendEvent({ type: 'message', text: 'Hallo!' })
    }, 1500)
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.chatbot-container {
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  .document-btn {
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    margin-bottom: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
</style>
<style>
#bp-widget {
top: 20%;
left: 40%;
bottom: 0px;
right: 0px;
width: 400px;
height: 80% !important;
}
</style>
