Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 44 additions & 46 deletions packages/browser-sdk/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ by down-stream clients, like the React SDK.
Note that accessing `isEnabled` on the object returned by `getFeatures` does not automatically
generate a `check` event, contrary to the `isEnabled` property on the object returned by `getFeature`.

## Remote config (beta)
## Remote config

Remote config is a dynamic and flexible approach to configuring feature behavior outside of your app – without needing to re-deploy it.

Expand All @@ -201,16 +201,6 @@ const features = bucketClient.getFeatures();
Just as `isEnabled`, accessing `config` on the object returned by `getFeatures` does not automatically
generate a `check` event, contrary to the `config` property on the object returned by `getFeature`.

## Tracking feature usage

The `track` function lets you send events to Bucket to denote feature usage.
By default Bucket expects event names to align with the feature keys, but
you can customize it as you wish.

```ts
bucketClient.track("huddle", { voiceHuddle: true });
```

## Updating user/company/other context

Attributes given for the user/company/other context in the BucketClient constructor can be updated for use in feature targeting evaluation with the `updateUser()`, `updateCompany()` and `updateOtherContext()` methods.
Expand All @@ -228,7 +218,43 @@ await bucketClient.updateUser({ voiceHuddleOptIn: (!isEnabled).toString() });

> [!NOTE] > `user`/`company` attributes are also stored remotely on the Bucket servers and will automatically be used to evaluate feature targeting if the page is refreshed.

## Qualitative feedback
## Toolbar

The Bucket Toolbar is great for toggling features on/off for yourself to ensure that everything works both when a feature is on and when it's off.

<img width="352" alt="Toolbar screenshot" src="https://github.com/user-attachments/assets/c223df5a-4bd8-49a1-8b4a-ad7001357693" />

The toolbar will automatically appear on `localhost`. However, it can also be incredibly useful in production.
You have full control over when it appears through the `toolbar` configuration option passed to the `BucketClient`.

You can pass a simple boolean to force the toolbar to appear/disappear:

```typescript
const client = new BucketClient({
// show the toolbar even in production if the user is an internal/admin user
toolbar: user?.isInternal,
...
});
```

You can also configure the position of the toolbar on the screen:

```typescript
const client = new BucketClient({
toolbar: {
show: true;
position: {
placement: "bottom-left",
offset: {x: "1rem", y: "1rem"}
}
}
...
})
```

See [the reference](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for details.

## Qualitative feedback on beta features

Bucket can collect qualitative feedback from your users in the form of a [Customer Satisfaction Score](https://en.wikipedia.org/wiki/Customer_satisfaction) and a comment.

Expand All @@ -248,8 +274,6 @@ You can find all the options to make changes to the default behavior in the [Buc

Bucket can assist you with collecting your user's feedback by offering a pre-built UI, allowing you to get started with minimal code and effort.

![image](https://github.com/bucketco/bucket-javascript-sdk/assets/34348/c387bac1-f2e2-4efd-9dda-5030d76f9532)

[Read the Bucket feedback UI documentation](./FEEDBACK.md)

### Bucket feedback SDK
Expand All @@ -270,42 +294,16 @@ If you are not using the Bucket Browser SDK, you can still submit feedback using

See details in [Feedback HTTP API](https://docs.bucket.co/reference/http-tracking-api#feedback)

## Toolbar

The Bucket Toolbar is great for toggling features on/off for yourself to ensure that everything works both when a feature is on and when it's off.

<img width="352" alt="Toolbar screenshot" src="https://github.com/user-attachments/assets/c223df5a-4bd8-49a1-8b4a-ad7001357693" />

The toolbar will automatically appear on `localhost`. However, it can also be incredibly useful in production.
You have full control over when it appears through the `toolbar` configuration option passed to the `BucketClient`.

You can pass a simple boolean to force the toolbar to appear/disappear:

```typescript
const client = new BucketClient({
// show the toolbar even in production if the user is an internal/admin user
toolbar: user?.isInternal,
...
});
```
## Tracking feature usage

You can also configure the position of the toolbar on the screen:
The `track` function lets you send events to Bucket to denote feature usage.
By default Bucket expects event names to align with the feature keys, but
you can customize it as you wish.

```typescript
const client = new BucketClient({
toolbar: {
show: true;
position: {
placement: "bottom-left",
offset: {x: "1rem", y: "1rem"}
}
}
...
})
```ts
bucketClient.track("huddle", { voiceHuddle: true });
```

See [the reference](https://docs.bucket.co/supported-languages/browser-sdk/globals#toolbaroptions) for details.

## Event listeners

Event listeners allow for capturing various events occurring in the `BucketClient`. This is useful to build integrations with other system or for various debugging purposes. There are 5 kinds of events:
Expand Down