// Manual typing for the ProductFruits API due to lack of typing in the library type ProductFruitsApi = { // Tours API tours: { /** * Returns an array of all tours. The tour object contains `id`, `name`, `isRunning`, `currentCard` and `userState` fields. */ getTours(): Array<{ id: number | string; name: string; isRunning: boolean; currentCard: { id: string; name: string; } | null; userState: 'not_finished' | 'finished' | 'skipped'; }>; /** * Starts a tour by the given ID. The current user state is restarted to `not_finished`. * Please note that all rules and segmentations are taken into account, so the tour doesn't have to start if the current context is invalid. */ tryStartTour(tourId: number | string): void; /** * Changes the state of a tour by the given ID. The state field can be `finished` or `skipped`. * If you provide `false` as the third parameter, the tour state will change, but the card will remain open. */ markAs( tourId: number | string, state: 'finished' | 'skipped', kill?: boolean ): void; /** * Advances a tour to the next step. This method is useful when you need to handle special advancing scenarios like drag and drop. */ advanceToNextStep(tourId: number | string): void; /** * Advances a tour to a specific step. `tourId` must be a number, while `cardGUID` must be a string. */ goToStep(tourId: number, cardGUID: string): void; /** * Checks if the tour rules/assigned segment matches. Returns a Promise with `eligible` or `not_eligible`. * The result is cached for a short time. */ isTourEligible( tourId: number | string ): Promise<'eligible' | 'not_eligible'>; /** * Listens to an event that occurs on tours. Returns a function to dispose the event handler. * * Events: * - `tour-finished`: Fired when the given tour is finished by the user. Arguments: Tour ID * - `tour-skipped`: Fired when the given tour is skipped by the user. Arguments: Tour ID * - `tour-advanced`: Fired when the given tour advanced to a new step. Arguments: Tour ID, Object with `currentCardId` * - `tour-card-completed`: Fired when the card was completed by the user. Arguments: Tour ID, Object with `currentCardId` */ listen( event: | 'tour-finished' | 'tour-skipped' | 'tour-advanced' | 'tour-card-completed', callback: ( tourId: number | string, data?: { currentCardId?: string } ) => void ): () => void; }; // Hints API hints: { /** * Updates positions of all hints based on the current target element positions. * This method should be typically called after special animations are applied to the target element. */ updatePositions(): void; }; // Announcements API announcementsV2: { /** * Displays a specific announcement (pop-up or banner) based on its unique identifier. * The `announcementID` identifier can be copied from the announcement's detail page URL * (the segment immediately following `/detail/`). `announcementID` must be a string. */ showAnnouncement(announcementID: string): void; /** * Attaches the newsfeed widget to a custom element. * The parameter must be an HTML element instance, do not pass a CSS selector. * (Newsfeed only) */ attachNewsWidgetToElement(htmlElementInstance: HTMLElement): void; /** * Listens to an event related to announcements. Returns a function to dispose the event handler. * * Events: * - `newsfeed-unread-count-changed`: Fired when the count of unread items changes. * Data includes `count` and `listCheckedAt`. (Newsfeed only) */ listen( event: 'newsfeed-unread-count-changed', callback: (data: { count: number; listCheckedAt: string }) => void ): () => void; }; // Surveys API surveys: { /** * Starts a survey by the given survey ID. * You can get the survey ID from the URL in the Product Fruits administration - the last GUID parameter. */ startSurvey(surveyId: string): void; /** * Listens to an event that occurs on surveys. Returns a function to dispose the event handler. * * Events: * - `survey-closed`: Triggered when a user closes a survey. It can be triggered either by clicking * on the close button or when the last question was answered. * Arguments: `surveyId` (GUID), `reason` (`last_screen` or `close_button`), `answers` (array of answer objects) */ listen( event: 'survey-closed', callback: (event: { surveyId: string; reason: 'last_screen' | 'close_button'; answers: Array<{ stepId?: string; questionId: string; answer: string | number | Array; additText?: string; }>; }) => void ): () => void; }; // Checklists API checklists: { /** * Marks an item by its `internalId` as completed. * The `internalId` parameter has to be set in the Product Fruits administration. * If you set `expand` to true, it will open the popup with checklist items. */ markItemAsDone(internalId: string, expand?: boolean): void; /** * If the Display Mode is set to Embedded, call this method to inject the checklist into your element. * You must pass a JS HTML element, not a CSS selector. * The last parameter is optional. You can pass options. Currently, we support the `checkEligibility` * parameter which does segmentation evaluation and the checklist will be injected only if the * segmentation of the checklist matches. */ injectToElement( checklistId: string, element: HTMLElement, options?: { checkEligibility?: boolean } ): void; /** * Checks if the checklist rules/assigned segment matches. Returns a Promise with `eligible`, `not_eligible`, or `disposed`. * The result is cached for a short time. */ isChecklistEligible( checklistId: string ): Promise<'eligible' | 'not_eligible' | 'disposed'>; /** * Returns an array of active checklists and their states. * Object properties are `id`, `name`, `items`, `state`. * Possible states are `not_touched`, `finished` and `in_progress`. * It also returns an array of checklist items and their states with `id`, `internalId`, `title`, `state` properties. * Possible item states are `done`, `open`, `tbd`. * Please note, that if the checklist is finished and dismissed (closed) by the user, * it won't be returned from this API. */ getChecklists(): Array<{ id: string; name: string; state: 'not_touched' | 'finished' | 'in_progress'; items: Array<{ id: string; internalId?: string; title: Record; state: 'done' | 'open' | 'tbd'; }>; }>; /** * Resets a checklist for the current user. * This API method can be turned on for your account upon request. It is not active by default. * Note: this method is not compatible with group checklists. */ resetForCurrentUser(checklistId: string): void; /** * Listens to an event that occurs on checklists. Returns a function to dispose the event handler. * * Events: * - `item-launched`: Fired when the user launches the item. Arguments: `id`, `internalId` * - `item-completed`: Fired when the user completes the item. Arguments: `id`, `internalId` * - `dismissed`: Fired when the checklist is dismissed. Arguments: `id`, `reason` (`not-completed` or `completed`) */ listen( event: 'item-launched' | 'item-completed' | 'dismissed', callback: ( data: | { id: string; internalId?: string } | { id: string; reason: 'not-completed' | 'completed' } ) => void ): () => void; }; // Life Ring Button API inAppCenter: { /** * Expands the Life Ring Button. * It can receive an options object with `focus` property to open focused to a particular article. */ open(opts?: { focus?: { articleId: number } }): void; /** * Closes the Life Ring Button. */ close(): void; /** * Returns `true` if the Life Ring Button is opened, `false` if it is not. */ isOpened(): boolean; /** * Hides the whole button widget - the launcher button and the popup. */ hide(): void; /** * Shows the previously hidden button widget - the launcher button and the popup. */ show(): void; /** * Attaches the Life Ring to a custom element in your application. * It automatically hides the default launcher button. * The argument must be an element instance, not a CSS selector. */ attachToCustomElement(elementInstance: HTMLElement): void; /** * Listens to a Life Ring Button event and calls the callback. Returns a function to dispose the event handler. * * Events: * - `closed`: Triggered when the Life Ring Button is closed * - `opened`: Triggered when the modal is opened */ listen(event: 'closed' | 'opened', callback: () => void): () => void; }; // Feedback API feedback: { /** * Shows the feedback popup modal. * Use `position` parameter with `top`, `left`, `bottom` or `right` properties to position the widget on a custom place. * You have to use CSS units, i.e. `left: '50px'`. * The second parameter is a callback function that is called when the widget is closing. */ showModal( position?: { top?: string; left?: string; bottom?: string; right?: string; }, onClose?: () => void ): void; /** * Closes the feedback popup modal. */ hideModal(): void; /** * Sets the feedback widget recording mode to the native screen recording mode for the current session. * The differences between the two modes are described in the documentation. * Only one mode can be set as default in your workspace settings. */ changeRecorderMode(mode: 'native' | 'html'): void; }; // Analytics API analytics: { /** * The callback will be called every time a PF event is tracked. * You can use this method to implement custom analytics providers. * The callback receives the event name and event data as parameters. */ forwardEvent(callback: (event: string, data: unknown) => void): void; }; // Events Tracking API events: { /** * Tracks a new event by its `eventName`. The event does not need to be pre-created in the Product Fruits administration. * The `attributes` optional parameter can be used for more detailed segmentation. * The `options` optional parameter can currently get a single option `forwardToIntegrations`. * If you set it to true, the event will be distributed to enabled analytics integrations. */ track( eventName: string, attributes?: Record, options?: { forwardToIntegrations?: boolean } ): void; }; };