How To Apply My Custom CSS For Estimated Widget?

Learn how to apply custom CSS for the ETA widget directly from the app backend. Customize the widget's appearance to match your theme design or business requirements. Once applied, the message display will align with your custom CSS settings.

To apply custom CSS for your delivery message

Go to the app settings-> General tab



Scroll down and find the Developer Options tab, then click to expand it.



In the Custom CSS field, add your CSS for customization.

Utilize the default class for widget personalization (USE THIS CLASS FOR ETA MESSAGE WIDGET: .deliverydate.sb_delivery{}).

Add your CSS styles as per your desired customization.

Copy code

.deliverydate.sb_delivery {
  /* Your CSS code here */
}

6 .Click on the Save button to apply and save the changes.

Example CSS:

/* Custom CSS for Estimated Widget */
 .deliverydate.sb_delivery {
   /* Your CSS styles here */
   background-color: #f0f0f0;
   color: #333;
   font-size: 16px;
   border-radius: 5px;
   padding: 10px;
 }

Here's an example of how you might add custom CSS for an Estimated Widget:


Adjust the CSS properties (such as background-color, color, font-size, etc.) to achieve the desired look for your Estimated Widget.|

This guideline should help you customize the appearance of your delivery message widget effectively. If you have any further questions or need assistance, feel free to ask.

Updated on: 21/08/2024