Novu•3w 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•3w 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•3w 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.

Sources [1] Introduction to Notification Center

Ask Inkeep•3w ago

Got it. Tagging @Support for additional help.

David 😎•3w ago

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

David 😎•3w 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 😎•3w ago

A snapshot of the workflow

Pawan Jain•3w ago

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

David 😎•3w 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•3w 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•3w 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 😎•3w ago

oh! Okay, let me try it now.

Pawan Jain•3w ago

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

Pawan Jain•3w ago

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

David 😎•3w ago

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

Pawan Jain•3w 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 😎•3w ago

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

Pawan Jain•3w ago

Yes you should remove it

David 😎•3w ago

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

Pawan Jain•3w ago

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

David 😎•3w 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•3w ago

Yes. I am on it

Pawan Jain•3w 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 😎•3w 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