Skip to main content

Client SDK

By default the Produktly script includes a client SDK, that you can use with Javascript to more granularly control certain behaviors. For example, to start product tour on a custom button click.

Useful for:​

  • Identifying users and enabling user segmentation
  • Starting e.g. product tours with code based on e.g. button click, or any custom event
  • More granular control when widgets are shown
  • Implementing complex filters and product specific behaviors
  • Configuring redirect behavior

Available methods​

Common Parameters​

Many of the SDK methods that open or start widgets support an optional ignorePublish parameter:

  • ignorePublish?: boolean - When true, the widget will be shown regardless of its publishing status on the Produktly dashboard. When false, the SDK will respect the publishing status and only show published widgets. Defaults to true for backwards compatibility.

Produktly.configure​

Configure redirect behavior, for example if you have a single page app, you might want to use the router of that for redirects instead of doing full page refreshes which is the default.

Available params:

type ConfigureParams = {
  redirect?: (url: string) => void;
};
window.Produktly.configure({
  redirect: (url) => {
    yourRedirectFunction(url);
  },
});

Produktly.identifyUser​

Used to identify the current user for Produktly, so that you can use your own custom attributes to filter on Produktly.com. Also to track checklist or changelog progress for the user.

Available params:

window.Produktly.identifyUser(
  userId: string, // String or number, that uniquely identifies the current user, e.g. primary key
  metadata: Record<string, string | number>, // This should be an object
  options?: {
    hash?: string; // HMAC-SHA256 hash for identity verification (optional)
  }
);

Example:

window.Produktly.identifyUser(
  7182, // String or number, that uniquely identifies the current user, e.g. primary key
  {
    plan: "startup",
    companyId: 771,
    createdAt: "2021-10-26T12:33:52Z",
    isOnTrial: false,
  } // This should be an object
);

With identity verification:

window.Produktly.identifyUser(7182, { plan: "startup" }, {
  hash: "a1b2c3..." // HMAC-SHA256 hash generated on your backend
});

Produktly.startTour​

Start tour manually using Javascript, all you need is the tour id.

Available params:

type StartTourParams = {
  tourId: number;
  stepIndex?: number; // Optional, if you want to start at a specific step. Note that index is 0 based
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.startTour({
  tourId: 1,
});

or with stepIndex

window.Produktly.startTour({
  tourId: 1,
  stepIndex: 1,
});

Produktly.closeTour​

Close the currently running tour.

Available params:

type CloseTourParams = {
  id: number;
};

Example:

window.Produktly.closeTour({
  id: 1,
});

Produktly.startChecklist​

Start checklist with Javascript, all you need is the checklist id.

Available params:

type StartChecklistParams = {
  checklistId: number;
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.startChecklist({
  checklistId: 1,
});

Produktly.markChecklistStepCompleted​

Mark specific checklist step as completed checklist with Javascript. This can be useful for building very customized checklist experiences, that are not possible with the default Produktly checklist widget.

You can find the step id by going to edit the checklist in Produktly, then selecting the step, and then scrolling to the bottom you will see "Step Id: ...".

Available params:

type MarkChecklistStepCompletedParams = {
  checklistId: number;
  stepId: string; // uuid
};

Example:

window.Produktly.markChecklistStepCompleted({
  checklistId: 1,
  stepId: "4d3ad847-8348-42a3-bcc1-2b516759e9ff",
});

Produktly.openChangelog​

Open a changelog with Javascript, all you need is the changelog id.

Available params:

type OpenChangelogParams = {
  id: number;
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.openChangelog({
  id: 1,
});

Produktly.getChangelogUnreadCount​

Get the unread count for a given changelog, i.e. how many posts for the changelog the user hasn't read yet

Note that this returns a Promise, since it requires an api call, so you should either use await or Promise chaining i.e. .then.

Available params:

type GetChangelogUnreadCountParams = {
  id: number;
};

Returns: Promise<number>

Example:

const unreadCount = await window.Produktly.getChangelogUnreadCount({
  id: 1,
});

Produktly.openSmartTip​

Open a smart tip with Javascript, all you need is the smart tip id.

Available params:

type OpenSmartTipParams = {
  id: number;
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.openSmartTip({
  id: 1,
});

Produktly.openFeedback​

Open a feedback widget with Javascript, all you need is the feedback widget id.

Available params:

type OpenFeedbackParams = {
  id: number;
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.openFeedback({
  id: 1,
});

Produktly.openAnnouncement​

Open an announcement with Javascript, all you need is the announcement id.

Available params:

type OpenAnnouncementParams = {
  id: number;
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.openAnnouncement({
  id: 1,
});

Produktly.openNpsWidget​

Open an NPS widget with Javascript, all you need is the NPS widget id.

Available params:

type OpenNpsWidgetParams = {
  id: number;
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.openNpsWidget({
  id: 1,
});

Produktly.openMicroSurvey​

Open a micro survey with Javascript, all you need is the micro survey id.

Available params:

type OpenMicroSurveyParams = {
  id: number;
  ignorePublish?: boolean; // Optional, defaults to true. When true, ignores publishing status
};

Example:

window.Produktly.openMicroSurvey({
  id: 1,
});

Produktly.closeChecklist​

Close the currently open checklist widget.

Available params:

type CloseChecklistParams = {
  id: number;
};

Example:

window.Produktly.closeChecklist({
  id: 1,
});

Produktly.closeChangelog​

Close the currently open changelog widget.

Available params:

type CloseChangelogParams = {
  id: number;
};

Example:

window.Produktly.closeChangelog({
  id: 1,
});

Produktly.closeSmartTip​

Close the currently open smart tip widget.

Available params:

type CloseSmartTipParams = {
  id: number;
};

Example:

window.Produktly.closeSmartTip({
  id: 1,
});

Produktly.closeFeedback​

Close the currently open feedback widget.

Available params:

type CloseFeedbackParams = {
  id: number;
};

Example:

window.Produktly.closeFeedback({
  id: 1,
});

Produktly.closeAnnouncement​

Close the currently open announcement widget.

Available params:

type CloseAnnouncementParams = {
  id: number;
};

Example:

window.Produktly.closeAnnouncement({
  id: 1,
});

Produktly.closeNpsWidget​

Close the currently open NPS widget.

Available params:

type CloseNpsWidgetParams = {
  id: number;
};

Example:

window.Produktly.closeNpsWidget({
  id: 1,
});

Produktly.closeMicroSurvey​

Close the currently open micro survey widget.

Available params:

type CloseMicroSurveyParams = {
  id: number;
};

Example:

window.Produktly.closeMicroSurvey({
  id: 1,
});

Produktly.closeAll​

Close all currently open Produktly widgets at once. This is useful when you want to clear all widgets from the screen.

Example:

window.Produktly.closeAll();