Buggy UI
The options are getting a little weird here. Also when we will be on prod env, can we hide the novu logo foom the bottom ?
10 Replies
Hi @ManwinderSingh, I'm an AI assistant for Novu. While a team member reviews this question, I'll look through relevant sources and see if I can provide suggestions. Please tag @Ask Inkeep with any follow-up questions.
-----------------------------
While I generate an answer, here are some sources that might be helpful:
* How to use Novu to send notifications to a channel in a Discord server
* Topics
* Subscriber Preference
* Windows
-----------------------------
Answer
Yes, you can customize the appearance of Novu components, including hiding the Novu logo, by adjusting properties like
showUserPreferences in the PopoverNotificationCenter component as mentioned in the documentation (1) . This provides flexibility in how you present notification elements to users. For specific changes related to environment settings, such as production (prod env), and further customization options, the documentation or platform settings would be the best place to explore available configurations.
If your query is specifically about removing branding or logos not addressed directly in the documentation, it's advisable to check the official Novu documentation or reach out to Novu support for the most accurate and detailed guidance tailored to your use case.Need help here urgently @Pawan Jain
@ManwinderSingh looking at this
What's the
popoverConfig value?<div>
<notification-center-component
style="display: inline-flex; padding-right: 20px;"
show-user-preferences = "false"
application-identifier="key"
subscriber-id="<%= @current_user.id %>">
</notification-center-component>
</div>
let nc = document.getElementsByTagName("notification-center-component")[0];
nc.showUserPreferences = false;
nc.colorScheme = "light";
nc.stores = [
{ storeId: "default_store" },
{ storeId: "Product", query: { feedIdentifier: "Product" } },
];
nc.tabs = [
{ name: "All", storeId: "default_store" },
{ name: "Product", storeId: "Product" },
];
nc.popoverConfig = { offset: 0, position: "bottom" };
nc.onNotificationClick = (message) => {};
nc.onTabClick = (event) => {};
nc.onActionClick = (templateIdentifier, type, notification) => {};
nc.onLoad = () => {}
const styles = {
popover: {
dropdown: {
zIndex: "1000000 !important",
},
},
footer: {
root: {
display: 'none'
}
}
}
nc.styles = styles;
@ManwinderSingh could you trigger few more notifications.
I tried to reproduce this, but could not reproduce this issue
This happens with only one notification
@ManwinderSingh unfortunately, I am not able to reproduce this.
Do you have some external CSS applied to widget or parent component of widget?
is widget in the bottom position of web page?
Its on top right
@Pawan Jain Any uopdate here?
DMed you