Translation problem on notification action dropdown in notification center from iframe

RaptorFou · 2025-02-14T15:37:05.087Z

Hi Novu team, i think there is a translation problem in the notification center from iframe i setup the novu.init() with `i18n: this.$store.state.user.lang` wich for my case can only be 'ar' or 'fr' but the action dropdown doesn't translate at all (view screenshot)

P

Pawan Jain•2/16/25, 12:40 PM

@RaptorFou

@novu/notification-center

@novu/notification-center

@novu/notification-center

@novu/notification-center is not actively maintained. I would recommend to create workflows on new dashboard and use @novu/react.

Checkout this doc on how to localize the inbox component
https://docs.novu.co/inbox/react/localization

Novu Cloud Dashboard

Novu

What is Novu? - Novu

Novu

Localizing the Inbox component - Novu

Learn how to localize the pre built Inbox component

R

RaptorFouOP•2/17/25, 11:16 AM

hey @Pawan Jain thanks for the reply, but i think i misexplained myself by omitting some context.
i'm using the notification center via iframe embed in a

Vue 2

Vue 2

Vue 2

Vue 2 project.
in the novu.init() part i set up the

i18n

i18n

i18n

i18n parameter to only be 'ar' or 'fr'
everything in the notification center gets translated except the dropdown shown in the screenshot above
are these translations missing ? if so, do i need to specify the translations for them ?

Novu

Iframe Embed - Novu

P

Pawan Jain•2/20/25, 10:02 PM

@RaptorFou

here is the example code to create custom translation values

novu.init(
  applicationId,
  {
    unseenBadgeSelector: "#unseen-badge",
    bellSelector: "#notification-bell",
    colorScheme: "dark",
    position: {
      top: "50px",
      left: `${left}px`,
    },
    showUserPreferences: true,
  
    i18n: {
      lang: "ar",
      translations: {
        poweredBy: "powered by custom",
        markAllAsRead: "maekAllAsRead custom",
        notifications: "notifications custom",
        settings: "settings custom",
        removeMessage: "remove message custom",
        markAsRead: "mark as read custom",
        markAsUnRead: "mark as unread custom",
        noNewNotification: "no new notifications custom",
      },
    },
  },
  {
    subscriberId: subscriberId,
    firstName: "pawan",
    lastName: "jain",
  }
);

novu.init(
  applicationId,
  {
    unseenBadgeSelector: "#unseen-badge",
    bellSelector: "#notification-bell",
    colorScheme: "dark",
    position: {
      top: "50px",
      left: `${left}px`,
    },
    showUserPreferences: true,
  
    i18n: {
      lang: "ar",
      translations: {
        poweredBy: "powered by custom",
        markAllAsRead: "maekAllAsRead custom",
        notifications: "notifications custom",
        settings: "settings custom",
        removeMessage: "remove message custom",
        markAsRead: "mark as read custom",
        markAsUnRead: "mark as unread custom",
        noNewNotification: "no new notifications custom",
      },
    },
  },
  {
    subscriberId: subscriberId,
    firstName: "pawan",
    lastName: "jain",
  }
);

novu.init(
  applicationId,
  {
    unseenBadgeSelector: "#unseen-badge",
    bellSelector: "#notification-bell",
    colorScheme: "dark",
    position: {
      top: "50px",
      left: `${left}px`,
    },
    showUserPreferences: true,
  
    i18n: {
      lang: "ar",
      translations: {
        poweredBy: "powered by custom",
        markAllAsRead: "maekAllAsRead custom",
        notifications: "notifications custom",
        settings: "settings custom",
        removeMessage: "remove message custom",
        markAsRead: "mark as read custom",
        markAsUnRead: "mark as unread custom",
        noNewNotification: "no new notifications custom",
      },
    },
  },
  {
    subscriberId: subscriberId,
    firstName: "pawan",
    lastName: "jain",
  }
);

novu.init(
  applicationId,
  {
    unseenBadgeSelector: "#unseen-badge",
    bellSelector: "#notification-bell",
    colorScheme: "dark",
    position: {
      top: "50px",
      left: `${left}px`,
    },
    showUserPreferences: true,
  
    i18n: {
      lang: "ar",
      translations: {
        poweredBy: "powered by custom",
        markAllAsRead: "maekAllAsRead custom",
        notifications: "notifications custom",
        settings: "settings custom",
        removeMessage: "remove message custom",
        markAsRead: "mark as read custom",
        markAsUnRead: "mark as unread custom",
        noNewNotification: "no new notifications custom",
      },
    },
  },
  {
    subscriberId: subscriberId,
    firstName: "pawan",
    lastName: "jain",
  }
);

P

Pawan Jain•2/24/25, 7:30 AM

@RaptorFou

Did you get chance to try above code to change translations?

R

RaptorFouOP•2/25/25, 9:22 AM

@Pawan Jain, i haven’t had the chance to test it yet, i'll update you once i do

R

RaptorFouOP•2/27/25, 1:28 PM

@Pawan Jain i just tested it, seems to work perfectly fine
Just a little suggestion about the documentation https://v0.x-docs.novu.co/notification-center/client/react/customization#customize-the-ui-language, it would be helpful if the i18n translation object section included a complete list of variables that can be modified, like you did in your example above

Novu

Customizing Notification Center - Novu

Learn how to customize the pre built notification center component partially or building your own notification center component from scratch using Novu provided hooks

N

Novu_Bot•2/27/25, 1:28 PM

@RaptorFou, you just advanced to level 1!

P

Pawan JainAPP•2/27/25, 1:36 PM

Sure Raptor

Translation problem on notification action dropdown in notification center from iframe

Similar Threads

Similar Threads

Similar Threads