FSWizard Widget

June 13, 2022, 12:40 am by admin

An effort is currently underway to allow FSWizard Widget (FSWidget) to be inserted into the client's web applications.

It is currently possible to add FSWidget in the following ways:

  • IFrame at https://widget.fswizard.com

Adding FSWidget as an IFrame

Code
<iframe width="350" 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

 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"></iframe>

Theme CSS Variables

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

Code

:root {
  --tm-body-color:  #000;
  --tm-body-background:  white;
  --tm-body-margin: 0;
  --tm-body-padding: 0;
  --tm-body-font-size: 1.4rem;

  --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-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-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-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-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;
}

To be continued....