Applying CSS to WebIVR MicroApps
This page lists the CSS classes that are rendered into HTML at runtime for WebIVR MicroApps.
GAAP provides a user-friendly interface for designing visual themes for MicroApps (refer to the GAAP Help for more information). However, the information on this page allows web designers to directly configure CSS for MicroApps using the CSS Override section in the Personas > Themes view.
Overview
Body
Assign the class body to the body element.
<body class="body">Title bar
You can render the title bar into the body using a div element and an h1 element. The div element uses the class title-bar and the h1 element uses the class title-bar-text.
<div class="title-bar">
<h1 class="title-bar-text" id="title-bar-text">Title</h1>
</div>Central area
You can render a central area into the body as three div elements, with the classes being outer, middle, and blocks-container (from outermost to innermost).
<div class="outer">
<div class="middle">
<div class="blocks-container" id="blocks-container">
...
</div>
</div>
</div>You can render a footer with the class footer. GAAP uses footers to hold buttons related to dialog defaults, as well as the End button (the End button is always present to allow the caller to end the session, as closing the window does not end the session on iOS Safari). Defaults such as Agent also render in the footer.
You render buttons as anchor elements with the default-menu-option class. The global menu option has the menu_option_agent class (the name of the global option is appended). Consequently, you can individually style added options.
The footer is divided into two other div elements (with classes close-footer-button-container and footer-buttons) to separate the End button and the other menu options.
<div class="footer">
<div class="close-footer-button-container">
<a class="default-menu-option" id="close-window-button">End</a>
</div>
<div class="footer-buttons" id="footer-buttons">
<a class="default-menu-option menu_option_agent">Agent</a>
</div>
</div>Blocks
All blocks are rendered inside the blocks-container.
and will be assigned the “block” class (see below). An individual styling can be placed onto a block as the class rendered for it shall be the name of the block. Spaces in the name will be replaced with underscore and the word ‘block’ prepended to it. A ‘persona’ class is also rendered onto the block with the persona name appended if set, otherwise nothing.
E.g. A message block in the GUI as so, with no persona set:
Will render the following:
It is a block and so contains the block class, a block prefix onto the block name and a persona with no name after it (indicating default).
Prompts
Prompts are used across Message, Menu, Question and Recording block types. They will be rendered inside div element’s that represent the block to which they belong. Here we can see the prompt reference in the GUI is 0032.
This will render the following:
Hey, I'm Kate!
We will now look at the parent blocks that make use of such prompts.
Message Blocks - Prompts Message blocks have a single purpose, to output a prompt to the IVR, or in this case, text to the MicroApp. They will be wrapped in a div with classes “indent-right” and “message-prompt”. Inside another div will be rendered with a class that is individual to the prompt using the prompt reference, as noted above in the Prompts section.
Blocks can contain multiple prompts, with each prompt being represented in line with the class once again referring to the prompt reference that can be seen in the GUI.
You can configure two prompts as below. This example uses the Message block, but such prompts are configured and used in other blocks as well.
Which will render as below:
Menu & Question Blocks - Prompts
Prompts in these blocks are grouped into a div element with class “menu-prompts-container”.
Initial Prompt
The above shows text being added to the ‘Initial’ prompt section. Consequently, this will render the following outer div with class “menu-initial-prompt” and the inner Prompt div element as mentioned previously.
Retry Prompt
Should the user fail validation on a Question block (in this example by entering an invalid phone number), then the retry prompt will be displayed below the input area, with the class “validation-message”. The input field will also have the class “validationErrorFrame” added to highlight the area.
This is configured in the GUI alongside the initial and help prompts.
And shall show the following in the MicroApp.
A span element is added inside the “question-input-container”, below the input field (which has class “question-input-field”).
Help Prompt
The help prompt is initially hidden on the MicroApp, it is displayed should the user click the question mark link that is rendered beside the initial prompt above.
When the user clicks this link, the following outer div with class “menu-help-prompt” will be shown, and the original prompt hidden until the question mark link is clicked again.
The question mark is rendered with class “switch-prompts “ as so:
<a class="switch-prompts">[?]</a>
Help Prompt Button - Render
Below is an example using a Menu block, a Question block prompt behaviour is identical. This is a before and after of clicking the help link. We can see that the Help prompt is displayed and the initial prompt hidden.
xw
The total render for the prompts here is thus as follows:
Menu Blocks - Choices
Menu blocks allow the designer to offer the user multiple options. This will render either as a number of menu buttons, or as a dropdown list. Which will depend on the block preference set.
Below is an example whereby the preference size is set to 5. This means that if a menu has less than 5 choices, it will render as a number of buttons. If the menu has 5 or more choices, it will render as a dropdown control.
Whether the render choice is buttons or dropdown, both will be rendered inside a form and inner div. The inner div contains the “menu-options-container” class.
<form id="menuform">
</form>
Buttons
Should the menu render as buttons, each menu choice is rendered as an input element. Every choice will be assigned the “menu-option” class, and then an individual class with the name of the option appended to the end, “menu_option_<choice here>”.
<input class="menu-option menu_option_balance" value="balance" type="submit">
<input class="menu-option menu_option_payment" value="payment" type="submit">
Dropdown
The dropdown will be rendered as a select with the class “menu_select_<block_name>”. A submit button is then rendered below with classes “menu-option submit-button”.
<select class="menu_select_countries" id="activeSelect"> <option value="United States">United States</option <option value="Argentina">Argentina</option> <option value="Australia">Australia</option> <option value="Austria">Austria</option> <option value="Bangladesh">Bangladesh</option> <option value="Belgium">Belgium</option> … other menu choices here … <option value="United Kingdom">United Kingdom</option> <option value="Zimbabwe">Zimbabwe</option> </select>
<input class="menu-option submit-button" type="submit" value="Next">
A menu dropdown equivalent can be seen below:
Question Blocks - Choices
Similar to Menu choices, Question choices are also rendered in the same form. But the inner div element instead is assigned the “question-input-container” class.
<form id="menuform">
… button or dropdown render here …
</form>
Now, we shall look at the different grammar types and how they dictate the HTML and associated CSS classes rendered. Each choice selection will have an associated confirm button below it rendered with the “submit-button” class:
<input class="submit-button" type="submit" value="Next">
Credit Card Expiry
To style the expiry dropdown, the ID selector should be used.
<select id="CreditCardExpiryMonths"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> … <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> / <select id="CreditCardExpiryYears"> <option value="2020">2020</option> <option value="2019">2019</option> <option value="2018">2018</option> <option value="2017" selected="">2017</option> <option value="2016">2016</option> <option value="2015">2015</option> <option value="2014">2014</option> </select>
This will be rendered as follows:
Credit Card Number
Credit card numbers are taken via a simple input box and can be styled via the class “question-input-field”.
<input class="question-input-field"="text">
This will be rendered as follows:
Currency
Currency grammars will render both a label and a input field with classes “currency-symbol-indent“ and “question-input-field“ respectively.
<label class="currency-symbol-indent"> € </label> <input class="question-input-field" type="number">
This will render as follows:
Date
Date grammars will render two components. First there is the input field that holds the date itself, which is styled with the “question-input-field” class. An icon is placed alongside the input field, which when clicked, opens the date picker control. This link is styled with “date-picker-control” class.
<input class="question-input-field" id="Date" name="Date" type="text"> <a class="date-picker-control" title="Show Calendar" id="fd-but-Date"> Show Calendar </a>
The initial screen will look as so:
When the icon is clicked, the date picker will open.
Time
The time input is rendered as dropdowns, one for hours and one for minutes. Each should be styled using an ID selector.
<select id="TimeHours"> <option value="00">00</option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> … <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select> : <select id="TimeMinutes"> <option value="00">00</option> <option value="01">01</option> <option value="02">02</option> … <option value="57">57</option> <option value="58">58</option> <option value="59">59</option> </select>
This will be rendered as follows:
Natural Numbers
Natural numbers use a standard field with the “question-input-field” class.
<input class="question-input-field" type="number">
Telephone
Telephone numbers use a standard field with the “question-input-field” class.
<input class="question-input-field" type="tel">
Grammar Builder
Grammar Builder uses a standard field with the “question-input-field” class.
<input class="question-input-field" type="text">
Recording Blocks
The recording block will request permission from the user to use their microphone to take an audio recording. A button to start the recording and stop the recording will be presented. This is styled with the “recording-button-wrapper” class. Once done, the user can proceed with the ‘Next’ button, which is styled with the “recording-done-button-wrapper” class. There are wrapped inside a form that can be styled using an ID selector on “recordingform”. Above these controls is the prompt for indicating to the user that they can make a recording, using the standard prompt CSS format mentioned earlier in this document.
Please state your comments now.
</form>
This will be rendered as follows:
Styling Tips
This document has shown the technical information to control the style of your Genesys MicroApps. This section will briefly give some basic tips to attain the style you want.
• Make full use of the space available, while taking into consideration the various screen formats that you will need to support. Are you targeting phones only? Desktops too? You need to make use of media queries for response design in order to look good regardless of device. We can see below that the sizing of the message has been varied to welcome the user to the application. A background image design has been used to give depth to the experience. The buttons are very large and its obvious to the user what the goal for this screen is. We have maintained a consistent style and font, in this case keeping everything centred. We have styled the input box to have a single underline and rounded the buttons.
• Different blocks and prompts can be used in different ways other than what might be obvious. In these examples, we can see that a progress bar has been supplied along the button. This is achieved through use of images being applied to certain blocks that are only present at the appropriate step along the user journey.
• As can be seen above, an email address was requested. We have seen earlier in this document, grammar builder will render an input box for user entry. Not only have we styled it through CSS to give a simple underline, but we have used the Grammar Builder functionality to supply regex that will ensure only valid email addresses are supplied. Regex is a powerful feature that can be used to validate a wide variety of user inputs.
• As could be seen earlier, dropdown options can look a little bland. Through clever use of CSS, a clean styling that matches the rest of the design can be applied. Additional icons can be given, or, base64 encoding directly into the CSS is supported. The below example uses CSS encoding into the CSS thus avoiding an image upload.
• Although we can use regex to validate user input, why not use one of our out of the box validators to ensure user input is as expected. In the example below, we simply selected the appropriate Telephone number from the GUI configuration dropdown for the country in question. If no validator is available, then an alternate path can be selected in the application to use regex.
Selector Reference
Selector (Alphabetical) Use block Assigned to div that holds content of the block. block_<block-name> Assigned to the same element as “block”, but allows tweaking the style on a block by block basis. blocks-container Assigned to div that holds all blocks. More than one block may be rendered inside a given block-container. E.g. 2 Message Blocks followed by a Question Block. body Assigned to the body element for the entire window. close-footer-button-container Assigned to the div inside the footer, that contains the ‘End’ button. This button will end the session. currency-symbol-indent Assigned to label that will hold the currency symbol if the block is a question block requesting a monetary input. date-picker-control Assigned to anchor tag that holds the date icon, which upon click will open the date picker window. default-menu-option Assigned to all buttons that appear in the footer. footer Assigned to div that contains all footer elements. Is the parent of the “close-footer-button-container” and the “footer-buttons”. footer-buttons Assigned to the div that holds all buttons for ‘default level’ options. For example, if a general “Agent” global menu is set, it shall appear as a div inside this element (though it itself will be assigned “menu_option_<option-name>”” indent-right Frequently used on container div elements to keep the context an aesthetically pleasing distance away from the left border of the window. message-prompt Assigned to div element that will house prompts when used for Message Blocks. menu-help-prompt Assigned to the div that contains the menu/question help prompt. This prompt appears when the user clicks the help link. menu-initial-prompt Assigned to the div that contains the menu/question initial prompt that is originally shown. menu-retry-prompt Assigned to the div that contains the menu/question retry prompt. This prompt appears when the user input fails validation and replaces the ‘initial prompt’ that was originally shown. menu-option Assigned to all menu option div elements. menu_option_<menu-choice> Assigned to all menu options, but with the actual option appended to the end, thus allowing control over the styling of specific options. menu-options-container Assigned to the div that surrounds all menu options. menu-prompts-container Assigned to the div that surrounds all menu/question prompts. menu_select_<block-name> Assigned to a Menu dropdown ‘select’ element, which will be rendered when the number of menu options exceeds that which is configured to render buttons. middle Assigned to the div that allows some control over the central elements. outer Assigned to the div that allows some control over the central elements. Encompasses the middle element. persona_<persona-name> Additional class assigned to indicate the persona. If the default persona is active, there will be nothing after the underscore. This will allow styling control at a persona level. Example, “persona_” will be assigned on blocks that have no explicit persona set (the default. “persona_italy” will be assigned if an Italian persona has been created and made active. prompt-<prompt-ref> Assigned to all div elements that contain prompts, the prompt reference can be retrieved from the GUI. This will allow individual styling on a prompt by prompt basis. question-input-container Assigned to the div that contains all question elements, regardless of the input type (example: date, credit card, currency, etc). question-input-field Assigned to the div that is used for general input (example: natural numbers, phone number, etc). Note, this is the input field but server side validation will still occur based on the grammar type. Validation failure will result in hiding the initial prompt and showing the retry prompt. recording-button Assigned to the div that holds the “Start/Stop recording” (or whatever text is configured) functionality. recording-done-button-wrapper Assigned to the div that wraps both the start/stop recording functionality as well as the next button. submit-button Assigned to any div that is acting as a form “submit’ type. Can be to proceed on Menu Block options whereby the number of items is beyond the configured for button rendering, or, for any question blocks as well as the recording block. switch-prompts Assigned to the anchor element that allows switching between initial and help prompts. title-bar Assigned to the div that holds the title bar area. title-bar-text The div which holds the text for the title bar. validationErrorFrame Applied to the div on which the input failed. validation-message Applied to a span element that is added should (and only if there is a) validation fail.