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
4

@danny_support wondering if you have any similar “hacks” for embedded pickaxes?
My CSS knowledge is about 20 years old now… so I’m useless.

The embed works well but I have the same issues with the text being very hard to read. Would love to change the colors and fonts the same way as you solutioned above.

image
image1467Ă—771 97.8 KB

Any tips/ideas?

5

Hi!
This should let you style your icebreakers as you wish:

<style>
.pxe-group.pxe-cursor-pointer.pxe-border {
  background: #e3e6ff !important;
  border-color: #6247aa !important;
}
.pxe-group.pxe-cursor-pointer.pxe-border p {
  color: #2d085e !important;
  font-weight: bold !important;
  font-size: 1.1em !important;
}
</style>

You can add this snippet to your Studio’s website code injection (in the Settings tab), directly into a tag on your website, or in your site’s main CSS document.

Important: The DOM structure can change at any time, which means this code may stop working in the future if any of the class names are updated. If that happens, you can always right-click the element, use Inspect Element in your browser to find the updated classes, and adjust your code(or just reach out to me and I’ll help you tweak it!)

There may also be more customization options available in the future, but for now, this workaround is one of the ways to handle it.

4 Likes
6

@danny_support you are my hero - this worked like a charm!

Duly noted about the structure changing… as I understand it will be many months or more until we will have more visual customization options, would it be possible to have the class names documented somewhere that we can check in future? Also to be able to know what’s possible? For example, now that the buttons are styled, I’d love to also be able to change the bg color and add a border to the entire popup. (Or maybe I just need to creep on what’s there and Inspect Element each time?)

Thanks for your patience with all my n00b questions.

1 Like