Captivated

Plug-and-play product feedback.

Use this guide to learn how to integrate Captivated's feedback widget into your project and start collecting feedback on Captivated.

Please note that we're constantly updating this project, so always be keen on updating this package to the newest release to stay up-to-date with new features.

Installation

npm install captivated

Initialization

To start using Captivated, you must initialize your API key, set your environment (if testing), and register your first user.

To import the widget, functions, and styles:

import { Captivated, init, setEnvironment, registerUser } from "captivated";
import "captivated/captivated.css";

You can find your API key on your project's settings page. To initialize your API key:

init("[API_KEY]");

You will only need to do this once.

If you're still testing the integration on your local development environment, you can set your environment to "development" so you don't populate your project with test data. Do the following:

setEnvironment("development");

You will only need to do this once.

To register your first user, simply do the following. You can include this in your custom registration function as well. All that is needed to register a user is a name.

// "unique" is false by default
// "callback" is optional
registerUser([data], unique, callback);

Here's an example:

registerUser({
  "name": "John Doe", // required
  "picture": "https://...", // optional; auto-generated if no picture is supplied
  "properties": { // optional
    "email": "[email protected]",
    "gender": "male",
    ...
  }
});

To enable the "unique" parameter, you must also pass an identifier into the data object

registerUser({
  "identifier": "[id]",
  "name": "John Doe",
  "picture": "https://..."
}, true);

If your user's data ever changes, you can update it within Captivated to maintain symmetrical data. Only pass in the user properties that changed, Captivated automatically specifies which user to update.

updateUser(newUserData);

Here's an example:

updateUser({ "name": "Updated John Doe" });

Finally, to display the Captivated widget, simply import the component on any page you want it displayed on!

 <Captivated
  primaryColor="#fff"
  backgroundColor="#0070F4"
  pmfSurveyPromptDelay={3000}
/>

Widget Props

| Name | Type | Default | Description | | ----- | ---- | ------- | ----------- | | primaryColor | String (HEX code) | #0070F4 | Determines the widget's colors for buttons, progress bars, icons, etc. | | backgroundColor | String (HEX code) | #fff | Determines the widget's background color. Text is automatically assigned to white or black based on color darkness. | | pmfSurveyPromptDelay | Number (in milliseconds) | 1500 | Determines the delay for the PMF survey prompt |

Credits

Closed-source. Built for Captivated by Calix Huang