Style Example - Form

Style Example - Form

Description

This Stylesheet has been designed to give a webform-like feel to the pages, with a minimalist and segmented design approach to provide a functional Workflow that is still aesthetically appealing. If lots of content or data capture is present within the process, the agent can either scroll through each section, or that part of the process could be split into multiple pages.

Separate "wells" (elements with a contrasting background colour to the main background, used to visually group the content) can be created by using a Table Break control between each desired section. If no Table Break controls are used, all content placed on the page will be contained within a single well. Having one or more wells in the Workflow allows for a vibrant and modern background to be present within the Workflow without impacting readability or usability for the agents due to colour clashes; for this reason, a neutral and plain background is recommended for these wells.

At the bottom of this article, a sample Workflow is available that makes use of the demonstrated stylesheet. Users of Intelligent Agent can download and import this into their own instance of the platform. This Workflow has been designed with a fairly narrow body to the form, and the wells will remain aligned with the centre of the screen if the screen is re-sized. This type of design works nicely when Intelligent Agent is embedded within another application or window, where screen real-estate could be limited due to telephony controls or other content outside of the Intelligent Agent frame.

CSS

The below code would need to be saved as a Stylesheet within your Intelligent Agent system, and then a Workflow created that was assigned this Workflow. There are also some style definitions for Text Label controls that need you to define Additional Classes in their field styling tabs.
  1. /* Defining common style variables */
  2. $theme_cyan: #00dbde;
  3. $theme_magenta: #fc00ff;
  4. $box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.075);

  6. /* Vibrant background of the Workflow */
  7. #scriptBody {
  8. background-image: linear-gradient(
  9. 45deg, /* Angle of the gradient */
  10. $theme_cyan, /* The first colour */
  11. $theme_magenta /* The second colour */
  12. );
  13. }

  15. /* Defining the well styling. Using a Table Break control will automatically create additional wells in the final Workflow */
  16. #vart table:not(:last-child) {
  17. background-color: white;
  18. border-radius: 10px;
  19. padding: 30px;
  20. margin: 15px;
  21. }

  23. /* Giving all controls that contain a Button element a default style that reverses the main background */
  24. .button {
  25. background-image: linear-gradient(
  26. 45deg, /* Direction of the gradient */
  27. $theme_magenta, /* The first colour */
  28. $theme_cyan /* The second colour */
  29. );
  30. width: 400px; 
  31. color: white;
  32. font-size: 20px;
  33. border-radius: 50px;
  34. font-weight: bold;
  35. }

  37. /* Styling any default Text Box controls */
  38. .control-text-box {
  39. input {
  40. color: #666;
  41. border: none;
  42. background-color: transparent;
  43. box-shadow: $box-shadow;
  44. width: 500px;
  45. }
  46. }

  48. /* Styling any default Textarea controls */
  49. .control-text-area {
  50. textarea {
  51. color: #666;
  52. border: none;
  53. background-color: transparent;
  54. box-shadow: $box-shadow;
  55. width: 500px;
  56. height: 150px;
  57. }
  58. }

  60. /* Custom Class for Text Labels, designed to be used at the top of each well section. This could be for text to be read out, or instructions */
  61. .Header {
  62. width: 500px;
  63. text-align: center;
  64. font-size: 30px;
  65. font-weight: bold;
  66. }

  68. /* Custom Class for Text Labels, designed to be placed above input controls such as Text Box or Textarea */
  69. .LabelAboveInput {
  70. width: 500px;
  71. text-align: left;
  72. font-size: 18px;
  73. }

Sample Workflow Download

Download here - Please note this Workflow was created in version 6.0.53.54981, and should not be imported into an earlier version of Intelligent Agent!

    • Related Articles

    • Style Example - Bootstrap & Variable Width

      Minimum Width Full Screen Description This Stylesheet contains 3 main sections; A left aligned panel which contains general instructions or notes to the User, the controls that form this panel would tend to be present on every page of the Workflow as ...

    • Script Styling Examples using CSS

      With the release of version 6.0.53 of Intelligent Agent, it is now possible to control the default styling for a Script using a CSS Stylesheet. This allows for styling to be applied to both default/built-in classes and for the creation of custom ...

    • Technical Roadmap - 2022 Q2

      Overview Below is the latest update to the Awaken Technical Roadmap. This roadmap covers all products in the Awaken suite. The roadmap is broken into 3 delivery groups: Now - Items have been fully scoped in development and testing at the moment or ...