Adding Custom CSS to your AI chatbot

As part of Step 1 - Chatbot White-Labeling, you can add custom CSS to further customize your AI chatbot's appearance and functionality.

Customization Options for CSS

Dante AI provides pre-written CSS snippets that you can copy directly into the custom CSS field with just a few clicks. 

The text in brown italics gives instructions on what you can amend.

‍
Here is a guide to some of the most commonly used customizations:

1. Customize “See More” Text in Suggested Prompts

To change the text in the “See more” button on suggested prompts, use the following CSS:

.suggestion-box:last-of-type {
    font-size: 0;
}
.suggestion-box:last-of-type:after {
    content: 'custom-text';  /* Replace 'custom-text' with your desired text */
    font-size: 14px;
}

2. Hide Chat Bubble Tooltips on Mobile

To hide tooltips in the chat bubble on mobile devices:

@media only screen and (max-device-width: 768px) {
    .tooltip-container {
    display: none;
    }
}

3. Change the Color of the Scrollbar

To ensure scrollbars are visible and customize their appearance:

.horizontal-fade, .upper-fade {
    display: none;
}
.chat-container {
    scrollbar-width: thin !important;
    scrollbar-color: #FF0000 transparent !important; /* Change colors as needed */
}

‍

4. Hide Chat Bubble on Mobile Devices

To remove the chat bubble from appearing on mobile devices:

@media only screen and (max-width: 760px) {
    .dante-embed-chat, .dante-embed-icon, .dante-embed-tooltips {
    display: none !important;
    }
}

5. Change the Color of the Prompts Border

To change the prompt border color to white, use the CSS below. For a different color, simply adjust the color code in the CSS.

.suggestions-wrapper .suggestion-box {
border: 1px solid #fff !important;
}

‍6. Hide Suggested Prompts from Tooltips

To remove suggested prompts from appearing in tooltips:

.tooltip-container .chat-left-box.tooltip-prompt {
    display: none;
}

7. Change the Language of the “Submit” and “Skip” Buttons in Lead Gen

To customize the text on “Submit” and “Skip” buttons:

.data-form-submit, .data-form-skip span {
    display: none;
}
.data-form-submit:after {
    content: 'Submit'; /* Customize the submit button text */
}
.data-form-skip:after {
    content: 'Skip'; /* Customize the skip button text */
}

8. Change the Color of the Send Button

To change the color of the send button:

.btn-submit-container button {
    background-color: red !important;
    color: white !important; /* Ensure text color contrasts well with background */
}

9. Change the Dimensions of the Chat Bubble

To modify the size of the chat bubble:

.dante-embed-chat {
    width: 100px !important;  /* Set width as needed */
    height: 300px !important; /* Set height as needed */
}

10. Hide the Scrollbar from the Suggested Prompts

To hide the scrollbar from the suggested prompts:

.suggestions-wrapper.suggestions-all{
   scrollbar-width: none !important;
}

‍

11. Changing the Background Color for the Book a Meeting Button

To change the background color of the 'Book a Meeting' button:

.book-meeting { background: #FFA800 !important; }

For a different color, simply adjust the color code in the CSS.

‍

12. Change the AI chatbot's width to 100% on iFrames and direct links

To make the AI chatbot's width 100% on iFrames and direct links, use the following CSS:

#chat-box{
  max-width: 100% !important;
  width: 100% !important;
}
.suggestions-paper{
max-width: 100% !important;
}
.suggestions-paper .MuiContainer-root {
max-width: 100% !important;
}

13. Hide the AI Chatbot’s Profile Picture in the Sent Messages‍

To hide the AI chatbot’s profile picture completely, use the following CSS:

.card-logo{ display: none; }

14. Change the Color of Links

To set the color of all hyperlinks to blue, use the following CSS:

a {
    color: blue !important;
}

‍

Feel free to modify these snippets according to your needs to enhance your interface’s functionality and aesthetics.

Click Embed Preview to see how your embedded AI chatbot will look. A preview will pop up separately. You can use the drag icon to move the pop-up box around the interface.

Next steps: Sharing your AI chatbot

Congratulations—Now that you’ve customized your AI chatbot, click Next to learn the different ways you can share it. If you need to go back and amend your AI chatbot, follow the steps in Customizing and white-labeling your AI chatbot. 

If you get stuck at any point, you can click on the Learning Hub pop-up at the top right corner of the app for assistance.

For additional support and to connect with other users, join our Discord community.