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
Blocks render inside the div class blocks-container.
<div class="blocks-container" id="blocks-container">As the rendered class is also the name of the block, and thus separate from other elements, you can assign individual styling to each block.
If the block name has spaces, GAAP replaces these spaces with underscores and prepends the word block prepended. If the block uses a persona, a persona class is also rendered onto the block.
The following example shows a Message block with no set persona:
The above example renders the following:
<div class="block block_Welcome persona_">Where:
- block—specifies this class as a block.
- block_Welcome—specifies the block name with block_ prefix.
- persona_—specifies the persona used by the block. In this example, the block uses the default persona and so a persona name is not specified.
Prompts
You can use prompts in Message, Menu, Question, and Recording blocks. Prompts render inside div elements that identify the block to which they belong. You can insert prompts by using their reference number. For example, the prompt below uses reference 0032.
This renders as:
<div class="prompt-0032">
Hey, I'm Kate!
</div>The following section describes prompt use by block type.
Message blocks
Message blocks output a prompt to the IVR or, in this case, text to a MicroApp. GAAP renders them in a div with classes indent-right and message-prompt. Inside another div, Message blocks render with a class that is individual to the prompt by using the prompt reference, as noted above in the Prompts section.
<div class="indent-right message-prompt">
<div class="prompt-0032">
Hey, I'm Kate!
</div>
</div>Blocks can contain multiple prompts, with each prompt rreferring to the prompt reference number, as shown in the following example:
The example above renders as:
<div class="indent-right message-prompt">
<div class="prompt-0032">
Hey, I'm Kate!
</div>
<div class="prompt-0049">
Created using Genesys App Automation Platform.
</div>
</div>Menu and Question blocks
You can group prompts in these blocks into a div element with class menu-prompts-container.
Initial prompt
The above graphic shows text in the Initial prompt section. Consequently, this renders an outer div with class menu-initial-prompt and an inner div.
<div class="menu-initial-prompt" id="initialPromptDiv">
<div class="prompt-0035">
Please make your selection.
</div>
</div>Retry prompt
If the user fails validation on a Question block (such as by entering an invalid phone number), the Retry prompt displays below the input area, with the class validation-message. The input field also has the class validationErrorFrame to highlight the area.
The graphic below shows how this prompt appears in the MicroApp:
GAAP renders this as a span element inside the question-input-container class, below the input field.
<span class="validation-message">Sorry, we didn't recognize that phone number. Please try again.</span>Help prompt
The Help prompt is initially hidden in the MicroApp—it displays only if the user clicks the ? link rendered beside the Initial prompt.
When the user clicks ?, the following outer div with class menu-help-prompt displays, and the original prompt is hidden until ? is clicked again.
<div class="menu-help-prompt" id="helpPromptDiv">
<div class="prompt-0038">
Click on the 'Balance' button to see your balance. If you would like to make a payment, click on the 'Payment' button.
</div>
</div>The question mark rendered with the class switch-prompts:
<a class="switch-prompts">[?]</a>The render for the prompts thus far is:
<div class="menu-prompts-container">
<div class="menu-initial-prompt" id="initialPromptDiv">
<div class="prompt-0035">
Please make your selection.
</div>
</div>
<div class="menu-help-prompt” id="helpPromptDiv">
<div class="prompt-0038">
Click on the 'Balance' button to see your balance. If you would like to make a payment, click on the 'Payment' button.
</div>
</div>
<a class="switch-prompts">[?]</a>
</div>Choices in Menu blocks
Menu blocks offer the user multiple options that can render as a number of menu buttons, or as a drop-down list.
The following example has Menu dropdown size set to 5. This means that if a menu has fewer than five choices, it renders menu buttons. If the menu has five or more choices, it renders a drop-down list.
Menus render inside a form and an inner div. The inner div contains the menu-options-container class.
<form id="menuform">
<div class="menu-options-container">
… button or dropdown render here …
</div>
</form>Buttons
If the menu uses buttons, each menu choice renders as an input element. You assign the menu-option class to each choice, and then append an individual class with the name of the option, such as 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">Drop-down list
A drop-down list renders as a select with the class menu_select_<block_name>. Next, a submit button renders with the class 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">The code above renders as:
Choices in Question blocks
Similar to Menu block choices, Question block choices render in a form. However, the inner div is assigned the question-input-container class.
The following sections describe the different grammar types and how they dictate the HTML and associated CSS classes rendered. Each choice selection has an associated confirm button rendered with the submit-button class.
<input class="submit-button" type="submit" value="Next">Credit Card Expiry
Use the ID selector as shown below.
<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>The preceding code render as follows:
Credit card number
Credit card numbers use an input box with the class question-input-field.
<input class="question-input-field"="text">The preceding code renders as:
Currency
Currency grammars render a label and an input field with the classes currency-symbol-indent and question-input-field, respectively.
<label class="currency-symbol-indent"> € </label>
<input class="question-input-field" type="number">The preceding code renders as:
Date
Date grammars render two components. First, it renders an input field that holds the date, which is styled with the question-input-field class. An icon is placed alongside the input field, which opens the date-picker when clicked. This link uses the 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">
<span class="fd-screen-reader">Show Calendar</span>
</a>The preceding code renders as:
When the user clicks the icon, the date-picker opens.
Time
The time input renders as drop-down menus—one for hours and one for minutes. Each uses 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>The preceding code renders as:
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.