How to add custom css to my bot?

1

Hi all

I am helping my colleague with polishing the graphic outlook of the bot. Is there a simple way to change/ add the CSS to our bot (we would like to, for example, change the color in our response - for color #68B9EA it automatically switches to the black and we would like to keep white).

Thank you for any advices&tips :slight_smile:

1 Like
2

Hi @Deccadent,

You can do basic color customization for the Bots in the Design section of the TARS Dashboard.
Check this help-doc to see how: http://help.hellotars.com/design/how-to-make-design-changes-to-your-bot

3

Hi @vinit

Thank you for the info, but we have already read and implemented this guide(our writer and graphic did). Currently, we are dealing with the color of the text in the customer response button(probably generated into the .chooser class). Its color is changed automatically into the white/black probably depending on how dark is the button color. However, we want to change an automatic black color of the text in #68B9EA response button into white, which fits our website color theme(and is more esthetically pleasing). Is there a simple way to do this or do we have to rewrite the color with our script after your bot script is being executed?

Thank you for your time.

2 Likes
4

Hi @Deccadent,

Yes, you are correct. The purpose of automatic text color change based on bubble background color is to make sure that the contrast is proper and the text is readable. and keeping the configuration option to minimal. This is done by calculating the luminosity of the bubbles background color and checking which of black or white will be best option. However for some background colors, both black and white text colors are good enough to read.

If you think that this design configuration is very essential for your bot, we maybe able to do this customization on our end. Why don’t you drop us a line on the live chat on our website and we can see what can be done.

1 Like
5

Hi!

I have the similar use case: I have 3 branches after some condition and I want to show first bubble in red color (as error message), second bubble in yellow color (as warning) and last bubble in green (as normal message). How to achive this?

There are some ideas

  1. Direct color option in the bubble settings like as bold, italic and other text styles
  2. HTML id attr in the bubble code (like <span id="bubble-123">Message</span>) with ability to attach external css (my css).

Do plan the Tars team to make some of this?

1 Like
6

Hi @mvs.

The design customization is currently possible only at the bot level.
Gambit level different design customizations, OR even bubble/button/card level different design customizations is not possible. That’s just too many options.