🗜️ CSS

You can use the CSS block to customize the appearance of your app with a Pro plan or higher.

CSS Player Classes:

1) #root

2) #chatbot-container (setup of background and position of player)

3) #chatbot-player

4) #chatbot-active-character (character who speak and appears in a big picture)

5) #chatbot-background (visual in the background)

6) #chatbot-overlay (switch background: fade in / fade out)

7) #chatbot-dialogue-text (in the image border)

8 ) #chatbot-display (which is not in the feed)

9) #chatbot-feed (list of messages as a feed)

A. #chatbot-waiting-button (in #chatbot-feed)

B. #chatbot-feed-events (in #chatbot-feed)

a. #chatbot-alert (in #chatbot-feed-events)

b. #chatbot-choices (in #chatbot-feed-events)

1. #chatbot-choice (in #chatbot-choices)

c. #chatbot-image (in #chatbot-feed-events)

d. #chatbot-narrator (in #chatbot-feed-events)
e. #chatbot-switchBackground (text in the lower-right corner) (in #chatbot-feed-events)

f. #chatbot-dialogue (in #chatbot-feed-events)

1. #left (#chatbot-dialogue)
2. #right (#chatbot-dialogue)
3. #${characterNameToCamelCase} (#chatbot-dialogue)

Updated on: 05/02/2025