Jacada Interact enables you to define a Theme for each of your Mobile Web, Web Self Service, and Agent applications, so that users can run Interactions with a customized look and feel. The default Themes (provided out-of-the-box) are available to you upon the creation of your account. In addition, you can create your own customized Themes, based on any of the default Themes.

All Interactions run in a specific application will always use the Theme that is currently selected. If you want different Interactions to have different Themes, it is necessary to create a new application and change its Theme accordingly.

The Themes page of the Admin Console enables you to view and manage the Themes defined for your account. The page is accessed from the menu bar by selecting Resources > Themes.

A Theme is dedicated to a specific client type: either Mobile (Mobile Self Service client) or Web (includes Web Self Service and Agent Application clients). The default Web Themes are listed on the Themes page first, followed by the default Mobile Theme. Any customized Themes that have been added to your account are listed after the default Mobile Theme.

The Used by column of the Themes grid indicates whether a Theme is currently being used by one or more applications. Themes currently being used by an application cannot be deleted.

Viewing Theme Details
Clicking the link in the Theme Name column opens the Theme's Details page, which enables you to view the cascading style sheets (CSS) that define the Theme.

The Details page comprises the following tabs:

  • Jacada CSS: Determines the look and feel of the Jacada elements and controls. For details about some of the important classes included in the CSS, refer to Jacada CSS Classes.


    Note: Older Themes that are based on JQuery will also display and use a stylesheet named theme.css. While the Web Designer still supports this stylesheet, it cannot be used for creating or editing new Themes.

  • Logo: Enables you to upload a Logo for use in the selected Theme.

To exit the Details page and return to the Themes page, click Close.

Note: Customized Themes (i.e., a Theme that is not a default Theme) can be modified from the Details page. For more information, refer to Editing Themes.

Jacada CSS Classes

The following sections describe some of the important classes that are included in the Jacada CSS.

.jaa-full-mode-chat
This class contains the settings that determine the size and appearance of the Chat window in the Web Self Service application when the application is presented in Full Display mode (not popover mode). For example:

.jaa-full-mode-chat { 
              position: fixed;
              /*-webkit-box-shadow: 0 0px 5px #6B6B6B;*/ 
              /*box-shadow: 0px 0px 5px #6B6B6B;*/ 
              border-style: solid; 
              border-width: thin; 
              border-color: #d3d3d3;
              z-index: 999; font-size: 75%; 
              bottom: 0px;
              border-top-left-radius: 8px; 
              border-top-right-radius: 8px;
              width: 420px; 
              height: 570px; 
              left:100px; 
              bottom:0; 
           background-color:white; 
              display:none; 
              border: 1px solid #aaa;
 }

.jaa-full-mode-container
This class contains the settings that determine the size of the Web Self Service application window when the application is presented in Full Display mode (not popover mode). In the following example, the application window occupies the entire screen:

.jaa-full-mode-container {
       width:100%;
       height: 100%;
}

.jma-has-breadcrumb
This class contains the settings that control the presentation of the breadcrumbs trail. In addition to the positioning of the trail itself, specific settings determine the look and feel of:

  • The Home icon (representing the first step of the Interaction).
  • The separator icon.
  • The dots that are displayed to indicate that the trail is truncated.
  • The popup that is presented to show hidden breadcrumbs.

The figure after the code example shows how these elements appear in runtime.

.jma-has-breadcrumb .ui-content {
    padding-top: 40px !important;
}
.jma-breadcrumb-container {
    padding-top: 5px;
    padding-bottom: 5px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 45px;
    left: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.jma-breadcrumb-home {
    background-image: url('./images/home-icon.png');
    width: 20px;
    height: 20px;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 3px;
}
.jma-breadcrumb-separator {
    background-image: url('./images/separator.gif');
    width: 20px;
    height: 20px;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}
.jma-breadcrumb-dots {
    z-index: 1001;
}
.jma-breadcrumb-dots,
.jma-breadcrumb-element {
    display: inline-block;
    height: 20px;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
    color: #0E91D6;
    margin-top: 10px;
}
.jma-breadcrumb-popup-element:active,
.jma-breadcrumb-popup-element:hover {
    background-color: #DBEAF9;
}
.jma-breadcrumb-popup {
    background-color: #ECECEC;
    padding: 5px;
    border: 2px solid #ddd;
    box-shadow: -5px -5px 5px #6f6f6f;
    top: 105px;
    left: 15px;
    position: fixed;
}
.jma-breadcrumb-popup-elements {
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
}
.jma-breadcrumb-popup:after {
    position: absolute;
    content: "";
    top: -10px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ECECEC;
}
.jma-breadcrumb-popup:before {
    position: absolute;
    content: "";
    top: -12px;
    left: 38px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ddd;
}
.jma-breadcrumb-popup-element {
    color: #0E91D6;
    margin: 5px 10px;
}

Changing Default Contact Us Icons
By default, Jacada supplies the icons that appear on the Contact Us page when relevant customer assistance features are enabled (Email, Call, Call Return, and Chat). The default icons are:

https://jacada.zendesk.com/hc/en-us/article_attachments/200784457/contactusicons_zoom80.png

If you want to replace the default icons with your own icons, use the structures presented below.

Web Self Service
For the Web Self Service application, use the following structure in the Jacada CSS. This structure is valid for all browsers except for IE 8.

.jaa-icon-chat {

       background-image: url('/agent-app/images/chat-icon.png') !important;

}


.jaa-icon-call {
       background-image: url('/agent-app/images/call-icon.png') !important;
}
 
.jaa-icon-callback {
       background-image: url('/agent-app/images/callback-icon.png') !important;
}

.jaa-icon-mailto {
       background-image: url('/agent-app/images/email-icon.png') !important;
}

For IE 8 browser support, use the following structure:

@media \0screen {
       .jaa-icon-chat {
              background-image: none !important;
              filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/agent-app/images/chat-icon.png',sizingMethod='scale');
       }

       .jaa-icon-call {
              background-image: none !important;
              filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/agent-app/images/call-icon.png',sizingMethod='scale');
       }

       .jaa-icon-callback {
              background-image: none !important;
              filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/agent-app/images/callback-icon.png',sizingMethod='scale');
       }

       .jaa-icon-mailto {
              background-image: none !important;
              filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/agent-app/images/email-icon.png',sizingMethod='scale');

       }

}

Mobile Web App
For the Mobile Web application, use the following structure in the Jacada CSS:

.jma-contactus-chat-button {
    background-image :  url('images/chat-icon.png') !important;
    background-repeat: no-repeat !important;
}

.jma-contactus-email-button {
    background-image :  url('images/email-icon.png') !important;
    background-repeat: no-repeat !important;
}

.jma-contactus-call-button {
    background-image :  url('images/call-icon.png') !important;
    background-repeat: no-repeat !important;
}

.jma-contactus-callback-button {
    background-image :  url('images/callback-icon.png') !important;
    background-repeat: no-repeat !important;
}

Customizing Themes Using the themeUrl Parameter

By default, the Theme used in the Mobile Self Service application is one of the swatches in the jma-theme.css file, located in the client’s installation directory. When required, you can customize the jma-theme.css file using Mobile ThemeRoller, and then place the file in the location of your choice. The themeUrl parameter is then used to point to the location of the modified jma-theme.css file. If this parameter is not passed, the jma-theme.css file provided with the client installation is used.

Note: When modifying the jma-theme.css file, do not change the name of the file. When changing the location of the file, make sure to copy the images folder from the original client’s location to the new location of the css file.

In the following examples, the f swatch from a jma-theme.css file located in the http://MyThemeServer:8080/myThemeFolder URL is used. Note that the name of the css file is omitted, since it is assumed that the file name will be jma-theme.css.

Direct Interaction Link Example

http://10.90.18.72:8080/selfService?interaction=1374387336331-6601d54db1bd76faac36 f277
c9213ffe4358e1-20d4 &appkey=524bd189f7a42c49c5dd601a&accountId=12345678&theme=f&
themeUrl=http://MyThemeServer:8080/myThemeFolder"> 

Interactions List Link Example

http://10.90.18.72:8080/selfService/coverApp/index.html?appkey=524bd189f7a42c49 c5dd601a
&accountId=12345678&theme=f&themeUrl=http://MyThemeServer:8080
/myThemeFolder

Revision:

Comments