Improve Chat styling

Feature Requests
1

The Icebreaker text is so small and the light grey makes it almost unreadable. Please improve, and ideally add options to control this from the Editor.

Also, what is the purpose/context for the Copy icon? Our testers have all been confused by this.

image
image2095Ă—1630 190 KB

2

@akpsolutions
Thank you for your feedback! Our team is constantly working on new ways to improve both our Studio and Pickaxe design tools, so your input is really appreciated.

For now, you can adjust the appearance of the icebreaker prompts by going to your Studio’s settings, scrolling down to the Website Code Injection section, and adding this code to the Header:

<style>
/* Change ice breaker color */
div[class*="group flex flex-grow cursor-pointer"][class*="border"] {
  color: #000 !important;
  border-color: deeppink !important;
}
div[class*="group flex flex-grow cursor-pointer"][class*="border"] p {
  color: pink !important;
}
</style>

You can change the colors in the code above to suit your preference.

If the code doesn’t seem to work for you, try adjusting the div class selector. You can do this by right-clicking on one of your icebreakers, selecting “Inspect,” and navigating to the div that controls the icebreaker styling. This will help you fine-tune the CSS for your specific setup.

Regarding the copy icon, it lets users quickly copy the chatbot’s response to their clipboard.

Before:

ice
ice1030Ă—349 12.5 KB

After:
ice 2
ice 21077Ă—337 18.2 KB

1 Like
3

Many thanks @danny_support this is so helpful! The code worked easily and perfectly. I’m excited that we can now easily update this with CSS as needed.

Thanks you, too, for the explanation of the Copy icon.
We do a lot of user testing so will always be happy to suggest features and improvements :slight_smile:

1 Like