Integration Pages i18n Guide

This guide explains how to properly implement internationalization (i18n) for integration pages in the NexvioAI website.

Overview

All integration pages should use the i18n translation system to support multiple languages. The translations are stored in JSON files under /src/i18n/ directory.

Key Functions

getCurrentLanguage(pathname)

Extracts the current language from the URL path.

const currentLang = getCurrentLanguage(Astro.url.pathname);

t(key, language)

Gets a translated string using dot notation.

const title = t('integrations.slack.pageTitle', currentLang);

getLocalizedUrl(path, currentPath)

Generates a URL with the correct language prefix.

const contactUrl = getLocalizedUrl('/contact', Astro.url.pathname);

Integration Index Page

The main integrations page (/src/pages/integrations/index.astro) uses translations for:

• Page metadata (title, description)
• Hero section content
• Feature lists
• Agent cards
• Data source integrations
• Chat platform integrations
• FAQ section
• CTA sections

Example Usage:

// Get current language
const currentLang = getCurrentLanguage(Astro.url.pathname);

// Use translations
const seoTitle = t('integrations.index.pageTitle', currentLang);
const heroTitle = t('integrations.index.heroTitle', currentLang);

Individual Integration Pages

Each integration page should follow the template structure and use translations for all text content.

Required Translation Keys

For each integration (e.g., ‘slack’), you need these translation keys:

"integrations": {
  "slack": {
    "pageTitle": "Slack Integration - NexvioAI",
    "heroTitle": "Bring AI-Powered Support to Your Slack Workspace",
    "heroDescription": "Deploy NexvioAI in your Slack channels...",
    "getStarted": "Get Started",
    "scheduleDemo": "Book a Demo",
    "featuresTitle": "Powerful Features for Your Slack Integration",
    "features": {
      "feature1Title": "AI-Powered Responses",
      "feature1Desc": "Get instant answers powered by AI",
      // ... more features
    },
    "benefits": {
      "benefit1Title": "Instant Support",
      "benefit1Desc": "No more waiting for responses",
      // ... more benefits
    },
    "howItWorks": {
      "title": "How It Works",
      "step1Title": "Connect Your Workspace",
      "step1Desc": "Authorize NexvioAI to access your Slack",
      // ... more steps
    },
    "ctaTitle": "Ready to transform your Slack support?",
    "ctaDescription": "Get started today and see the difference"
  }
}

Adding a New Integration Page

1. Copy the template:

   cp src/pages/integrations/_template.astro src/pages/integrations/zendesk.astro

2. Update the integration key:

   const integrationKey = 'zendesk'; // Change this to your integration

3. Add translations to all language files (en.json, es.json, fr.json, de.json):

   "zendesk": {
     "pageTitle": "Zendesk Integration - NexvioAI",
     "heroTitle": "Supercharge Your Zendesk with AI",
     // ... all required translations
   }

4. Customize the page with integration-specific content, features, and benefits.

Best Practices

1. Always use translations - Never hardcode text directly in the template
2. Check all languages - Ensure translations exist for all supported languages
3. Use semantic keys - Make translation keys descriptive and hierarchical
4. Maintain consistency - Use similar key structures across all integrations
5. Test language switching - Verify the page works correctly in all languages

Language URL Structure

• English (default): /integrations/slack
• Spanish: /es/integrations/slack
• French: /fr/integrations/slack
• German: /de/integrations/slack

Common Translation Keys

These keys are available for all pages:

// Common buttons and CTAs
t('common.getStarted', currentLang)
t('common.scheduleDemo', currentLang)
t('common.learnMore', currentLang)
t('common.contactUs', currentLang)

// Integration-specific common texts
t('integrations.subtitle', currentLang)
t('integrations.languages', currentLang)
t('integrations.resolution', currentLang)

Troubleshooting

1. Missing translation: If a translation key returns the key itself, the translation is missing
2. Language detection: Ensure the URL includes the language code for non-English pages
3. Special characters: Use proper encoding for special characters in translations

Example Integration Implementation

See /src/pages/integrations/slack-example.astro for a complete example of how to implement an integration page with proper i18n support.