Skip to main content

Using Handshakes' Data

This section covers the methods and specifications to:

  • Initialise the widget in your site
  • Use the widget with data obtained from Handshakes

Create Widget Props and Parameters​

widget-props.js
const widgetProps = {
  key: CLIENT_KEY,
  parentElementSelector: ELEMENT_SELECTOR,
};

Replace CLIENT_KEY with the unique alphanumeric string that will be provided to you after successfully onboarding with us.

Replace ELEMENT_SELECTOR with the class or id of the element that will contain the widget.
(eg. ".hs-widget-class" or "#hs-widget-id")

Methods​

Once initialised, there are methods exposed by the Widget that can be used to render the graph visualisation.
We'll be focusing on the drawGraphWithEndpointData method.

MethodParameters to supplyDescription
drawGraphWithEndpointDataWidget ParametersRenders the graph visualisation with data from an API endpoint based on the widget parameters. You can also use this method to "re-draw" the graph with new data based on new Widget Parameters supplied.
displayEmptyStateWidget Props, message (string, optional)Renders an empty state graphic with the text from the message. If no message is supplied, the empty state will show a default message.
loadmessage (string, optional)Renders a loading graphic animation with the text from the message. If no message is supplied, the loader will show a default message.

Initialise the Widget​

The following code snippets is used to initialise the widget.

// script to load the widget file
async function initWidget() {
  try {
    const response = await fetch(WIDGET_SCRIPT_URL);
    const scriptContent = await response.text();

    const script = document.createElement("script");
    script.text = scriptContent;
    document.body.appendChild(script);

    // initialise a widget instance from the script
    const widget = new hs_widget(widgetProps);

    // use the drawGraphWithEndpointData method to generate graph using API data
    widget.drawGraphWithEndpointData(WidgetParametersEndpointData);
  } catch (error) {
    console.log(error);
  }
}

To use the Handshakes Graph widget on your web page, insert the above code snippets within a <script> tag located just before the ending <body> tag of the web page. For example:

index.html
<!-- example of inserting the snippet onto your web page -->
<html>
  <head></head>
  <body>
    <script type="module">
      import { widgetProps } from "./src/data/widget-props.js";
      import { WidgetParametersEndpointData } from "./src/data/widget-parameters.js";

      async function initWidget() {
        try {
          const response = await fetch(WIDGET_SCRIPT_URL);
          const scriptContent = await response.text();

          const script = document.createElement("script");
          script.text = scriptContent;
          document.body.appendChild(script);

          const widget = new hs_widget(widgetProps);
          widget.drawGraphWithEndpointData(WidgetParametersEndpointData);
        } catch (error) {
          console.log(error);
        }
      }

      initWidget();
    </script>
  </body>
</html>