channel-web: override basic css

[xavierbriole]

Hello everyone,

We would like to introduce the ability to pass some arguments / settings inside the init snippet of botpress-channel-web so we can add a "Get started" button with customizable labels.

Here a demo :

How would you want this feature integrated to start a PR ?

What about passing a custom stylesheet inside this parameters to override the basic css ?

Thanks!

[epaminond]

@xavierbriole , I think overriding basic css feature makes sense! 👍
I believe we were even discussing this some time ago.

[xavierbriole]

@epaminond cool! we have to be able to pass a link of a stylesheet or the css properties directly (witch is not a good idea if there's a lot of rules) ?

and can we do something for the "get started" button ? like enable it only if there is the getStartedButton setting in the snippet (and not enabled true/false like the screenshot above) or maybe you want something more "out of the box" ?

[slvnperron]

@xavierbriole That looks great!!

Injecting an optional CSS file would be great. What do you think about the following API?

window.botpressWebChat.init({
  host: '',
  // ....
  customStylesheet: 'https://..../style.css',
  greetingScreen: {
     type: 'get_started' // can also be 'blank_chat'
     options: {
        // get_started specific options here
     }
  }
})

For custom styling, we will need to instrument all the chat elements with user-friendly classes.

[Julonimo]

Hey there,

Would be great to be able to inject custom stylesheet like you suggest @slvnperron !
Would be also great to have a doc refering the differents classes we can play for

[samail]

Hi guys,

Xavier's suggestion is definitely a great idea ! Xavier and i will be happy to complete that task and open a PR. GreetingScreen can be usefull to so we will try to move forward on this as well.

Also we think a custom Context object could be a very handy solution in order to be able to pass some contextualization infos to the BOT.
For eg, let's say you want to implement the webchannel widget and depend on the current user (logged in maybe) visiting your website, add a context info such as Customer/Visitor, then the bot could go though one flow or another depend on this.
Or another basic much simpler example such as you want to wish a happy birthday to the user when he opens the chat, you can add something like

context: {
     userinfos: {
       dob : '05/12/2018'
     }
  }

and check that info and do some related actions

the point is to have sort of "open" object in which we can pass extra infos to proceed some custom actions.

What do you think of this proposal?

[epaminond]

@samail , I'd suggest not to mix these suggestions and implement them separately.
I'm not sure I quite got an idea though. It is possible to pass context to the bot by emitting events on the client-side like:

window.botpressWebChat.sendEvent({ 
  type: 'some-context-action', 
  platform: 'web', 
  text: 'smth' 
})

[epaminond]

Closing this since botpress/botpress#870 was merged.