Skip to content

Document the live preview in the web Notification editor #932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
promptless-for-oss wants to merge 4 commits into
base: 7.2
Choose a base branch
from
Open

Document the live preview in the web Notification editor #932

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
28b86af
Document live preview in the web Notification editor
promptless[bot] Sep 1, 2026
29c13ea
Address review: wrap Notification heading in Vale off/on and add blan…
Sep 1, 2026
7366965
Merge branch '7.2' into promptless/pr-16928-notification-live-preview
adiati98 Sep 5, 2026
3eff07d
Merge branch '7.2' into promptless/pr-16928-notification-live-preview
adiati98 Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/channels/web_notifications.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,17 @@ Configuration
#. Get the keys from OneSignal under the Settings > Keys & IDs tab.
#. Enable the features you wish to use - for example, whether to enable notifications on mobile apps, Landing Pages, tracked resources on your website, and whether to show a welcome notification after they subscribe. You can also specify a subdomain name, and if you're using iOS and Android notifications you can also enable these options - see :doc:`/channels/push_notifications`.

.. vale off

Editing a Notification
======================
Comment thread
adiati98 marked this conversation as resolved.

.. vale on

When you open or create a Notification under Web Notifications, the editor shows a live preview panel beside the **Heading**, **Message**, and **Action Button Text** fields. As you enter text in them, Mautic updates the matching elements in the preview, so you can see how the Notification looks without saving and reopening it.

@promptless-for-oss promptless-for-oss Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mautic.activatePreviewPanelUpdate() binds an input handler to the heading/message/button fields and writes each typed value into the matching preview element live, confirming the live-update behavior described.

Source: https://github.com/mautic/mautic/blob/c7cc81c3a967c6dc5fc69e37eef265d11d5297ef/app/bundles/NotificationBundle/Assets/js/notification.js#L62-L86

@promptless-for-oss promptless-for-oss Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Form field labels: mautic.notification.form.heading="Heading", mautic.notification.form.message="Message", mautic.notification.form.button="Action Button Text" (not "Action button" — see correction).

Source: https://github.com/mautic/mautic/blob/c7cc81c3a967c6dc5fc69e37eef265d11d5297ef/app/bundles/NotificationBundle/Translations/en_US/messages.ini#L132-L137


When a field is empty, the preview shows default text instead. An empty **Heading** shows 'Notification' and an empty **Message** shows 'You have a new message'. When **Action Button Text** is empty, the action button doesn't appear in the preview.

@promptless-for-oss promptless-for-oss Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

preview.html.twig defaults heading/message to translated placeholders (mautic.notification.preview.notification / .message) when empty, and toggles a hide class on the button preview element when notification.button is empty, confirming the empty-field defaulting and action-button-hidden behavior.

Source: https://github.com/mautic/mautic/blob/c7cc81c3a967c6dc5fc69e37eef265d11d5297ef/app/bundles/NotificationBundle/Resources/views/Notification/preview.html.twig#L17-L22

@promptless-for-oss promptless-for-oss Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Translation strings mautic.notification.preview.notification="Notification" and mautic.notification.preview.message="You have a new message" are the exact default placeholder text shown in the preview when Heading/Message are empty.

Source: https://github.com/mautic/mautic/blob/c7cc81c3a967c6dc5fc69e37eef265d11d5297ef/app/bundles/NotificationBundle/Translations/en_US/messages.ini#L212-L213


Sending notifications
=====================
There are two ways to send website notifications to the Contact:
Expand Down
Loading