# Notifications
Toast notifications triggered from Django view.
## Properties: Dpg notification parts
- Custom JS: ./static/js/notifications.js
```js
document.addEventListener('alpine:init', () => {
Alpine.data('notifications', () => ({
notifications: [],
displayDuration: 8000,
addNotification({ variant = 'info', sender = null, title = null, message = null }) {
const id = Date.now();
const notification = { id, variant, sender, title, message };
if (this.notifications.length >= 20) {
this.notifications.splice(0, this.notifications.length - 19);
}
this.notifications.push(notification);
},
removeNotification(id) {
setTimeout(() => {
this.notifications = this.notifications.filter(n => n.id !== id);
}, 400);
}
}));
});
```
- `./templates/cotton/fancy/notifications.html`:
```html
```
- view helper function:
```python
def _toast(response, message, variant="success", title="Notification", extra_triggers=None):
trigger_data = {
"notify": {
"variant": variant,
"title": title,
"message": message
}
}
if extra_triggers:
trigger_data.update(extra_triggers)
response['HX-Trigger'] = json.dumps(trigger_data)
return response
```
## Workflow: Adding Dpg notification
1. Make sure Dpg notification parts are in place.
2. Add `` to beginning of ``.
3. From view, return custom `response`, modified by `_toast`:
```python
response = HttpResponse('')
response = _toast(response, 'Book added!', title='Success')
return response
```