FSWizard is designed on a web-first architecture, enabling seamless integration across various device types and platforms.

The following instructions detail the steps necessary to incorporate the FSWizard Widget (FSWidget) into your web or mobile application.

Adding FSWidget as an IFrame

Code
<iframe width="450" height="500" src="https://widget.fswizard.com"></iframe>

The code above will produce the following result:

Additional parameters

You can send additional query parameters to FSWidget to change the way it looks and operates:

  • injectCSSLink
    Injects an URL to a custom CSS file
  • injectCSSText
    Injects a custom CSS directly without the need for the file
  • numericKeyboard = true
    Displays numeric keyboard for numeric input types within the iframe

 All query parameters must be URL encoded

Here is a sample that sets the default widget text color to red:

Code
<iframe width="350" height="500" src="https://widget.fswizard.com/?injectCSSText=%3Aroot%20%7B--tm-body-color%3A%20red%3B%7D&numericKeyboard=true"></iframe>

Theme CSS Variables

To simplify theming the app you can use the following CSS variables:

Code:DEFAULT LIGHT THEME
:root {
  --tm-body-color:  #000;
  --tm-body-background:  white;
  --tm-body-link:  #2196f3;
  --tm-body-margin: 0;
  --tm-body-padding: 0;
  --tm-body-font-size: 1.4rem;
  --tm-page-header-background: #039be5;
  --tm-page-header-color: #FFF;
  --tm-page-subheader-background: #009688;
  --tm-page-subheader-color: #FFF;
  --tm-table-background: white;
  --tm-table-background-alt: #f4f4f4;
  --tm-table-background-selected: #AECEAF;
  --tm-table-border: 1px solid #dcedf6;
  --tm-table-color: #333;
  --tm-table-header-background: #009688;
  --tm-table-header-color: #fff;
  --tm-canvas-text-color: #000;
  --tm-canvas-background: #FFF;
  --tm-canvas-point-color: #F00;
  --tm-canvas-geometry-color: #00F;
  --tm-gauges-button-font-size: 0.8em;
  --tm-gauges-button-label-color:#d1dbe0;
  --tm-gauges-button-value-color:#FFF;
  --tm-gauges-button-value-font-size:1.25em;
  --tm-gauges-button-unit-color:#d1dbe0;
  --tm-gauges-button-arrow-color: white;
  --tm-gauges-button-arrow-font-size: 0.75em;
  --tm-tab-border: 1px solid #CCCCCC;
  --tm-tab-background:  #FFF;
  --tm-tab-button-padding:  0.75em;
  --tm-tab-button-background:  #dbdbdb url('../img/gray_header_inv.png');
  --tm-tab-button-border-radius:  0;
  --tm-tab-button-border: 1px solid #CCCCCC;
  --tm-tab-button-color: #222222;
  --tm-tab-button-font-weight: bold;
  --tm-tab-button-font-size: 1.25em;
  --tm-tab-button-collapsed-background:  #fafafa url('../img/light_header.png');
  --tm-tab-button-collapsed-border:  1px solid #CCCCCC;
  --tm-tab-button-collapsed-color: #8a8a8a;
  --tm-tab-content-background: white;
  --tm-tab-content-padding:  0px 5px ;
  --tm-tab-content-border:  1px solid #CCCCCC;
  --tm-tab-content-border-radius:  0;
  --tm-input-font-size:  1.25em;
  --tm-input-height:  2em;
  --tm-input-padding:  0 0.25em 0 0.25em;
  --tm-input-border-radius:  0;
  --tm-input-border:  1px solid #dcdcdc;
  --tm-input-background:  white;
  --tm-input-color: black;
  --tm-input-icon-color: black;
  --tm-input-default-background: #6FEB6F;
  --tm-input-default-color:  black;
  --tm-input-editing-color: white;
  --tm-input-editing-background: white;
  --tm-input-selected-color: white;
  --tm-input-selected-background: #296fff;
  --tm-input-disabled-color: black;
  --tm-input-disabled-background: lightgray;
  --tm-range-background: #ccc;
  --tm-range-height: 5px;
  --tm-range-border-radius: 3px;
  --tm-range-shadow: 0px 0px 2px 0px black;
  --tm-range-margin: 10px 5px;
  --tm-range-slider-background: #03A9F4;
  --tm-range-slider-height: 20px;
  --tm-range-slider-width: 20px;
  --tm-range-slider-border-radius: 30px;
  --tm-range-slider-shadow:  0px 0px 2px 0px black;
  --tm-button-primary-background: #03a9f4;
  --tm-checkbox-checked-background: var(--tm-input-background) url("../img/check.png") left top no-repeat;
  --tm-input-focus-shadow:  0 0 5px rgba(81, 203, 238, 1);
  --tm-input-focus-border: 1px solid rgba(81, 203, 238, 1);
  --tm-fieldgroup-margin: 0.25em;
  --tm-fieldgroup-padding:  0.25em 0;
  --tm-fieldgroup-background: white;
  --tm-fieldgroup-odd-background: whitesmoke;
  --tm-fieldgroup-error-color: red;
  --tm-dropdown-text-align:  left;
  --tm-dropdown-padding:  0 30px 0 0.25em;
  --tm-dropdown-font-size:  1.25em;
  --tm-dropdown-border-radius:  0;
  --tm-dropdown-border:  1px solid #9cccf2;
  --tm-dropdown-background: white;
  --tm-dropdown-color: black;
  --tm-dropdown-icon:  url(../img/icon_downarrow.png);
  --tm-dropdown-icon-width:  30px;
  --tm-dropdown-icon-color:  #5bd3ff;
  --tm-material-dropdown-border:  1px solid #CCCCCC;
  --tm-material-dropdown-padding: 0.75em;
  --tm-material-dropdown-font-size: 1.25em;
  --tm-toggle-slider-color: rgb(3, 155, 229);
  --tm-toggle-background: rgb(255, 255, 255);
  --tm-toggle-color: black;
  --tm-toggle-selected-color:white;
  --tm-toggle-border: 1px solid #dcdcdc;
  --tm-toggle-border-radius: 0;
}

Code:DARK THEME

:root {
  --tm-body-color: #DDD;
  --tm-body-background: #222;
  --tm-body-link:  #2196f3;
  --tm-body-margin: 0;
  --tm-body-padding: 0;
  --tm-body-font-size: 1.4rem;
  --tm-action-color: #607d8b;
  --tm-page-header-background: #333;
  --tm-page-header-color: #FFF;
  --tm-page-subheader-background: #333;
  --tm-page-subheader-color: #FFF;
  --tm-table-background: #333;
  --tm-table-background-alt: #444;
  --tm-table-background-selected: #AECEAF;
  --tm-table-border: 1px solid #525252;
  --tm-table-color: #EEE;
  --tm-table-header-background: #252525;
  --tm-table-header-color: #fff;
  --tm-canvas-text-color: #FFF;
  --tm-canvas-background: #222;
  --tm-canvas-point-color: #F00;
  --tm-canvas-geometry-color: rgb(187, 187, 255);
  --tm-gauges-button-font-size: 0.8em;
  --tm-gauges-button-label-color: #d1dbe0;
  --tm-gauges-button-value-color: #FFF;
  --tm-gauges-button-value-font-size: 1.25em;
  --tm-gauges-button-unit-color: #d1dbe0;
  --tm-gauges-button-arrow-color: white;
  --tm-gauges-button-arrow-font-size: 0.75em;
  --tm-tab-border: 1px solid #666666;
  --tm-tab-background: #222;
  --tm-tab-button-padding: 0.75em;
  --tm-tab-button-background: #333;
  --tm-tab-button-border-radius: 0;
  --tm-tab-button-border: none;
  --tm-tab-button-color: #DDD;
  --tm-tab-button-font-weight: bold;
  --tm-tab-button-font-size: 1.25em;
  --tm-tab-button-collapsed-background: #444;
  --tm-tab-button-collapsed-border: none;
  --tm-tab-button-collapsed-color: #8a8a8a;
  --tm-tab-content-background: #222;
  --tm-tab-content-padding: 0px 5px;
  --tm-tab-content-border: none;
  --tm-tab-content-border-radius: 0;
  --tm-input-font-size: 1.25em;
  --tm-input-height: 2em;
  --tm-input-padding: 0 0.25em 0 0.25em;
  --tm-input-border-radius: 0;
  --tm-input-border: none;
  --tm-input-background: #111;
  --tm-input-color: #e7e7e7;
  --tm-input-icon-color: #FFF;
  --tm-input-default-background: #3a893a;
  --tm-input-default-color: #dcdcdc;
  --tm-input-editing-color: white;
  --tm-input-editing-background: white;
  --tm-input-selected-color: white;
  --tm-input-selected-background: #296fff;
  --tm-input-disabled-color: black;
  --tm-input-disabled-background: #817e7e;
  --tm-range-background: #ccc;
  --tm-range-height: 5px;
  --tm-range-border-radius: 3px;
  --tm-range-shadow: 0px 0px 2px 0px black;
  --tm-range-margin: 10px 5px;
  --tm-range-slider-background: var(--tm-action-color);
  --tm-range-slider-height: 20px;
  --tm-range-slider-width: 20px;
  --tm-range-slider-border-radius: 30px;
  --tm-range-slider-shadow: 0px 0px 2px 0px black;
  --tm-button-primary-background: var(--tm-action-color);
  --tm-input-focus-shadow: 0 0 5px rgba(81, 203, 238, 1);
  --tm-input-focus-border: 1px solid rgba(81, 203, 238, 1);
  --tm-checkbox-checked-background: var(--tm-input-background) url("../img/check.png") left top no-repeat;
  --tm-fieldgroup-margin: 0.25em;
  --tm-fieldgroup-padding: 0.25em 0;
  --tm-fieldgroup-background: transparent;
  --tm-fieldgroup-odd-background: #2a2a2a;
  --tm-fieldgroup-error-color: red;
  --tm-dropdown-text-align: left;
  --tm-dropdown-padding: 0 30px 0 0.25em;
  --tm-dropdown-font-size: 1.25em;
  --tm-dropdown-border-radius: 0;
  --tm-dropdown-border: 1px solid #9cccf2;
  --tm-dropdown-background: white;
  --tm-dropdown-color: black;
  --tm-dropdown-icon: url(../img/icon_downarrow.png);
  --tm-dropdown-icon-width: 30px;
  --tm-dropdown-icon-color: #5bd3ff;
  --tm-material-dropdown-border: none;
  --tm-material-dropdown-padding: 0.75em;
  --tm-material-dropdown-font-size: 1.25em;
  --tm-toggle-slider-color: var(--tm-action-color);
  --tm-toggle-background: rgb(255, 255, 255);
  --tm-toggle-color: black;
  --tm-toggle-selected-color: white;
  --tm-toggle-border: 1px solid #dcdcdc;
  --tm-toggle-border-radius: 0;
}

To be continued....