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.

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

We only support the default tailwind background color classes (bg--). 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.

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

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*

System fonts include:

• system-ui
• apple-system
• BlinkMacSystemFont
• Segoe UI
• Roboto
• sans-serif

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:

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 [e-mail].

Customizing Verbs in Engage

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

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:

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:

{
    "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:

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:

{
    "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 [e-mail].

Hiding or Enabling Features

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

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