Widgets

Use the Simple Widget

The simple widget is more compact than the embedded open scheduling widget. It shows only a couple of appointment times for a single provider which works best on a webpage where multiple providers might be listed, and you want to show appointment times for each. For example, you might use the simple widget on your directory page.

There are two options to embed the simple widget, using container-based code or script-based code. There is no difference in the behavior of the simple widget between the two options. We have provided two different options so you can choose the code you would prefer to work with. 

Express Care Greenwood

• To use the container-based simple widget, enter the following code where you want the widget to appear in your webpage:

<div
  id="[container ID]"
  data-url="https://mychart.selfregional.org/MySRH"
  data-apikey="ptLMESeIsM43915"
  data-widget-type="openschedulingsimple"
  data-additionalparams-visittype="14311240"
  data-additionalparams-department="140052003"
  data-additionalparams-provider="92499"
  data-additionalparams-provider="92658"
  data-additionalparams-numdays="1"
  data-additionalparams-numslotsperday="9"
></div>

• To use the script-based simple widget, enter the following code in the script of the webpage where you want the widget to appear:

<script type="text/javascript">
  window.addEventListener("load", function (event) {
    mychartWidget.renderWidget({
      url: "https://mychart.selfregional.org/MySRH",
      apiKey: "ptLMESeIsM43915",
      widgetType: "openschedulingsimple",
      containerId: "[container ID]",
      additionalParams: {
        visittype: "14311240",
        department: "140052003",
        provider: "92499",
        numdays: “1”
        numslotsperday: “9”
      },
    });
  });
</script>

—————————————————————————————————————

Express Care Laurens

• To use the container-based simple widget, enter the following code where you want the widget to appear in your webpage:

<div
  id="[container ID]"
  data-url="https://mychart.selfregional.org/MySRH"
  data-apikey="ptLMESeIsM43915"
  data-widget-type="openschedulingsimple"
  data-additionalparams-visittype="14311240"
  data-additionalparams-department="140053003"
  data-additionalparams-provider="92500"
  data-additionalparams-provider="92659"
  data-additionalparams-numdays="1"
  data-additionalparams-numslotsperday="9"
></div>

• To use the script-based simple widget, enter the following code in the script of the webpage where you want the widget to appear:

<script type="text/javascript">
  window.addEventListener("load", function (event) {
    mychartWidget.renderWidget({
      url: "https://mychart.selfregional.org/MySRH",
      apiKey: "ptLMESeIsM43915",
      widgetType: "openschedulingsimple",
      containerId: "[container ID]",
      additionalParams: {
        visittype: "14311240",
        department: "140053003",
        provider: "92500",
        numdays: “1”
        numslotsperday: “9”
      },
    });
  });
</script>

————————————————————————————————————————————————

If you are using the script-based simple widget, enter the following code in your webpage’s HTML code exactly where you want the widget to appear to patients:

• <div id="[container ID]"></div>

You might already have similar code in your HTML to use for this purpose. Reuse the code so your webpage’s code remains uncluttered. Then, regardless of which option you choose, enter the following script in the head of your webpage:

• <script src="https://mychart.selfregional.org/MySRH/Scripts/lib/Widget/widget_sdk.js"></script>