Prompt Localization

Set the prompt languages, based on a users preference.

You can programmatically change the language of Web Push prompts, by detecting the user's browser language and Initialize OneSignal with different text(s).

An example using the Slide Prompt can be seen below, however you can use the same approach and apply this to any of the Web Prompts.

var OneSignal = window.OneSignal || [];

var translations = {
  // French
  fr: {
    actionMessage: 'Abonnez-vous à nos notifications pour les dernières nouvelles et mises à jour. Vous pouvez désactiver à tout moment.',
    acceptButton: "S'abonner",
    cancelButton: 'Non merci',
  },
  // Spanish
  es: {
    actionMessage: 'Suscríbete a nuestras notificaciones para recibir las últimas noticias y actualizaciones. Puedes desactivarlo en cualquier momento.',
    acceptButton: 'Suscribir',
    cancelButton: 'No, gracias',
  },
  // Default. Used if Browser preferred language does not match any of the above.
  default: {
    actionMessage: 'Subscribe to our notifications for the latest news and updates. You can disable anytime.',
    acceptButton: 'Subscribe',
    cancelButton: 'No thanks',
  },
};


/*
The below checks the Browser's preferred language, and sets promptLangs properties.
If there is no match, it will use the default.
Examples of valid language codes include "en", "en-US", "fr", "fr-FR", "es-ES", etc.
Safari on iOS prior to 10.2, the country code returned is lowercase: "en-us", "fr-fr",
We have used .toLowerCase() to combat this.
*/
var language = navigator.language.toLowerCase();
var translation = translations[language] || translations.default;
var promptLangs = { ...translation };

OneSignal.push(function () {
  OneSignal.init({
    appId: 'YOUR_APP_ID',
    promptOptions: {
      slidedown: {
        prompts: [
          {
            type: 'push',
            autoPrompt: true,
            text: { ...promptLangs },
          },
        ],
      },
    },
  });
});

Updated 2 months ago