🤖
ZyndraAI help center
  • 😀Welcome to ZyndraAI, a part of Talkie AB
    • ZyndraAI Basic
  • 🏁Getting started
    • Building a Chatbot
    • Chatbot Appearance
      • Custom CSS
    • Testing a Chatbot
    • Publishing your bot
      • Installation using HTML
      • Installation on Facebook
    • Deploying a Chatbot
    • Utility Tools
    • Variables
  • ✨AI-studio
    • Overview
    • Knowledge base
    • Prompts
    • Setting up retrain
    • Function call
    • Custom Answers
  • 💬Live chat
    • Overview
    • Creating views
    • Adding labels
    • Saved replies
    • Settings
  • 🏗️Action blocks
    • Overview
    • Trigger
    • Send Message
    • Collect Input
    • Buttons
    • Carousel
    • Calendar
    • Send an Email
    • Condition
    • Image Carousel
    • Human Handover
    • Slider
    • File Upload
    • Delay
    • Form
    • Flow
    • Jump
    • Codeblock
    • Answer AI
    • Set AI
  • 🏆Integrations
    • Overview
    • HTTP request
    • Hubspot
    • Salesforce
    • Slack
      • Live Chat for Slack
      • Notification for Slack
    • Public APIs
  • 💵Payment and plans
    • Purchasing a plan
    • Payment Methods
    • Initial cost, notice period, commitment period
    • Spent conversations
    • What currency do you charge in?
Powered by GitBook
On this page
  1. Getting started
  2. Chatbot Appearance

Custom CSS

You can customize the CSS of the chat widget to suit your needs

Available on PREMIUM plan and above.

To make changes in the UI using the CSS, you need to go to 'Channel Configuration -> Web -> Appearance'

Here are the classes that you can modify:

Field
Class Name

Pop-up message

.avatar .popup-message .popup-close-button

Header Logo

.avatar--title

Header Text

.bot-title

Meta date information

.meta-info .meta-info--label

Text message in the chat section

.text-message

Time-stamp & typing indicator

.timestamp

Options / Buttons dialog

.option-button

Carousel Title/ Subtitle / Buttons

.carousel-title .carousel-subtitle .carousel-button

Calendar Submit Button

.submit-button

Carousel Image

.card-view-image

Slider title and submit button

.popup-title .submit-button

File Upload , Submit, Add more button

.popup-title .submit-file .add-file

Home Button

.home--button .reset--button

Action Buttons

.action-button

Input box on the chat widget

.chat-input

Avatar for title

.avatar

Header of the chat widget

.message-screen-header

Carousel Root, Image , Carousel slider frame,

carousel & carousel-image: .slider-frame .card-image

File List item Root and Classes for title , icon

file-preview: label:

.filepond--root

.iconwrap

textwrap file listitem:

.filepond--file-wrapper .

filepond--action-remove-item

Form Input

.form-input

Phone Input, Seach box for country dropdown , Country list

.phone-input: .search-box-sub-container .country-list

Google Calendar Drawer

.google-calendar

PreviousChatbot AppearanceNextTesting a Chatbot

Last updated 1 month ago

🏁