# Userpilot Web Plugin

## Destination Info

* Accepts [Page](/docs/segment/connections/spec/page), [Identify](/docs/segment/connections/spec/identify), [Track](/docs/segment/connections/spec/track) calls.
* In Device-mode, refer to it as **Userpilot** in the [Integrations object.](/docs/segment/guides/filtering-data/#filtering-with-the-integrations-object)
* This integration is **partner owned.** Please reach out to the partner's support for any issues.

### Components

* [Browser](https://github.com/ThabetIbrahim/segment-userpilot-integration)

## Connection Modes

[Learn more about connection modes.](/docs/segment/connections/destinations/#connection-modes)

### Device-Mode

* web: yes
* mobile: no
* server: no

### Cloud-Mode

* web: no
* mobile: no
* server: no

[Userpilot Web Plugin](https://userpilot.com/?utm_source=segmentio\&utm_medium=docs\&utm_campaign=partners) helps product teams increase user adoption by allowing them to trigger highly personalized onboarding experiences across the user journey. The Segment integration will help you install and send data to Userpilot without added development time.

This destination is maintained by Userpilot. For any issues with the destination, [contact the Userpilot Support team](mailto:support@userpilot.io).

## Getting Started

1. From the Segment web app, click **Catalog**.
2. Search for *Userpilot Web Plugin* in the Catalog, select it, and choose the source you want to connect the destination to.
3. Enter the **App Token** into your Segment Settings UI which you can find from your [Userpilot dashboard](https://app.userpilot.io/settings/setup) within the code snippet that looks like this `<script src = "https://deploy.userpilot.io/73fe57o8.js"></script>` where `73fe57o8` is the value you want to use.

## Page

If you're not familiar with the Segment Specs, take a look to understand what the [Page method](/docs/segment/connections/spec/page/) does. An example call would look like:

```js
analytics.page()
```

Calling the `page` from `analytics.js` triggers the `userpilot.reload` method that will check for any current running experiences on that page and fetch any new experiences that satisfy the specifed page settings.

## Identify

If you're not familiar with the Segment Specs, take a look to understand what the [Identify method](/docs/segment/connections/spec/identify/) does. An example call would look like:

```js
analytics.identify('userId123', {
  email: 'john.doe@example.com'
});
```

Calling `identify` from `analytics.js` will trigger the `userpilot.identify`. We recommend passing as much data as possible to get the most out of Userpilot.

Data passed in the `identify` can be organized under different categories.

* Properties about the user such as `plan` or `userRole` to help targetting a specifc segment.
* Properties to personalize the content of the Userpilot experiences such as `name` or `company`.
* Properties to target users based on their lifecycle such as `createdAt`. This will allow you to target newly created accounts or accounts that have yet to achieve a certain feature in the user lifecyle.

## Track

If you're not familiar with the Segment Specs, take a look to understand what the [Track method](/docs/segment/connections/spec/track/) does. An example call would look like:

```js
analytics.track('Clicked Login Button')
```

Calling `track` from `analytics.js` will trigger `userpilot.track`. This sends event data to Userpilot where it can be used for content triggering.

## Settings

Segment lets you change these destination settings from the Segment app without having to touch any code.

| Field     | Description                                                                                             | Required | Type   |
| --------- | ------------------------------------------------------------------------------------------------------- | -------- | ------ |
| App Token | You can retrieve your API Key from your \[Userpilot dashboard]\(https://run.userpilot.io/installation). | Yes      | string |