Step by step with other JavaScript-based applications

Install @compilot/web-sdk.

Import the SDK

    import {
      openWidget,
      watchWidgetVisibleState,
      createAuthAdapter,
      createConfig,
    } from "@compilot/web-sdk";

Create the widget configuration by using the endpoint you created in the back end

 compilotIdConfig = createConfig({
      authAdapter: createAuthAdapter({
        // This is an implementation of the auth adapter
        createSession: async () => {
          try {
            // Make a POST request to your API endpoint, previously created with wit compilot js-sdk, considering you created the path api/create-compilot-session.
            const response = await fetch(
              "youApiUrl/yourApiEndpoint",
              {
                method: "POST", // HTTP method POST
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({}),
              }
            );

            // Check if the response is okay (status in the range 200-299)
            if (!response.ok) {
              throw new Error("Network response was not ok");
            }
            // Parse the response JSON
            const data = await response.json();
            // Process the response as needed
            console.log("Session created:", data);
            return data; // Return the data or any other necessary information
          } catch (error) {
            // Handle errors
            console.error(
              "There was a problem with the fetch operation:",
              error
            );
            alert("There was a problem creating the session.");
          }
        },
      }),
    });

Use the ComPilot Web SDK methods to manage the ComPilot Widget.

    watchWidgetVisibleState(compilotIdConfig, {
      onChange: (isVisible) => {
        alert("Widget changed visibility. Is visible: ", isVisible);
      },
    });

    onclick = () => {
      alert("Opening widget");
      openWidget(compilotIdConfig);
    };
  </script>
</head>

<body>
  <button onclick="onclick">Open widget</button>
</body>

Standard actions include utility functions like openWidget(config); and closeWidget(config);

Getters include utility functions like isLoading(config); and isOpen(config);`.

const loading = isLoading(config);

const open = isOpen(config);

Watchers (callback-based actions or getters) include watchWidgetVisibleState().

watchWidgetVisibleState(config, {
  onChange (isVisible) => {
    console.log("Widget is visible: ", isVisible);
  }
});

All of the functions are listed in Web SDK.

Example

Regular mode using JavaScript

Step by step with other JavaScript-based applications

Example​

Example