# Setup Guide


This guide will help you set up Customer.io as a destination in the RudderStack dashboard. It also lists the configuration settings required to correctly send data from the supported sources to Customer.io.

## Connection compatibility

{{< destination-config >}}

{{< info >}}
In the web device mode integration, that is, using the [JavaScript SDK]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/_index.md" >}}) as a source, RudderStack loads the Customer.io native SDK from the `https://assets.customer.io/` domain. 

Based on your website's content security policy, you might need to [allowlist this domain]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk.md#allowlist-destination-domain" >}}) to load the Customer.io SDK successfully.
{{< /info >}}

## Setup

In your [RudderStack dashboard](https://app.rudderstack.com/), add a source. Then, from the list of destinations, select **Customer.io**.

### Connection settings

| Setting | Description |
| :----| :-----|
| Destination name | Assign a name to uniquely identify the destination. |
| Site ID | Enter your Customer.io [site ID](#faq). |
| API key |Enter your Customer.io [API key](#faq).  |
| Data center | Choose your Customer.io data center from **US** or **EU**. <br /><br />**Note**: To send events to the EU data center using [RudderStack Open Source](https://app.rudderstack.com/signup?type=opensource), you should be using [`rudder-transformer`](https://github.com/rudderlabs/rudder-transformer) v1.42.0 or later. |

### Configuration settings

Configure the below settings depending on your [connection mode](#connection-compatibility):

#### Cloud mode settings

| Setting | Description |
| :----| :-----|
| Event sent after setting device token | Enter the name of the event that RudderStack fires immediately after setting the device token. This lets RudderStack send the device token to Customer.io immediately. | 

#### Device mode settings

Configure the below device mode settings depending on your source:

##### Web SDK

| Setting | Description |
| :----| :-----|
| Event sent after setting device token | Enter the name of the event that RudderStack fires immediately after setting the device token. This lets RudderStack send the device token to Customer.io immediately. | 
| Send page name in SDK mode | If this setting is toggled on, RudderStack sends the page name to Customer.io. Otherwise, Customer.io fetches the page name in the form of a URL. | 
| Enable in-app message support | Toggle on this setting to send in-app messages to your website using the native web SDK. <br /><br />For more information on setting up in-app messages for your website, see the [Customer.io documentation](https://customer.io/docs/journeys/in-app-getting-started/#javascript-snippet). |

##### Mobile SDK

| Setting | Description |
| :----| :-----|
| Event sent after setting device token | Enter the name of the event that RudderStack fires immediately after setting the device token. This lets RudderStack send the device token to Customer.io immediately. | 
| Automatically track device attributes in SDK mode | Automatically track device attributes in the SDK mode through the Customer.io mobile SDK. <br /><br />**Note**: This setting is toggled on by default - toggle it off to track the attributes manually. |
| Minimum number of tasks in background queue | This setting is available only for the **Android (Java)** source and lets you specify the minimum number of tasks to be kept in the background queue. <br /><br />**Note**: By default, RudderStack sets this value set to `10`. |
| Delay in seconds for background queue | This setting is available only for the **Android (Java)** source and lets you specify the delay (in seconds) for the events to be kept in the background queue. <br /><br />**Note**: By default, RudderStack sets this value set to `30`. |

### Other settings

| Setting | Description |
| :----| :-----|
| Client-side Events Filtering | This setting lets you specify which events should be blocked or allowed to flow through to Customer.io. See the [Client-side Events Filtering]({{< ref "sources/event-streams/sdks/event-filtering.md" >}}) guide for more information. | 

### Consent settings

| Setting | Description |
| :----| :-----|
| Consent management settings | Configure the consent management settings for the specified source by choosing the **Consent management provider** from the dropdown and entering the relevant consent category IDs. See [Consent Management in RudderStack]({{< ref "data-governance/consent-management/overview.md" >}}) for more information on this feature. |

## Next steps

- [Send events in cloud mode]({{< ref "destinations/streaming-destinations/customer-io/cloud-mode.md" >}})
- [Send events in device mode]({{< ref "destinations/streaming-destinations/customer-io/device-mode.md" >}})

## FAQ

#### Where can I find the Customer.io API key and site ID?


1. Sign in to your [Customer.io dashboard](https://fly.customer.io/).
2. In the left panel, click **Settings** and select **Account Settings**.
3. Then, click **API Credentials**. You should find the site ID and API key for your project listed here.

{{< image src="images/event-stream-destinations/customerio-siteid-apikey.webp" alt="Customer.io site ID and API key" >}}