N
Novu•3w ago
RaptorFou

Translation problem on notification action dropdown in notification center from iframe

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)
No description
7 Replies
Pawan Jain
Pawan Jain•3w ago
@RaptorFou @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 Cloud Dashboard
Novu
What is Novu? - Novu
Novu
Localizing the Inbox component - Novu
Learn how to localize the pre built Inbox component
RaptorFou
RaptorFouOP•3w ago
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 project. in the novu.init() part i set up the 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
Pawan Jain
Pawan Jain•2w ago
@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",
  }
);
@RaptorFou Did you get chance to try above code to change translations?
RaptorFou
RaptorFouOP•7d ago
@Pawan Jain, i haven’t had the chance to test it yet, i'll update you once i do
RaptorFou
RaptorFouOP•5d ago
@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
Novu_Bot
Novu_Bot•5d ago
@RaptorFou, you just advanced to level 1!
Pawan Jain
Pawan Jain•5d ago
Sure Raptor 🙌🏻

Did you find this page helpful?