Use the PingOne DaVinci Widget to run the flow within a modal on your application page. This reduces any UI customization needed to make the flow match your branding. This integration method is well-suited to flows that involve UI nodes.

Prerequisites

Workflow

  1. Create a worker application in PingOne to provide the credentials needed for adding a PingOne connection in DaVinci. See “Creating PingOne credentials” in Connecting DaVinci with PingOne.

  2. Add a PingOne connection in DaVinci. See “Adding PingOne connections” in Connecting DaVinci with PingOne.

  3. Create a DaVinci flow, see Getting Started. Then, create a DaVinci flow policy and add the flow to the flow policy. See Configuring a flow policy. You’ll also need to create a DaVinci application, and associate it with the flow. See Creating an application.

  4. In the DaVinci UI console, click Applications, and open the application for the flow policy you want to integrate with your app. See Configuring a flow policy.

  5. You’ll need the Company ID and API Key values from the General tab of your DaVinci application.

  6. You’ll also need the Policy ID for the flow associated with your DaVinci application.

  7. In the application you’re building to integrate with DaVinci, specify the Company ID, API Key, and Policy ID. See the example below for how you might do this.

Example

This is a simple hello-world application. The elements of interest are how to specify the DaVinci API domain, your company ID, flow policy ID, and DaVinci access token, which then integrates your single-page app with the DaVinci application and associated flow policy.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />

  <head>
    <title>Simple HTML/JS widget sample</title>
  </head>

  <body>
    <h3>Simple HTML/JS widget sample</h3>
    <br />
    <p>Widget will be displayed below</p>
    <br />
    <div id="widget" class="skWidget">Widget should appear here</div>

    <script
      type="text/javascript"
      src="https://sdk.singularkey.com/latest/singularkey.js"
    ></script>
    <script>
      //*** Populate the parameters below from your DaVinci environment ***/
      const companyId = "{{companyId}}";
      const skApiKey = "{{apiKey}}";

      //*** Build the get SK Token URL. ***/
      const skGetTokenUrl =
        "https://sdk.singularkey.com/v1/company/" +
        companyId + "/{{companyId}}";

      //*** Add the API Key from your DaVinci application. ***/
      var headers = new Headers();
      headers.append("X-SK-API-KEY", skApiKey);

      var requestOptions = {
        method: "GET",
        headers: headers,
        redirect: "follow",
      };

      //*** Retrieve SK Token ***/
      fetch(skGetTokenUrl, requestOptions)
        .then((response) => response.json())
        .then((responseData) => {
          var props = {
            config: {
              method: "runFlow",
              apiRoot: "https://sdk.singularkey.com/v1",
              accessToken: responseData.access_token,
              companyId: companyId,
              policyId: {{policyId}},
            },
            useModal: false,
            successCallback,
            errorCallback,
            onCloseModal,
          };
          /*** Invoke the Widget ****/
          console.log(props);
          singularkey.skRenderScreen(
            document.getElementsByClassName("skWidget")[0],
            props
          );
        })
        .catch((error) => console.log("error", error));

      function successCallback(response) {
        console.log(response);
      }

      function errorCallback(error) {
        console.log(error);
      }

      function onCloseModal() {
        console.log("onCloseModal");
      }
    </script>
  </body>
</html>