Open Chatbot Directly only on Desktop

Hello Kurt,

I have added box for custom CSS for the next release.

There are so many quality of life improvements just like that all competing for priorities.

As always thank you for your feedback and patience.

Stephen

Hello Kurt,

I just push V 1.8.7 to production.

• Added functionality for a conversation reset clearning user interaction history.
• Improved conversation continuity for longer interactions.
• Now supports your custom avatar – see Settings > Avatars for more information.
• Corrected font color in appearance settings for the chatbot.
• Support added for user customizable CSS rules – see Settings > Appearance for more details.
• Quick fix for collapse button styling

Let me know if you continue to experience issues.

Stephen

Hello Stephen,

thank you for the update! Super excited about the plugin improving so quickly. I just tried to insert my custom CSS but it does not seem to have any effect. This is my code:

.chatbot-bubble {
background-color: #c4fbf7;
color: #ffffff;
box-shadow: 0px 3px 6px rgba(32, 95, 101, 0.16);
} chatbot-chatgpt {

background-color: #c4fbf7;
box-shadow: 0.2px 5px rgba(32, 95, 101, 0.3);
}

@media (max-width: 700px) {
.chatbot-narrow {
width: 250px !important;
height: 300px !important;
overflow: visible;
}
}

@media (min-width: 701px) {
.chatbot-narrow {
width: 300px !important;
height: 450px !important;
overflow: visible;
}
}

.embedded-style {
background-color: #c4fbf7;
box-shadow: 0.2px 5px rgba(32, 95, 101, 0.3);
} chatbot-chatgpt-header {

background-color: #205f65;
} chatbot-chatgpt-submit {

background-color: #c4fbf7;
}

.user-text {
background-color: #205f65;
}

@media (max-width: 700px) {
.bot-message {
text-align: left;
font-size: 14px!important;
line-height: 1.5!important;
}
.user-message {
text-align: right;
font: inherit;
font-family: inherit;
font-size: 14px!important;
line-height: 1.5!important;
}
}
@media (min-width: 701px) {
.bot-message {
text-align: left;
}
.user-message {
text-align: right;
font: inherit;
font-family: inherit;
}
}

.bot-text {
background-color: #f9c300;
color: #000000;
}

.chatbot-collapse-btn {
background-color: #205f65;
color: #ffffff;
}

.chatbot-collapse-btn:hover {
background-color: #1c4b4f;
}

.chatbot-collapsed {
background-color: #205f65;
color: #ffffff;
} chatbot-open-btn {

background-color: #205f65;
color: #ffffff;
} chatgpt-open-btn {

background-color: #205f65;
box-shadow: 2px 4px 15px rgb(32, 95, 101);
color: #ffffff;
} chatgpt-open-btn:hover {

background-color: #1c4b4f;
}

.typing-indicator {
background-color: #f9c300;
}

.typing-dot {
color: #000000;
}

.chatbot-chatgpt-custom-button-class {
background-color: #205f65;
}

.chatbot-chatgpt-custom-button-class:hover {
background-color: #f9c300;
color: #000000
}

Do you have an idea why it does not work? Also the background color selector in the Appearance settings does not seem to have an effect

Hello Kurt,

Try adding some !important statemtns after one or more of the CSS elements.

I need to change the order that the custom CSS is injected into the page.

It’s loading after the other appear elements. UGH!

Let me see what I can get done today/tomorrow.

Thank you for bringing this to my attention.

Respectfully,

Stephen

Hello Stephen,

unfortunately the !important Statements don’t work – it stays the same design.

Looking forward to the next update to check it out and happy to provide you my feedback of course!

Best, Kurt

Hello Kurt,

Just tested the bot with you CSS (above). I now get a blue-ish background.

I’ll be pushing an update (V 1.9.0) out later today or early tomorrow.

Just need to do some testing on other additions I’ve made.

Thank you for your patience.

Stephen

Hello Stephen,

sounds great, I will give it a try with the new update! Will let you know if it works then.

Best, Kurt

Hello kurtberlin (@kurtberlin),

Just release V1.9.0 into production.

Please update your version of the plugin and try again.

Remember to clear your browser cache before any testing.

Thank you for your patience.

Stephen

Hello Stephen,

thanks a lot! I just tried it out and most of the CSS settings work fine. Just the following things don’t seem to be customizable: https://ibb.co/183ZZ8v Can you tell me the appropriate CSS code to enter for them please?

And another thing I noticed: I am using an OpenAI assistant with the assistant API. Before some of the updates it pulled the prompt from my settings inside the assistants API, now it seems like it only uses the prompt set in your plugins settings under “API/settings” although I have an assistant ID stated in the shortcode for the chatbot. Is this new? Has there been a change? Thanks!!

PS: Also it seems like I can not change the custom button settings anymore. Even in incognicto tab, the custom buttons seems to be set as is was before and when I change the text of it or try to deactivate the custom buttons completely, it does not have effect in the frontend

Hello Kurt,

Look for the following items … apologies in advance for the naming inconsistencies. Give these css elements a try.

.chatbot-collapse-btn

.chatbot-collapse-btn:hover

#chatgpt-open-btn

#chatgpt-open-btn:hover

.user-text

.bot-text

I took a look at the custom buttons in V1.9.0 and don’t seem to have any issues with them. Can you clear your browser’s cache and your site’s cache (especially if you have caching plugin)? And give it another try?

Stephen

• This reply was modified 1 year ago by kognetiks.