workwonders-sdk

v0.4.6

Published

19 days ago

This document explains how to install and use the `workwonders-sdk` in your web application. The SDK is a browser-focused widget SDK that exposes feedback and changelog widgets for your organization.

0High
0Medium
0Low

workwonders-dev

fzanutto

support help-center feature workwonders feedback product-management

Work Wonders SDK

This document explains how to install and use the workwonders-sdk in your web application. The SDK is a browser-focused widget SDK that exposes feedback and changelog widgets for your organization.

Installation with npm package

Using npm

npm install workwonders-sdk

Using pnpm

pnpm add workwonders-sdk

Using yarn

yarn add workwonders-sdk

Importing and initializing

The main export is the WorkWonders class. Create an instance and call init with your organization information.

import { WorkWonders } from "workwonders-sdk";

const workwonders = new WorkWonders();

await workwonders.init({
  organization: "your-org-slug",
  token: "optional-jwt-token",
  locale: "en",
});

organization : required, your organization slug in WorkWonders.
token: optional, but required for private organizations.
locale: optional; if omitted, the SDK will pick a supported language based on your organization configuration.

After the init call is made, you will be able to initialize the feedback and changelog modules.

Global usage via `<script>` tag

If you are not using a bundler, you can load the SDK as a browser script.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>WorkWonders SDK Example</title>
    <script src="https://sdk.workwonders.app/sdk.js"></script>
  </head>
  <body>
    <h1>WorkWonders SDK Example</h1>
    <script>
      const workwonders = new window.WorkWonders();
      workwonders
        .init({
          organization: "your-org-slug",
          token: "optional-jwt-token",
          locale: "en",
        })
        .then(() => {
          console.log("WorkWonders SDK initialized");
        });
    </script>
  </body>
</html>

Feedback widget

import { WorkWonders } from "workwonders-sdk";

const workwonders = new WorkWonders();

await workwonders.init({
  organization: "your-org-slug",
  token: "optional-jwt-token",
  locale: "en",
});

workwonders.feedback.initFeedbackWidget();

This will add a button that will be attached to the right side of your application.

You can customize the text of the button in this page of your organization dashboard. More customization option are planned for the future.

Custom trigger for opening feedback

If you want to control the trigger yourself (for example, using your own button), call initFeedbackWidget with useCustomTrigger: true and then call openFeedbackWidget.

workwonders.feedback.initFeedbackWidget({ useCustomTrigger: true });

const button = document.getElementById("open-feedback");

button?.addEventListener("click", () => {
  workwonders.feedback.openFeedbackWidget();
});

Alternatively, you can also use the SDK’s built-in click listener by adding a data attribute to any element:

<button data-open-workwonders-feedback>Give feedback</button>

Listening for feedback events

You can listen to FeedbackModule events:

workwonders.feedback.on("postSubmitted", () => {
  console.log("Feedback post submitted");
});

Changelog widget

import { WorkWonders } from "workwonders-sdk";

const workwonders = new WorkWonders();

await workwonders.init({
  organization: "your-org-slug",
  token: "optional-jwt-token",
  locale: "en",
});

await workwonders.changelog.initChangelogWidget();

This will create the changelog view in your application and check if there is already some changelog that should be shown to the user.

You can also manually show some changelog using their ids:

workwonders.changelog.showChangelogs([1, 2, 3]);

Or manually close the changelogs view :

workwonders.changelog.closeChangelogWidget();

Mini changelog widget

workwonders.changelog.initChangelogWidgetMini();

This widget shows the last published changelogs in a list, and allows users to click and open the desired changelog

You can open the mini widget programmatically:

workwonders.changelog.openChangelogMiniWidget();

Or you can rely on the global click listener and data attributes:

<button data-open-workwonders-changelog-mini>What’s new</button>

To close the mini widget:

workwonders.changelog.closeChangelogMiniWidget();

Context-based changelogs and SPA navigation

The SDK supports context-based changelogs, which can be shown automatically based on:

The current URL.
Optional CSS selectors for clicked elements.

On initialization, the SDK already evaluates the current context. For single-page applications, call notifyUrlChange whenever your route changes so that context-based changelogs can be re-evaluated.

import { WorkWonders } from "workwonders-sdk";

const workwonders = new WorkWonders();

await workwonders.init({
  organization: "your-org-slug",
  token: "optional-jwt-token",
  locale: "en",
});

function onRouteChange() {
  workwonders.notifyUrlChange();
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme