N
Novuβ€’2mo ago
David 😎

Avatar not showing in notification center when triggering in-app messages

Hi everyone, The subscriber's avatar is not showing in the notification center, even after creating a subscriber with the user's image and also passing it when triggering the notification.
24 Replies
Ask Inkeep
Ask Inkeepβ€’2mo ago
Hi @David 😎, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * Introduction to Notification Center * Vue * RedwoodJS * How to use Headless Notification Center -----------------------------
Ask Inkeep
Ask Inkeepβ€’2mo ago
Answer To address the issue of the subscriber's avatar not appearing in the notification center when triggering in-app messages, it's important to ensure that the avatar URL is correctly included in the payload when triggering the notification. According to the Novu documentation, you should include the avatar parameter within the payload when triggering a notification using the backend SDK methods (1) . Here is an example code snippet for triggering a notification with the avatar included:
const novu = new Novu('YOUR_NOVU_API_KEY');

await novu.trigger('<workflow-trigger-id>', {
to: {
subscriberId: 'YOUR_SUBSCRIBER_ID',
email: 'user@example.com',
},
payload: {
name: 'John Doe',
avatar: 'https://example.com/path-to-avatar.jpg',
},
});
const novu = new Novu('YOUR_NOVU_API_KEY');

await novu.trigger('<workflow-trigger-id>', {
to: {
subscriberId: 'YOUR_SUBSCRIBER_ID',
email: 'user@example.com',
},
payload: {
name: 'John Doe',
avatar: 'https://example.com/path-to-avatar.jpg',
},
});
Ensure that the avatar URL is publicly accessible and correctly formatted. If the issue persists, it might be worthwhile to check the console for any errors or warnings that might indicate what is going wrong.
Ask Inkeep
Ask Inkeepβ€’2mo ago
Got it. Tagging @Support for additional help.
David 😎
David πŸ˜Žβ€’2mo ago
My Novu trigger:
const image= "https://lh3.googleusercontent.com/a/ACg8ocI_vJjIPVVwyKYladEfOpzRVz0-4CKrEjwcU1iur6onyEmzFjU=s96-c"


await novu.trigger("inapp", {
to: {
subscriberId: subscriberID,
avatar: image,
},
payload: {
content: `${name} reacted to your post`,
avatar: image,
},
});
const image= "https://lh3.googleusercontent.com/a/ACg8ocI_vJjIPVVwyKYladEfOpzRVz0-4CKrEjwcU1iur6onyEmzFjU=s96-c"


await novu.trigger("inapp", {
to: {
subscriberId: subscriberID,
avatar: image,
},
payload: {
content: `${name} reacted to your post`,
avatar: image,
},
});
David 😎
David πŸ˜Žβ€’2mo ago
A snapshot of the workflow
No description
Pawan Jain
Pawan Jainβ€’2mo ago
@David 😎 here avatar will be of actor not of subscriber (to which notification is triggered)
David 😎
David πŸ˜Žβ€’2mo ago
Okay, so how do I pass it? As a payload with an attribute name of "actor"? I need to send the unique image URL during every trigger
Pawan Jain
Pawan Jainβ€’2mo ago
let's suppose there are two subscribers
{
"firstName": "John",
"lastName": "Doe",
"subscriberId": "subscriberId_1",
"email": "john.doe@org.com",
"phone": "+98712345670"
"avatar": "https://image.com/AVATAR_URL_subscriber_1",
}
{
"firstName": "John",
"lastName": "Doe",
"subscriberId": "subscriberId_1",
"email": "john.doe@org.com",
"phone": "+98712345670"
"avatar": "https://image.com/AVATAR_URL_subscriber_1",
}
{
"firstName": "Pawan",
"lastName": "Jain",
"subscriberId": "subscriberId_2",
"email": "pawan@org.com",
"phone": "+98712345670"
"avatar": "https://image.com/AVATAR_URL_subscriber_2",
}
{
"firstName": "Pawan",
"lastName": "Jain",
"subscriberId": "subscriberId_2",
"email": "pawan@org.com",
"phone": "+98712345670"
"avatar": "https://image.com/AVATAR_URL_subscriber_2",
}
and you selected this option πŸ‘‡πŸ»
Pawan Jain
Pawan Jainβ€’2mo ago
No description
Pawan Jain
Pawan Jainβ€’2mo ago
once you trigger the workflow to subscriberId_1, you need to send the actor also
await novu.trigger('<WORKFLOW_TRIGGER_IDENTIFIER>', {
to: {
subscriberId: 'subscriberId_1',
},
payload: {
"key": "value"
},
actor: "subscriberId_2"
});
await novu.trigger('<WORKFLOW_TRIGGER_IDENTIFIER>', {
to: {
subscriberId: 'subscriberId_1',
},
payload: {
"key": "value"
},
actor: "subscriberId_2"
});
novu will use subscriberId_2 avatar url https://image.com/AVATAR_URL_subscriber_2
David 😎
David πŸ˜Žβ€’2mo ago
oh! Okay, let me try it now.
Pawan Jain
Pawan Jainβ€’2mo ago
in this field you can save absolute url of image. here variables are not supported as of now.
No description
Pawan Jain
Pawan Jainβ€’2mo ago
third option is to use system icons let me know if you face any issue
David 😎
David πŸ˜Žβ€’2mo ago
@Pawan Jain it's still the same only the default image is showing:
No description
Pawan Jain
Pawan Jainβ€’2mo ago
@David 😎 Fun fact is we don't have default image as Novu icon. Default image is avatar icon in third notification this novu icon is either coming from actor avatar url or you have entered this image url in avatar url field
David 😎
David πŸ˜Žβ€’2mo ago
I actually, entered the URL into the field as a default: Should I remove it and leave it empty.
No description
Pawan Jain
Pawan Jainβ€’2mo ago
Yes you should remove it
David 😎
David πŸ˜Žβ€’2mo ago
Wow! It's now working. Thanks! I guess the important part is that actor property when sending avatars.
Pawan Jain
Pawan Jainβ€’2mo ago
Glad it worked Let me know If I can help with anything else πŸ™‚
David 😎
David πŸ˜Žβ€’2mo ago
Will do! working on another project using Novu also - hopefully I don't encounter issues. 😁 If possible, the documentation can also be updated to show this instruction.
Pawan Jain
Pawan Jainβ€’2mo ago
Yes. I am on it
Pawan Jain
Pawan Jainβ€’2mo ago
@David 😎 This information is now available on docs https://docs.novu.co/notification-center/client/react/get-started#avatar-icons
Novu
React Get Started - Novu
Learn how to add novu powered In-App notification center to your React app
David 😎
David πŸ˜Žβ€’2mo ago
Awesome, I've another issue with headless Novu. Let me create a new post
Want results from more Discord servers?
Add your server
More Posts