> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embedreach.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization

> Style the Reach interface to match your brand

You can customize the appearance of Reach to match your application's branding through the theme property in the SDK configuration.

## Theme Configuration

Reach supports shadcn/ui's styling conventions, making it easy to maintain consistent design.

```javascript theme={null}
const config = {
  // Other configuration...

  theme: {
    styles: {
      primary: '#00758a', // Primary brand color
      secondary: 'pink', // Secondary color
      background: '0 0% 100%', // Page background (HSL format)
      border: 'border-purple-500',

      // Fonts
      'font-body': 'Inter, system-ui, sans-serif',
      'font-heading': 'Montserrat, Arial, sans-serif',
    },
  },
};
```

## Color Format Support

Reach supports multiple color format types:

* HEX colors: #00758a
* Named CSS colors: pink
* HSL (shadcn/ui format): 240 5.9% 10% (hue saturation lightness)
* Tailwind classes: bg-purple-500

<Note>
  We only support the default tailwind background color classes (bg-{color}-{shade}). Custom color names, bg-inherit, bg-current, and bg-transparent are not supported. To see a full list of supported tailwind colors, please refer to the [tailwind documentation](https://tailwindcss.com/docs/background-color).
</Note>

## Font Customization

Reach allows you to customize the fonts used throughout the interface. You can use any system font or any font available on Google Fonts—just specify the font name in your theme config, and Reach will automatically load it for you.

**Example: Using a Google Font**

```javascript theme={null}
const config = {
  theme: {
    styles: {
      'font-body': 'Raleway, sans-serif', // This will load Raleway from Google Fonts
      'font-heading': 'Montserrat, Arial, sans-serif', // Montserrat will also be loaded from Google Fonts
    },
  },
};
```

If you specify a font that is not a system font, Reach will automatically inject the appropriate Google Fonts `<link>` tag for you. You do not need to manually include any font imports.

## Key Style Variables

| Variable               | Description               | Default (Light)                        |
| ---------------------- | ------------------------- | -------------------------------------- |
| background             | Page background           | 0 0% 100%                              |
| foreground             | Main text color           | 225 15% 16%                            |
| card                   | Card background           | 0 0% 100%                              |
| card-foreground        | Card text                 | 225 15% 16%                            |
| popover                | Popover background        | 0 0% 100%                              |
| popover-foreground     | Popover text              | 225 15% 16%                            |
| primary                | Primary accent            | 210 30% 25%                            |
| primary-foreground     | Text on primary           | 0 0% 98%                               |
| secondary              | Secondary accent          | 210 15% 94%                            |
| secondary-foreground   | Text on secondary         | 210 30% 25%                            |
| muted                  | Subdued elements          | 210 10% 96%                            |
| muted-foreground       | Subdued text              | 220 10% 45%                            |
| accent                 | Accent elements           | 210 15% 94%                            |
| accent-foreground      | Text on accent            | 210 30% 25%                            |
| destructive            | Error/delete              | 0 84.2% 60.2%                          |
| destructive-foreground | Text on destructive       | 0 0% 98%                               |
| border                 | Border color              | 220 13% 90%                            |
| input                  | Form inputs               | 220 13% 90%                            |
| ring                   | Focus rings               | 210 30% 25%                            |
| chart-1                | Chart color 1             | 210 50% 50%                            |
| chart-2                | Chart color 2             | 260 50% 55%                            |
| chart-3                | Chart color 3             | 150 50% 45%                            |
| chart-4                | Chart color 4             | 325 50% 55%                            |
| chart-5                | Chart color 5             | 45 80% 55%                             |
| radius                 | Border radius             | 0.625rem                               |
| font-heading           | Font for heading elements | "Plus Jakarta Sans" and system fonts\* |
| font-body              | Font for body elements    | Inter and system fonts\*               |

<Note>
  *System fonts include:*

  * system-ui
  * apple-system
  * BlinkMacSystemFont
  * Segoe UI
  * Roboto
  * sans-serif
</Note>

## Language

Reach supports multiple languages through the `language` configuration option. Currently, we support:

* English (en)
* Spanish (es)

To set the language, simply specify the language code in your configuration:

```javascript theme={null}
const config = {
  // Other configuration...
  language: {
    default: 'en', // Set to Spanish
  },
};
```

If no language is specified, Reach will automatically detect the user's preferred language based on:

1. URL parameters
2. Browser settings
3. Local storage preferences

For language requests or to discuss adding support for additional languages, please contact our support team at `support@embedreach.com`.

## Customizing Verbs in Engage

You can customize the verbs used in the Engage feature by providing a custom `language` configuration.

```javascript theme={null}
const config = {
  // Other configuration...
  language: {
    overrides: {
      engage: {
        en: {
          ...
        },
        es: {
          ...
        },
      },
    },
  },
};
```

This allows you to customize the verbs used in the Engage feature for your specific use case. For example, if you want to use "Contacts" instead of "Users", you can do the following:

```javascript theme={null}
const config = {
  // Other configuration...
  language: {
    overrides: {
      engage: {
        en: {
          user: 'Contacts',
          user_other: 'Contacts', // The plural form of the word
        },
        es: {
          user: 'Contactos',
          user_other: 'Contactos', // The plural form of the word
        },
      },
    },
  },
};
```

The full list of verbs that can be customized in Engage can be found below, we support `en` and `es` for each verb:

```json theme={null}
{
    "user": "User",
    "user_other": "Users",
    "segment": "Segment",
    "segment_other": "Segments",
    "broadcast": "Broadcast",
    "broadcast_other": "Broadcasts",
    "automation": "Automation",
    "automation_other": "Automations",
    "insight": "Insight",
    "insight_other": "Insights",
    "merge_field": "Merge Field",
    "merge_field_other": "Merge Fields",
    "extra_merge_field_name": "Custom Field",
    "extra_merge_field_name_other": "Custom Fields",
    "advanced_merge_field_name": "Advanced Field",
    "advanced_merge_field_name_other": "Advanced Fields"
}
```

## Customizing the Measure Dashboard

You can customize certain strings in the Measure feature by providing language overrides in your configuration:

```javascript theme={null}
const config = {
  // Other configuration...
  language: {
    overrides: {
      measure: {
        en: {
          // The default value for this string is "Transaction ID".
          // The code below will override the string to read "Order ID"
          transaction_table_id_header: 'Order ID',
        },
        es: {
          transaction_table_id_header: 'ID de pedido', // optional Spanish translation
        },
      },
    },
  },
};
```

Currently, the following strings can be customized in Measure:

```json theme={null}
{
    "transaction_table_id_header": "Order ID"
    "transaction_table_created_header": "Order Created"
}
```

For language requests or to discuss adding support for additional languages, please contact our support team at `support@embedreach.com`.

## Hiding or Enabling Features

We currently support hiding and enabling features in the SDK configuration.

```javascript theme={null}
const config = {
  // Other configuration...
  hideFeature: {
    engage: {
      sms: true,
    },
  },
  enableFeature: {
    engage: {
      onboarding: true,
    },
  },
};
```