Custom CSS for web widget

#1

Hi,
how can I add custom CSS for my web widget?
There are some layout issues, I’d like to fix.

Thanks.

(Daniel Beckett) #2

Unfortunately there are no additional customisation options available outside of those listed in the Creating a Web Messenger docs. Additional functionality can be achieved through the Web Messenger API but the style of the bot can’t be directly customised using CSS.

(Anders Eidergard) #3

Is it possible to hide the bot (and the speech bubble) until the user clicks elsewhere e.g. a button on the webpage?

(Karen Barker) #4

Hi Anders,

There’s a thread here that discusses hiding the Web Widget.

The alternative would be to use the iFrame to embed the Web Messenger and then you could use CSS to display it whenever you wanted.

Hope this helps. :thumbsup:

(Anders Eidergard) #5

A bit of a challenge but I got it working the way I wanted with hiding the speech bubble and showing the bot in the middle of the page on load.

After some additional work with CSS and JS I also managed to add Stripe Checkout to the workflow after the user reaches the end of the dialog with the bot (by listening to the dialog with the callback function in the widget).

Being able to do the same thing using FlowXO functionality would of course be really cool but at least I got it sorted.

Embedding the web messenger didn’t solve my problem due to the fact that there’s no callback function and I have no way (that I’ve found anyway) to trigger things in the page itself.

All in all a good lerning experience :slight_smile:

2 Likes