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?

Hey there @margiebed,

Wanted to update you now that we published an update for better label support.

There is a labels property that you can pass into the component:

window.courierConfig = {
components: {
inbox: {
labels: JSON.stringify({ backToInbox: “Back It Up”}),
},
},
};

Use stringify() only if you put the labels “inline” in the html.

Example without stringify():

window.courierConfig = {
clientKey: “CLIENT_KEY”,
userId: “USER_ID”,

    components: {
      inbox: {
        labels: {
          emptyState: "EMPTY",
        },
        openLinksInNewTab: false,
      },
    },
  };

Let me know how this goes!

Thank for your advice, unfortunately, it does not work (use stringify()). With emptyState: “EMPTY”,
it works but only this description


I do no idea why backToInbox: Back to Inbox -change,