Viewing default styles

To override custom styles or add new ones, you'll first need to know which classes are defined and how they are used by default. Scheduler Widgets use two CSS files to define custom classes, and you can download the two default stylesheets to see them for yourself.

Use the following steps to download a copy of both files.

Quick access: Digital > Widgets > Embed

1. On the Widgets page, click Embed in the row associated with your Widget.
2. In the Embed modal window, copy the two URLs contained in the two <link> elements in Box # 2, as seen in the example below:

   <link rel="stylesheet" 
   href="https://sf98519b54f83b98.cbridgert.vhtcloud.com/vht-conversation-bridge-runtime.css" />
   <link rel="stylesheet" 
   href="https://sf98519b54f83b98.cbridgert.vhtcloud.com/vht-conversation-bridge-brand.css" />

3. Paste the addresses directly into a web browser or use your preferred method to download the two CSS files:

   

These two stylesheets will show you the default CSS classes applied to your Widgets and allow you to see the properties defined.

Determining which classes are used for which elements

Once you have the CSS class definitions, how do you know which HTML elements use which CSS classes? By embedding a Widget into a simple test page, you can use your web browser's developer tools to inspect each element of a Widget to find out.

To find which class affects a particular element:

1. Embed a Widget into a test page or load a Widget already deployed in production.
2. Press F12 or whatever key combination opens the developer tools for your browser.
3. In the Elements tab, locate the HTML element corresponding to a part of the Widget you'd like to learn about. You should see the CSS classes applied to that element listed in a separate section.

Example

The following example shows a simple Widget embedded into a local HTML file. When analyzing the "Callback Request Form" H1 header, we can see two CSS classes applied to it:

• .vht-widget
• .vht-inline-header

We can also see the font family, weight, size, and other properties applied to those classes. Initially, these properties will match the definitions you found in the CSS files themselves (until you make your own changes).

Overriding styles

Before discussing how to override the default CSS styles for Scheduler Widgets, it is important to understand how hierarchy and overrides work in CSS. That topic is not in the scope of this guide, but there are many good resources available online. For our purposes, there are two notes about CSS hierarchy that will be helpful:

• Style definitions placed later in an HTML file will override styles placed earlier.
• More specific definitions override less specific definitions.

An example workflow

Here is an example workflow that you might use to override a particular style:

1. Locate the element of your Widget that you wish to change.
2. Identify the default CSS class that applies (see the prior section for steps).
3. Create a new CSS file.
4. In the new CSS file, define the same class that applies to the element you wish to change.
   1. Make the definition more specific than the default, if possible. For Scheduler Widgets, you can do this by adding the body element before the class definition. This makes your definition more specific, since the defaults only define the class by itself.
5. Define new properties for the CSS class to make your desired changes.
6. Add a link to your new CSS file into your HTML, lower than the existing links to the default stylesheets.

Example

In this example, we want to change the color of the Request a Callback button for a popup-style Widget. First, we find the button in a web browser's developer tools, and we see that the .vht-widget button class is setting the background-color property to #373342 (black).

Next, we create a custom stylesheet. In that file, we define the .vht-widget class (applied to a button) and define a different value for the background-color property (#b350af - pink). We will make our definition more specific than the default by defining body .vht-widget button rather than simply .vht-widget button.

Lastly, we will add a link to the new stylesheet, lower than the existing links that we obtained from the Scheduler user interface.

With all this in place, we can refresh the Widget and see the button now has a new color!

Alternative: define inline styles in the user interface

For a more simplified approach, there are several configurable fields in the Mindful UI that allow you to define custom <style> attributes via HTML. Although this is not the preferred method, you can use this to achieve limited style changes.

Example

In this example, we want to change the color of our callback-offer text without using a custom CSS file. We know that this text is found in the Scheduler Template, in the Offer ASAP & Scheduled Callback HTML field, so we can add a little custom styling there.

Inline styles can be defined in various ways. For this example, we place the offer text in a <p> element and give that element an id of offerText. Then, in the same text field, we define a custom style for the offerText id to set the color property to blue.

After refreshing the Widget, we now see our offer text in blue!