Customization Options for CSS

Our platform allows end users to tailor the appearance and behavior of their AI chatbot’s interface using various CSS snippets. 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.

‍

Feel free to modify these snippets according to your needs to enhance your interface’s functionality and aesthetics. You can also use ChatGPT to get ideas for custom CSS code.

Click ‘Confirm’ to finish and save your customization, or click ‘Next’ for further customization options.