Customize template inbox

Is there any chance to rename the fields in Inbox? I was able to change only the title, but the other fields do not change. I am using angular and my code is as follows

Screen Shot 2022-06-24 at 11.59.39 AM

Hi there @margiebed :wave:

Thanks for reaching out, and for waiting!

Are you using embedded integration with your Angular build?

Courier Inbox supports customizing your Inbox through props, but if you’re using Angular with embedded integration, you can configure components in your embedded integration in two different ways - inline HTML attributes, and through window.courierConfig.

Thanks again for reaching out!

Hi Rodrigo,
Thank you for your answer.

I use simple embedded integration with Angular. My component looks like this:

<courier-inbox #courierInbox></courier-inbox>
<courier-toast *ngIf="showCourierToast" ></courier-toast>

And settings are:

userState$
  .pipe(
    // should see about turning off courier if the user signs out
    withLatestFrom(
      this.store.pipe(select(selectUserHasPermission(UserPermission.CourierNotificationsInApp))),
    ),
    filter(([user, hasPermission]) => user.id && hasPermission && !window.courier),
    take(1),
    map(([user, _]) => {
      const clientKey = this.environment.getCourierKey();
      return {
        clientKey,
        userId: user.id,
      };
    }),
    tap((config) => {
      if (!config || !config.clientKey || !config.userId) {
        return;
      }
      window.courierConfig = config;

      // when courier adds an update for only loading this script once we can enable this and remove it from the courier wrapper component
      this.loadCourier()
        .then(() => {
          this.trackingService.track(EventName.CourierInitializationSuccess);
        })
        .catch(() => {
          this.trackingService.track(EventName.CourierInitializationFailed);
        });
    }),
  )
  .subscribe();

But I do not where exactly I should use props. When I add in this place
return {

  clientKey,
  userId: user.id,
  components: {
    inbox: {
      title: 'Inbox2 change', //This works fine
      labels: {
        backToInbox: 'backToInbox2',  //does not work
        markAsRead: 'markAsRead2', //does not work
        markAllAsRead: 'markAllAsRead2', //does not work
        markAsUnread: 'markAsUnread2', //does not work
      },
but only title is change. I doubt if I do this well, and I do not idea why other text are not displayed chenged. What I do wrong?
I hope there is some way that I could change this text.  (I am still at the beginning of my journey with programming, so please be understanding)
Thanks,
margie


Hello, any news to resolve my problem? or it is not possible to change the text in Inbox in angular?