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 Links#

To set the color of all hyperlinks to blue:

a {
    color: blue !important;
}

4. Display Scrollbars#

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 */
}

5. Hide Chat Bubble on Mobile Devices#

To hide embedded chat elements on mobile screens:

@media only screen and (max-width: 760px) {
    .dante-embed-chat, .dante-embed-icon, .dante-embed-tooltips {
    display: none !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 he 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. Custom “See More/Less” Text#

To change the “See more” and “See less” text:

.suggestion-box:last-child span {
    display: none;
}
.suggestion-box#see-more:after, .suggestion-box#see-less:after {
    content: 'More options'; /* Customize for 'See more' */
    content: 'Less options'; /* Customize for 'See less' */
}

9. 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 */
}

10. 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 */
}

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

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