Skip to main content
Customizing Widget UI
Updated over 2 months ago

Use this guide to change the look & feel of the Asklo widget on your store. This guide explain how you can change the colours, fonts etc. of the Asklo button and it's components.

Pre-requisites

  • You may need developer assistance for customizing the UI.

  • You will need access to your store's theme files.

⏳ Estimated Implementation Time: 60 Minutes

By default, Asklo will load the default CSS file on your product pages. You can override the default CSS file with your own overrides. Before we look the overrides, take a moment to understand the different components of the Asklo widget as explained below:

1. Popup Style Ask AI

Asklo Widget Components (Popup Style Ask AI)

Widget Element

Description

CSS Component

:one:

Ask Product AI Button

Change the colour of Asklo Product AI Button

klevu-product-query::part(klevu-query-open-button) {
--background-color: #bce33b !important;
--background-hover : #99bb26 !important;
}

User Chat Bubble

Change the font colour User Chat Bubble

:root {
--klevu-chat-bubble-background: #053159 !important;
--klevu-chat-bubble-text-color: #ffffff !important;
}
:three:

Asklo Chat Bubble

Change the font colour Asklo Chat Bubble

:root {
--klevu-chat-bubble-background-remote: #dbe6f0 !important;
--klevu-chat-bubble-text-color-remote: #053159 !important;
}
:four:

Positive/Negative Feedback

Change the colour of Positive/Negative feedback icon

:root {
--klevu-color-positive: #00E933 !important;
--klevu-color-negative: #F46616 !important;
}
:five:

Question Input Text field

Change the colour of Positive/Negative feedback icon

klevu-product-query-popup::part(textfield-input) {
background-color: #ededed !important;
color: #053159 !important;
}
:six:

Submit Button

Change the colour of Submit button icon

klevu-product-query-popup::part(button-base) {
--background-color: #bce33b !important;
--background-hover : #99bb26 !important;
--text-color: #000000 !important;
:seven:

Loading Indicator

Change the colour of Loading Indicator

:root {
--klevu-loading-indicator-color: #bc5631 !important;
}

Asklo UI Customizations Example (Popup Style Ask AI)

The following example shows how to customize the component colour and text colour.

/* General Variables */
:root {
--klevu-chat-bubble-background: #053159 !important;
--klevu-chat-bubble-text-color: #ffffff !important;
--klevu-chat-bubble-background-remote: #dbe6f0 !important;
--klevu-chat-bubble-text-color-remote: #053159 !important;
--klevu-color-positive: #00E933 !important;
--klevu-color-negative: #F46616 !important;
--klevu-loading-indicator-color: #bc5631 !important;
}

/* Ask Product AI Button */
klevu-product-query::part(klevu-query-open-button) {
--background-color: #bce33b !important;
--background-hover : #99bb26 !important;
--text-color: #000000 !important;
}

/* Question Input Text field */
klevu-product-query-popup::part(textfield-input) {
background-color: #ededed !important;
color: #053159 !important;
}

/* Question Submit Button */
klevu-product-query-popup::part(button-base) {
--background-color: #bce33b !important;
--background-hover : #99bb26 !important;
--text-color: #000000 !important;
}


2. Embedded FAQ with Ask AI

Asklo Widget Components (Embedded FAQ with Ask AI)

Widget Element

Description

CSS Component

:one:

Widget Header

Customize the widget header by changing its font and background color

:root { 
--klevu-product-query-popup-header-background: #color !important;
--klevu-product-query-title-color: #color !important;
}

Widget Border

Change the color and radius of the widget border

:root {
--klevu-product-query-popup-border-color: #color
!important;
--klevu-product-query-popup-border-radius: 4px !important;
}
:three:

User Chat Bubble

Change the font and background color of the User Chat Bubble

:root { 
--klevu-product-query-bubble-background: #color
!important;
}
:four:

Asklo Chat Bubble

Change the font and background color of Asklo Chat Bubble

:root {
--klevu-product-query-embedded-response-bg: #color !important;
--klevu-product-query-bubble-text-color-remote: #000
!important;
--klevu-product-query-bubble-background: #color !important;
}
:five:

Positive/Negative Feedback

Change the color of Positive/Negative feedback icon

:root {
--klevu-color-positive: #color !important;
--klevu-color-negative: #color !important;
}
:six:

Loading Indicator

Change the color of the loading Indicator

:root {
--klevu-loading-embedded-indicator-color: #color !important;
}

Input Box

Change the background color of input box and customize the font of the input placeholder ;

customize input box border

:root {
--klevu-product-query-input-background-color: #color !important;
--klevu-product-query-input-border: 4px !important;
--klevu-product-query-input-background-color: #color !important;
--klevu-product-query-input-placeholder-color: #color !important;
}

Submit Button

Change the background and font color of the submit button;

Customize radius

:root {
--klevu-product-query-submit-button-background-color: #color !important;
--klevu-product-query-submit-button-background-hover: #color !important;
--klevu-product-query-icon-color: #color !important;
}

Pre-populated Questions

Change the color and background color of pre-popualated questions.

:root {
--klevu-product-query-prepopulated-questions-color: #color!important;
--klevu-product-query-prepopulated-questions-background:#color !important;
--klevu-product-query-prepopulated-questions-hover-background:#color !important;
--klevu-product-query-prepopulated-questions-hover-color:#color !important;
}

Asklo UI Customizations Example (Embedded FAQ with Ask AI)

:root {
--klevu-product-query-popup-height: 100%;
--klevu-product-query-popup-width: 100%;
--klevu-product-query-popup-header-background: #1e3a8a; /* Deep Blue */
--klevu-product-query-title-color: #93c5fd; /* Light Blue for header title */
--klevu-product-query-popup-border-color: #93c5fd; /* Light Blue for borders */
--klevu-product-query-popup-border-radius: 5px; /* Subtle rounding for modern look */
--klevu-product-query-bubble-text-color-remote: #2563eb; /* Medium Blue for remote answers */
--klevu-product-query-bubble-text-color: #1e3a8a; /* Deep Blue for main text */
--klevu-product-query-bubble-background: #dbeafe; /* Light Blue background */
--klevu-product-query-embedded-response-bg: #eff6ff; /* Very Light Blue for embedded responses */
--klevu-loading-embedded-indicator-color: #2563eb; /* Medium Blue for loading indicator */
--klevu-product-query-chat-height: 100%;
--klevu-product-query-chat-max-height: 100%;
--klevu-product-query-chat-bubble-border-radius: 8px; /* Softer bubble shape */
--klevu-product-query-chat-bubble-border-radius-remote: 8px;
--klevu-product-query-submit-button-background-color: #1e40af; /* Darker Blue for buttons */
--klevu-product-query-submit-button-background-hover: #1e3a8a; /* Deep Blue on hover */
--klevu-product-query-icon-color: #ffffff; /* White for icons */
--klevu-product-query-submit-button-border-radius: 5px; /* Subtle rounding for buttons */
--klevu-product-query-input-background-color: #ffffff; /* White input field */
--klevu-product-query-input-color: #1e3a8a; /* Deep Blue for input text */
--klevu-product-query-embedded-chat-background-color: #ffffff; /* White widget background */
--klevu-product-query-input-border: 1px solid #93c5fd; /* Thin Light Blue border */
--klevu-product-query-input-border-radius: 5px; /* Soft rounding for inputs */
--klevu-product-query-input-placeholder-color: #93c5fd; /* Light Blue for placeholder */
--klevu-product-query-input-placeholder-font-weight: 300; /* Light font for placeholder */
--klevu-product-query-answer-text-color: #1e3a8a; /* Deep Blue for answers (never white) */
--klevu-product-query-prepopulated-questions-color: #1e3a8a; /* Deep Blue for pre-populated questions text */
--klevu-product-query-prepopulated-questions-background: #eff6ff; /* Very Light Blue background for pre-populated questions */
--klevu-product-query-prepopulated-questions-hover-background: #dbeafe; /* Light Blue background on hover */
--klevu-product-query-prepopulated-questions-hover-color: #1e40af; /* Darker Blue on hover for text */
}


Steps to override default CSS

Shopify Store

  1. Create new CSS file

  2. Define the parameters which you want to modify in your CSS file.

  3. Login to your Shopify Admin Panel & Upload CSS file

    • Find the theme you want to edit, then click on "Actions" and select "Edit code".

    • In the Assets folder, click "Add a new asset".

    • Choose your CSS file and upload it.

  4. Include the Custom CSS File in Your Theme

    • Still in the "Edit code" section, open the theme.liquid file (usually located in the Layout folder).

    • Add the following code inside the <head> section to link your custom CSS file:

      <link rel="stylesheet" href="{{ 'your-custom-file.css' | asset_url }}">

    • Replace your-custom-file.css with the name of your uploaded CSS file.

    • Save your changes in the theme.liquid file.

  5. Preview your storefront to ensure that the custom CSS is being applied.

Custom Store

  1. Create a new CSS file.

  2. Add your custom styles to the new CSS file.

  3. Upload the new CSS file to your CSS folder.

  4. Ensure that you call this custom CSS file on your product page template.

  5. Preview your storefront to ensure that the custom CSS is being applied.

Please contact us if you need assistance.

Did this answer your question?