Embed Form "Send" Button Arrow Not Showing

General
1

Hi,

I need some help with displaying the “Arrow” on the “Send” button text to actually show on my site just like it is on the preview. All other design elements work as expected. Any help would be appreciated.

image
image1760×718 36.1 KB

Below is how it is shown on the website where i have this embed code

image
image930×602 11.2 KB

2

Hi @malayalidotcom ,

Thank you for reaching out!

We just tested the same embed on a separate page, and the arrow displayed correctly.

image
image1920×440 49.8 KB

This confirms that the arrow is included in the deployment and that the Pickaxe button configuration is working.

The arrow is most likely being hidden by CSS from your WordPress theme, custom CSS, or a plugin that modifies buttons or SVG icons.

We also found that kerala.global loads these global CSS rules:

:where(path) {
  fill: unset;
}

:where(path) {
  fill: inherit;
}

These rules can override the fill styling of SVG icons, including the arrow in the Send button, and may be causing it to disappear.

However, we cannot confirm this is the exact cause without inspecting the specific page where the embed is installed. Could you please share the direct URL of that page? Once we have it, we can check which CSS rule is being applied to the arrow.

3

@danny_support , Thank you so much for investigating this issue. I was able to add some CSS code to fix this issue, and now the SVG icon for the arrow is displaying properly. Really appreciate your help and pointers. I am sharing below the CSS code that I did for my WordPress website, which is using the Elementor page builder plugin. Use it at your own risk. It worked for me, and I hope it works for you too. Please consider this as closed.

/* Universal fix for all Pickaxe inline chatbot embeds */
div[id^="deployment-"] button svg,
div[id^="deployment-"] svg {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
fill: currentColor !important;
stroke: currentColor !important;
}

/* Ensure button containers across all bots render correctly */
div[id^="deployment-"] button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
4

Hi @malayalidotcom ,

Thank you for sharing the CSS workaround for other Elementor users who may encounter the same conflict.