# Mouseflow Destination

## Destination Info

* Accepts [Page](/docs/segment/connections/spec/page), [Identify](/docs/segment/connections/spec/identify), [Track](/docs/segment/connections/spec/track) calls.
* Refer to it as **Mouseflow** in the [Integrations object.](/docs/segment/guides/filtering-data/#filtering-with-the-integrations-object)

### Components

* [Browser](https://github.com/segment-integrations/analytics.js-integration-mouseflow)

## 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

[Mouseflow](https://mouseflow.com/) is a session replay and heatmap tool that shows how visitors click, move, scroll, browse, and pay attention on websites. It helps clients simplify their analytics to make decisions that matter. The `analytics.js` Mouseflow Destination is open-source. You can browse the code [on GitHub](https://github.com/segment-integrations/analytics.js-integration-mouseflow)s.

## Getting Started

1. From the Segment web app, click **Catalog**.
2. Search for "Mouseflow" in the Catalog, select it, and choose which of your sources to connect the destination to.
3. In the destination settings, enter your Site ID within the Segment Settings UI. You can find this in [your Mouseflow UI](http://help.mouseflow.com/knowledge_base/topics/how-do-i-find-my-mouseflow-site-id).

Your changes appear in the Segment CDN in about 45 minutes, and then Analytics.js starts asynchronously loading the Mouseflow snippet on your page and sending data.

## 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:

```text
analytics.page()
```

An initial `page` call is required for data to be sent to Mouseflow using Analytics.js and sends a page view. This is included by default in your [Segment snippet](/docs/segment/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet).

## 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:

```text
analytics.identify('user1234', {
  email: 'petergibbon@email.com',
  firstname: 'Peter',
  lastname: 'Gibbon'
})
```

When you call Identify, the `traits` you set will be sent as custom variables to Mouseflow.

## Settings

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

| Field                | Description             | Required | Type   |
| -------------------- | ----------------------- | -------- | ------ |
| Site ID              | Your Mouseflow site ID. | Yes      | string |
| Mouseflow HTML Delay | HTML Delay              | No       | number |