Translate Public Page Content with Custom JavaScript

Public Signup Pages and Self-Service Pages are only offered in English. If you need to support subscribers in another language, translate the page yourself by writing custom JavaScript that finds the English text on the page and replaces it with your own translation. Add this script to your Custom JavaScript, either site-wide or on an individual page.

This applies to Public Signup Pages and Self-Service Pages. Receipt Pages use a different layout that doesn't support this mechanism.

Translate JavaScript-generated content

Some content is added to the page by JavaScript after it loads, so a script that only replaces static page text never reaches it. Examples include:

• The alert that appears when the Terms and Conditions checkbox isn't checked
• The submit button label that changes when a subscriber clicks it (for example, from "Place My Order" to "Processing...")

Add translations for this content to your Custom JavaScript by extending chargifyHostedPageDictionary:

$.extend(chargifyHostedPageDictionary, {
  // The alert pop-up when agreement to terms is required but not checked:
  'alert.must-agree-to-terms':         'You must agree to the Terms and Conditions',
 
  // The default value for the Billing/Shipping State selector after choosing a new country:
  'form.address-state.blank-label':    'Please select',
 
  // The submit button label before and after it's clicked:
  'form.submit-button.enabled-label':  'Place My Order',
  'form.submit-button.disabled-label': 'Processing...'
});

Shown above is the default English dictionary. To translate the content into another language, replace each value. For example, to translate into Spanish:

$.extend(chargifyHostedPageDictionary, {
  'alert.must-agree-to-terms':         'Debes aceptar los Términos y Condiciones',
  'form.address-state.blank-label':    'Selecciona una opción',
  'form.submit-button.enabled-label':  'Realizar pedido',
  'form.submit-button.disabled-label': 'Procesando...'
});

Related information

See Scope Custom JavaScript to a Specific Page if you only want your translations to apply to one page instead of every page.

See Configuring Public Page Default Settings for where to add your Custom JavaScript site-wide.