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 these two methods below.

MethodParameters to supplyDescription
drawGraphWithEndpointDataWidget ParametersRenders the graph visualisation with data from an API endpoint based on the widget parameters supplied
updateGraphWithEndpointDataWidget Parameters,
Widget Props (optional) 		Similar to drawGraphWithEndpointData, it updates the graph visualisation with data from an API endpoint based on the updated widget parameters supplied. Can only be called after either drawGraphWithEndpointData or drawGraphWithCustomData

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>