URL for chatbot server deploy

.env.development

@@ -12,3 +12,5 @@ VUE_APP_BASE_API = '/dev-api'
 # Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
 
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+BOTPRESS_HOST = 'http://localhost:3000'

.env.production

@@ -4,3 +4,4 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = '/prod-api'
 
+BOTPRESS_HOST = 'https://joinbot.tk/bot'

.env.staging

@@ -6,3 +6,4 @@ ENV = 'staging'
 # base api
 VUE_APP_BASE_API = '/stage-api'
 
+BOTPRESS_HOST = 'https://joinbot.tk/bot'

README.md

@@ -9,3 +9,7 @@ Current Join Frontend Implementation for the Admin and User dashboards
 User: **user**
 Password: **any**
 
+### Usefull Links:
+
+https://botpress.io/docs/tutorials/webchat-embedding
+

src/views/chatbot/index.vue

@@ -9,9 +9,15 @@ export default {
   name: 'Chatbot',
   components: { },
   data() {
+    return {}
   },
   mounted: () => {
-    window.botpressWebChat.init({ host: 'http://localhost:3000', botId: 'joinbot' })
+    window.botpressWebChat.init({ host: process.env.BOTPRESS_HOST, botId: 'joinbot', enableReset: false,
+      enableTranscriptDownload: false,
+      hideWidget: true,
+      extraStylesheet: '/assets/modules/channel-web/chat.css',
+      botName: 'Joe'
+    })
     setTimeout(() => {
       window.botpressWebChat.sendEvent({
         type: 'show',
@@ -20,6 +26,9 @@ export default {
       // window.botpressWebChat.sendEvent({ type: 'message', text: 'Hallo!' })
     }, 1500)
   },
+  beforeDestroy: () => {
+    document.getElementById('bp-widget').parentElement.removeChild(document.getElementById('bp-widget'))
+  },
   methods: {
 
   }
@@ -48,11 +57,14 @@ export default {
 </style>
 <style>
 #bp-widget {
-top: 20%;
-left: 40%;
 bottom: 0px;
 right: 0px;
-width: 400px;
-height: 80% !important;
+width: 70%;
+height: 100% !important;
+}
+
+#bp-web-widget {
+width:100%;
+height:100%
 }
 </style>