Novu•5mo ago

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•5mo 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•5mo 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: '[email protected]',
  },
  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: '[email protected]',
  },
  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.

Sources [1] Introduction to Notification Center

Ask Inkeep•5mo ago

Got it. Tagging @Support for additional help.

David 😎•5mo ago

It's not still working, here is my image URL: https://lh3.googleusercontent.com/a/ACg8ocI_vJjIPVVwyKYladEfOpzRVz0-4CKrEjwcU1iur6onyEmzFjU=s96-c

David 😎•5mo 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 😎•5mo ago

A snapshot of the workflow

Pawan Jain•5mo ago

@David 😎 here avatar will be of actor not of subscriber (to which notification is triggered)

David 😎•5mo 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•5mo ago

let's suppose there are two subscribers

{
  "firstName": "John",
  "lastName": "Doe",
  "subscriberId": "subscriberId_1",
  "email": "[email protected]",
  "phone": "+98712345670"
  "avatar": "https://image.com/AVATAR_URL_subscriber_1",
}

{
  "firstName": "John",
  "lastName": "Doe",
  "subscriberId": "subscriberId_1",
  "email": "[email protected]",
  "phone": "+98712345670"
  "avatar": "https://image.com/AVATAR_URL_subscriber_1",
}

{
  "firstName": "Pawan",
  "lastName": "Jain",
  "subscriberId": "subscriberId_2",
  "email": "[email protected]",
  "phone": "+98712345670"
  "avatar": "https://image.com/AVATAR_URL_subscriber_2",
}

{
  "firstName": "Pawan",
  "lastName": "Jain",
  "subscriberId": "subscriberId_2",
  "email": "[email protected]",
  "phone": "+98712345670"
  "avatar": "https://image.com/AVATAR_URL_subscriber_2",
}

and you selected this option 👇🏻

Pawan Jain•5mo 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 😎•5mo ago

oh! Okay, let me try it now.

Pawan Jain•5mo ago

in this field you can save absolute url of image. here variables are not supported as of now.

Pawan Jain•5mo ago

third option is to use system icons let me know if you face any issue

David 😎•5mo ago

@Pawan Jain it's still the same only the default image is showing:

Pawan Jain•5mo 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 😎•5mo ago

I actually, entered the URL into the field as a default: Should I remove it and leave it empty.

Pawan Jain•5mo ago

Yes you should remove it

David 😎•5mo ago

Wow! It's now working. Thanks! I guess the important part is that actor property when sending avatars.

Pawan Jain•5mo ago

Glad it worked Let me know If I can help with anything else 🙂

David 😎•5mo 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•5mo ago

Yes. I am on it

Pawan Jain•5mo 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 😎•5mo ago

Awesome, I've another issue with headless Novu. Let me create a new post

Gaming

Programming

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