Reference

Classes

BucketClient

BucketClient lets you interact with the Bucket API.

Constructors

new BucketClient()

new BucketClient(opts: InitOptions): BucketClient

Create a new BucketClient instance.

Parameters

Parameter
Type

Returns

BucketClient

Methods

feedback()

feedback(payload: Feedback): Promise<undefined | Response>

Submit user feedback to Bucket. Must include either score or comment, or both.

Parameters

Parameter
Type

payload

Returns

Promise<undefined | Response>

getFeature()

getFeature(key: string): Feature

Return a feature. Accessing isEnabled will automatically send a check event.

Parameters

Parameter
Type

key

string

Returns

Feature

A feature

getFeatures()

getFeatures(): RawFeatures

Returns a map of enabled features. Accessing a feature will not send a check event

Returns

RawFeatures

Map of features

initialize()

initialize(): Promise<void>

Initialize the Bucket SDK.

Must be called before calling other SDK methods.

Returns

Promise<void>

onFeaturesUpdated()

onFeaturesUpdated(cb: () => void): () => void

Register a callback to be called when the features are updated. Features are not guaranteed to have actually changed when the callback is called.

Calling client.stop() will remove all listeners added here.

Parameters

Parameter
Type
Description

cb

() => void

this will be called when the features are updated.

Returns

Function

Returns

void

requestFeedback()

requestFeedback(options: RequestFeedbackData): void

Display the Bucket feedback form UI programmatically.

This can be used to collect feedback from users in Bucket in cases where Automated Feedback Surveys isn't appropriate.

Parameters

Parameter
Type

Returns

void

sendCheckEvent()

sendCheckEvent(checkEvent: CheckEvent): Promise<boolean>

Parameters

Parameter
Type

checkEvent

Returns

Promise<boolean>

stop()

stop(): Promise<void>

Stop the SDK. This will stop any automated feedback surveys. It will also stop the features client, including removing any onFeaturesUpdated listeners.

Returns

Promise<void>

track()

track(eventName: string, attributes?: null | Record<string, any>): Promise<undefined | Response>

Track an event in Bucket.

Parameters

Parameter
Type
Description

eventName

string

The name of the event

attributes?

null | Record<string, any>

Any attributes you want to attach to the event

Returns

Promise<undefined | Response>

updateCompany()

updateCompany(company: {}): Promise<void>

Update the company context. Performs a shallow merge with the existing company context. Attempting to update the company ID will log a warning and be ignored.

Parameters

Parameter
Type

company

{}

Returns

Promise<void>

updateOtherContext()

updateOtherContext(otherContext: {}): Promise<void>

Update the company context. Performs a shallow merge with the existing company context. Updates to the company ID will be ignored.

Parameters

Parameter
Type

otherContext

{}

Returns

Promise<void>

updateUser()

updateUser(user: {}): Promise<void>

Update the user context. Performs a shallow merge with the existing user context. Attempting to update the user ID will log a warning and be ignored.

Parameters

Parameter
Type

user

{}

Returns

Promise<void>

Interfaces

BucketContext

Properties

Property
Type
Description

company?

Company related context

otherContext?

Record<string, undefined | string | number>

Context which is not related to a user or a company

user?

User related context


CheckEvent

Event representing checking the feature flag evaluation result

Properties

Property
Type
Description

key

string

Feature key

value

boolean

Result of feature flag evaluation

version?

number

Version of targeting rules


CompanyContext

Context is a set of key-value pairs. Id should always be present so that it can be referenced to an existing company.

Indexable

[key: string]: undefined | string | number

Properties

Property
Type
Description

id

undefined | string | number

Company id

name?

string

Company name


Feature

Properties

Property
Type
Description

isEnabled

boolean

Result of feature flag evaluation

requestFeedback

(options: Omit<RequestFeedbackData, "featureId" | "featureKey">) => void

track

() => Promise<undefined | Response>

Function to send analytics events for this feature


FeedbackScoreSubmission

Properties

Property
Type

feedbackId?

string

question

string

score

number


FeedbackSubmission

Properties

Property
Type

comment

string

feedbackId?

string

question

string

score

number


InitOptions

BucketClient initialization options.

Properties

Property
Type
Description

apiBaseUrl?

string

Base URL of Bucket servers. You can override this to use your mocked server.

company?

Company related context. If you provide id Bucket will enrich the evaluation context with company attributes on Bucket servers.

enableTracking?

boolean

features?

Feature flag specific configuration

feedback?

AutoFeedback specific configuration

host?

string

Deprecated

Use apiBaseUrl instead.

logger?

You can provide a logger to see the logs of the network calls. This is undefined by default. For debugging purposes you can just set the browser console to this property:

options.logger = window.console;

otherContext?

Record<string, any>

Context not related to users or companies

publishableKey

string

Publishable key for authentication

sdkVersion?

string

Version of the SDK

sseBaseUrl?

string

Base URL of Bucket servers for SSE connections used by AutoFeedback.

sseHost?

string

Deprecated

Use sseBaseUrl instead.

user?

User related context. If you provide id Bucket will enrich the evaluation context with user attributes on Bucket servers.


Logger

Methods

debug()

debug(message: string, ...args: any[]): void

Parameters

Parameter
Type

message

string

...args

any[]

Returns

void

error()

error(message: string, ...args: any[]): void

Parameters

Parameter
Type

message

string

...args

any[]

Returns

void

info()

info(message: string, ...args: any[]): void

Parameters

Parameter
Type

message

string

...args

any[]

Returns

void

warn()

warn(message: string, ...args: any[]): void

Parameters

Parameter
Type

message

string

...args

any[]

Returns

void


OnScoreSubmitResult

Properties

Property
Type

feedbackId

string


OpenFeedbackFormOptions

Properties

Property
Type
Description

key

string

onClose?

() => void

onDismiss?

() => void

onScoreSubmit?

onSubmit

(data: FeedbackSubmission) => void | Promise<void>

openWithCommentVisible?

boolean

Open the form with both the score and comment fields visible. Defaults to false

position?

Control the placement and behavior of the feedback form.

title?

string

translations?

Add your own custom translations for the feedback form. Undefined translation keys fall back to english defaults.


UserContext

Indexable

[key: string]: undefined | string | number

Properties

Property
Type
Description

email?

string

User email

id

undefined | string | number

User id

name?

string

User name

Type Aliases

FeatureIdentifier

type FeatureIdentifier = 
  | {
  featureId: string;
 }
  | {
  featureKey: string;
};

Type declaration

{ featureId: string; }

Name
Type
Description

featureId

string

Bucket feature ID.

Deprecated

use feedbackId instead.

{ featureKey: string; }

Name
Type
Description

featureKey

string

Bucket feature key.


FeaturesOptions

type FeaturesOptions = {
  expireTimeMs: number;
  fallbackFeatures: string[];
  staleTimeMs: number;
  staleWhileRevalidate: boolean;
  timeoutMs: number;
};

Type declaration

Name
Type
Description

expireTimeMs?

number

fallbackFeatures?

string[]

Feature keys for which isEnabled should fallback to true if SDK fails to fetch features from Bucket servers.

staleTimeMs?

number

staleWhileRevalidate?

boolean

If set to true client will return cached value when its stale but refetching

timeoutMs?

number

Timeout in miliseconds


Feedback

type Feedback = UnassignedFeedback & {
  companyId: string;
  userId: string;
};

Type declaration

Name
Type
Description

companyId?

string

Company ID from your own application.

userId?

string

User ID from your own application.


FeedbackOptions

type FeedbackOptions = {
  autoFeedbackHandler: FeedbackPromptHandler;
  enableAutoFeedback: boolean;
  enableLiveSatisfaction: boolean;
  liveSatisfactionHandler: FeedbackPromptHandler;
  ui: {
     position: FeedbackPosition;
     translations: Partial<FeedbackTranslations>;
    };
};

Type declaration

Name
Type
Description

autoFeedbackHandler?

enableAutoFeedback?

boolean

Enables automatic feedback prompting if it's set up in Bucket

enableLiveSatisfaction?

boolean

Deprecated

Use enableAutoFeedback instead

liveSatisfactionHandler?

Deprecated

Use autoFeedbackHandler instead

ui?

{ position: FeedbackPosition; translations: Partial<FeedbackTranslations>; }

With these options you can override the look of the feedback prompt

ui.position?

Control the placement and behavior of the feedback form.

ui.translations?

Add your own custom translations for the feedback form. Undefined translation keys fall back to english defaults.


FeedbackPlacement

type FeedbackPlacement = "bottom-right" | "bottom-left" | "top-right" | "top-left";

FeedbackPosition

type FeedbackPosition = 
  | {
  type: "MODAL";
 }
  | {
  offset: Offset;
  placement: FeedbackPlacement;
  type: "DIALOG";
 }
  | {
  anchor: HTMLElement | null;
  type: "POPOVER";
};

FeedbackPrompt

type FeedbackPrompt = {
  featureId: string;
  promptId: string;
  question: string;
  showAfter: Date;
  showBefore: Date;
};

Type declaration

Name
Type
Description

featureId

string

Feature ID from Bucket

promptId

string

Id of the prompt

question

string

Specific question user was asked

showAfter

Date

Feedback prompt should appear only after this time

showBefore

Date

Feedback prompt will not be shown after this time


FeedbackPromptHandler()

type FeedbackPromptHandler = (prompt: FeedbackPrompt, handlers: FeedbackPromptHandlerCallbacks) => void;

Parameters

Returns

void


FeedbackPromptHandlerCallbacks

type FeedbackPromptHandlerCallbacks = {
  openFeedbackForm: (options: FeedbackPromptHandlerOpenFeedbackFormOptions) => void;
  reply: FeedbackPromptReplyHandler;
};

Type declaration

Name
Type

FeedbackPromptHandlerOpenFeedbackFormOptions

type FeedbackPromptHandlerOpenFeedbackFormOptions = Omit<RequestFeedbackOptions, 
  | "featureId"
  | "featureKey"
  | "userId"
  | "companyId"
  | "onClose"
| "onDismiss">;

FeedbackPromptReply

type FeedbackPromptReply = {
  comment: string;
  companyId: string;
  question: string;
  score: number;
};

Type declaration

Name
Type

comment?

string

companyId?

string

question

string

score?

number


FeedbackPromptReplyHandler()

type FeedbackPromptReplyHandler = <T>(reply: T) => T extends null ? Promise<void> : Promise<{
  feedbackId: string;
}>;

Type Parameters

Type Parameter

T extends FeedbackPromptReply | null

Parameters

Parameter
Type

reply

T

Returns

T extends null ? Promise<void> : Promise<{ feedbackId: string; }>


FeedbackTranslations

type FeedbackTranslations = {
  DefaultQuestionLabel: string;
  QuestionPlaceholder: string;
  ScoreDissatisfiedLabel: string;
  ScoreNeutralLabel: string;
  ScoreSatisfiedLabel: string;
  ScoreStatusDescription: string;
  ScoreStatusLoading: string;
  ScoreStatusReceived: string;
  ScoreVeryDissatisfiedLabel: string;
  ScoreVerySatisfiedLabel: string;
  SendButton: string;
  SuccessMessage: string;
};

You can use this to override text values in the feedback form with desired language translation

Type declaration

Name
Type

DefaultQuestionLabel

string

QuestionPlaceholder

string

ScoreDissatisfiedLabel

string

ScoreNeutralLabel

string

ScoreSatisfiedLabel

string

ScoreStatusDescription

string

ScoreStatusLoading

string

ScoreStatusReceived

string

ScoreVeryDissatisfiedLabel

string

ScoreVerySatisfiedLabel

string

SendButton

string

SuccessMessage

string


Offset

type Offset = {
  x: string | number;
  y: string | number;
};

Type declaration

Name
Type
Description

x?

string | number

Offset from the nearest horizontal screen edge after placement is resolved

y?

string | number

Offset from the nearest vertical screen edge after placement is resolved


RawFeature

type RawFeature = {
  isEnabled: boolean;
  key: string;
  targetingVersion: number;
};

Type declaration

Name
Type
Description

isEnabled

boolean

Result of feature flag evaluation

key

string

Feature key

targetingVersion?

number

Version of targeting rules


RawFeatures

type RawFeatures = Record<string, RawFeature | undefined>;

RequestFeedbackData

type RequestFeedbackData = Omit<OpenFeedbackFormOptions, "key" | "onSubmit"> & {
  companyId: string;
  onAfterSubmit: (data: FeedbackSubmission) => void;
 } & FeatureIdentifier;

Type declaration

Name
Type
Description

companyId?

string

Company ID from your own application.

onAfterSubmit?

(data: FeedbackSubmission) => void

Allows you to handle a copy of the already submitted feedback.

This can be used for side effects, such as storing a copy of the feedback in your own application or CRM.


RequestFeedbackOptions

type RequestFeedbackOptions = RequestFeedbackData & {
  userId: string;
};

Type declaration

Name
Type
Description

userId

string

User ID from your own application.


UnassignedFeedback

type UnassignedFeedback = {
  comment: string;
  feedbackId: string;
  promptedQuestion: string;
  promptId: string;
  question: string;
  score: number;
  source: "prompt" | "sdk" | "widget";
 } & FeatureIdentifier;

Type declaration

Name
Type
Description

comment?

string

User supplied comment about your feature.

feedbackId?

string

Bucket feedback ID

promptedQuestion?

string

The original question. This only needs to be populated if the feedback was submitted through the automated feedback surveys channel.

promptId?

string

Bucket feedback prompt ID.

This only exists if the feedback was submitted as part of an automated prompt from Bucket.

Used for internal state management of automated feedback.

question?

string

The question that was presented to the user.

score?

number

Customer satisfaction score.

source?

"prompt" | "sdk" | "widget"

Source of the feedback, depending on how the user was asked

  • prompt - Feedback submitted by way of an automated feedback survey (prompted)

  • widget - Feedback submitted via requestFeedback

  • sdk - Feedback submitted via feedback

Variables

DEFAULT_TRANSLATIONS

const DEFAULT_TRANSLATIONS: FeedbackTranslations;
import { FeedbackTranslations } from "../types";

/**
 * {@includeCode ./defaultTranslations.tsx}
 */
export const DEFAULT_TRANSLATIONS: FeedbackTranslations = {
  DefaultQuestionLabel: "How satisfied are you with this feature?",
  QuestionPlaceholder: "Write a comment",
  ScoreStatusDescription: "Pick a score and leave a comment",
  ScoreStatusLoading: "Saving score, please wait...",
  ScoreStatusReceived: "Score has been received!",
  ScoreVeryDissatisfiedLabel: "Very dissatisfied (1/5)",
  ScoreDissatisfiedLabel: "Dissatisfied (2/5)",
  ScoreNeutralLabel: "Neutral (3/5)",
  ScoreSatisfiedLabel: "Satisfied (4/5)",
  ScoreVerySatisfiedLabel: "Very satisfied (5/5)",
  SuccessMessage: "Feedback received, thank you!",
  SendButton: "Send feedback",
};

feedbackContainerId

const feedbackContainerId: "bucket-feedback-dialog-container" = "bucket-feedback-dialog-container";

ID of HTML DIV element which contains the feedback dialog


propagatedEvents

const propagatedEvents: string[];

These events will be propagated to the feedback dialog

see https://developer.mozilla.org/en-US/docs/Web/API/Element#events

Last updated