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
Hi there @margiebed
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!