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: 'bg-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% 100%
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% 100%
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, specify the language code in your configuration:

const config = {
  // Other configuration...
  language: {
    default: 'es', // Set to Spanish
  },
};

If no language is specified, Reach detects the user’s preferred language in this order:

1. The lang URL parameter on your page (for example, ?lang=es)
2. The language previously saved in local storage
3. The browser’s language setting

For language requests or to discuss adding support for additional languages, please contact our support team at [e-mail].

Customizing Copy

You can replace specific words and strings in the Reach interface with language.overrides. Overrides are set per feature and per language, and we support en and es for every key. Any key you leave out keeps its default.

Copy overrides are currently available for Engage, Measure, and Reputation.

const config = {
  // Other configuration...
  language: {
    overrides: {
      engage: {
        en: {
          ...
        },
        es: {
          ...
        },
      },
      measure: {
        en: {
          ...
        },
        es: {
          ...
        },
      },
      reputation: {
        en: {
          ...
        },
        es: {
          ...
        },
      },
    },
  },
};

Engage terminology

You can rename the core terms used throughout Engage to fit your product. For example, to use “Contacts” instead of “Users”:

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

Each term has a singular key and a plural _other key. Set both together: overriding only one of the pair is not supported.

The full list of Engage terms and their English defaults:

{
  "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 Fields",
  "advanced_merge_field_name_other": "Advanced Fields"
}

Engage onboarding screen

When Engage onboarding is enabled (see Hiding or Enabling Features), businesses that haven’t set up Engage see an introductory screen. You can replace its copy with the ftue keys:

const config = {
  // Other configuration...
  language: {
    overrides: {
      engage: {
        en: {
          ftue: {
            title: 'Automated marketing, built for your shop',
            button: 'Start setup',
          },
        },
      },
    },
  },
};

The full list of onboarding keys and their English defaults:

Key	Default
ftue.eyebrow	Set up email and SMS automations to drive repeat revenue
ftue.eyebrow_email_only	Set up email automations to drive repeat revenue
ftue.title	Your best marketing campaigns, ready on day one
ftue.description	Set up industry-proven email and SMS automations once and let them run. AI writes every message in your brand’s voice and sends it at the right moment, turning first-time customers into loyal repeat buyers without the manual work.
ftue.description_email_only	Set up industry-proven email automations once and let them run. AI writes every message in your brand’s voice and sends it at the right moment, turning first-time customers into loyal repeat buyers without the manual work.
ftue.button	Get started
ftue.image_alt	Email delivery confirmation illustration

The _email_only variants are shown instead of eyebrow and description when SMS is hidden.

Engage AI bar

When the AI automation builder is turned on, the automations and broadcasts lists show a prompt bar that opens the builder with whatever the user types. You can replace its heading and the line next to it with the ai_bar keys:

const config = {
  // Other configuration...
  language: {
    overrides: {
      engage: {
        en: {
          ai_bar: {
            headline: 'What should we send your clients next?',
          },
        },
      },
    },
  },
};

The full list of AI bar keys and their English defaults:

Key	Default
ai_bar.headline	What should we send next?
ai_bar.description	Describe it in plain words and the assistant sets it up.

Measure dashboard

You can rename the column headers in the Measure transactions table. For example, to show “Order ID” instead of “Purchase”:

const config = {
  // Other configuration...
  language: {
    overrides: {
      measure: {
        en: {
          transaction_table_id_header: 'Order ID',
        },
        es: {
          transaction_table_id_header: 'ID de pedido', // optional Spanish translation
        },
      },
    },
  },
};

Partner overrides take precedence whether or not transaction purchase names are mapped.

The full list of Measure strings and their English defaults:

{
  "transaction_table_id_header": "Purchase",
  "transaction_table_created_header": "Transaction Created"
}

Reputation headings

You can rename the headings and labels Reputation shows while a business sets it up and changes its settings. For example, to call the feature “Review Agent”:

const config = {
  // Other configuration...
  language: {
    overrides: {
      reputation: {
        en: {
          onboarding: {
            title: 'Set up Review Agent',
          },
          settings: {
            title: 'Update Review Agent Settings',
            open_label: 'Review Agent settings',
          },
        },
        es: {
          onboarding: {
            title: 'Configurar Agente de Reseñas',
          },
          settings: {
            title: 'Actualizar la configuración del Agente de Reseñas',
            open_label: 'Configuración del Agente de Reseñas',
          },
        },
      },
    },
  },
};

The full list of Reputation keys and their English defaults:

Key	Default
onboarding.title	Set up Reputation
onboarding.description	Choose your approach, connect Google Business Profile, configure how requests go out, and review before activating.
onboarding.not_set_up	Reputation has not been set up. Please contact your admin.
settings.title	Update Reputation Settings
settings.description	Update your reputation management settings. Select Save Changes to apply your updates.
settings.open_label	Reputation settings
setup.initial_setup.title	Turn Happy Customers Into Your Best Marketing Asset
setup.initial_setup.description	Our AI-powered reputation management system captures private direct feedback and offers every customer the chance to review you publicly—building trust that drives loyalty, repeat visits, and organic growth.
setup.initial_setup.button	Setup now
setup.how_it_works.title	How It Works

settings.open_label is the accessible name of the settings button on the Reputation dashboard. Screen readers announce it; it is not shown on screen.

The wording that describes how review requests treat your customers, such as the approach choices in setup and the Google Business Profile connection notes, can’t be overridden.

To request additional customizable copy, please contact our support team at [e-mail].

Hiding or Enabling Features

You can hide or enable parts of Engage in the SDK configuration.

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

Option	Behavior
hideFeature.engage.sms	Hides SMS, so businesses can only send email.
hideFeature.engage.sales	Hides sales and revenue metrics in Engage statistics and automation lists.
enableFeature.engage.onboarding	Shows the Engage onboarding screen to businesses that haven’t completed Engage setup.

You can also hide SMS or sales by adding ?hideSms=true or ?hideSales=true to your page URL. URL parameters can only hide these features, not re-enable them.

Skipping the Feature Explainer

Every feature opens on an explainer landing page that introduces it before any setup begins. If your product already explains the feature, set explainer to skip and the business drops straight into the onboarding wizard instead.

const config = {
  // Other configuration...
  explainer: 'skip',
};

Value	Behavior
show (default)	The feature opens on its explainer landing page.
skip	The feature opens with the onboarding wizard already open.

The setting applies to every feature, and the explainer stays reachable: dismissing the wizard reveals it, so a business that wants the introduction can still read it. Unrecognized values log a warning and fall back to show.

This does not change which businesses see onboarding at all. A business that has already completed setup still lands on its dashboard.