PUQ Mautic Skip to main content

Manage Notification Layouts in the Admin Area

Below is a compact, step-by-step guide to creating and customizing the HTML wrappers (“layouts”) that your notification templates use. You’ll: find the section, add a layout, and tailor the HTML/CSS with live preview and multi-language tabs.

1) Open Notification Layouts

  • Go to Email & Notifications → Notification Layouts.

  • You’ll see the built-in Admin Default Layout and Client Default Layout.

What you can do here

  • ✏️ Edit an existing layout.

  • 🗑️ Delete a custom layout (system layouts are protected).

  • + Create a new layout.

Notification Layouts list with built-in Admin/Client entries.

image-1758200468585.png

2) Create a new layout

  1. Click ➕ Create (top-right).

  2. Give the layout a Name (e.g., “Marketing Layout”).

  3. Click Save.

“Create Notification Layout” modal (Name).

image-1758200473815.png

3) Edit a layout (HTML/CSS + preview)

Open a layout (e.g., Admin Default Layout). The editor provides:

  • Multi-language tabs across the top (🇺🇸 English, 🇺🇦 Ukrainian, 🇵🇱 Polish, 🇫🇷 French).

  • A code editor (left) for your HTML/CSS wrapper.

  • A live HTML preview (right) showing how variables render.

Key variables/partials you’ll use

  • {{ $title }} – Notification/title string.

  • {!! $content !!} – The body that each specific notification template injects.

  • {{ $locale }} – Current language code (often used on the <html lang=""> tag).

  • Optional: {{ $signature }} or {!! $signature !!} if your layout includes a signature partial (depends on your installation).

Tip: Your layout is the frame. Individual notification templates only inject their own content into {!! $content !!}. Keep shared branding, header, footer, fonts, and styling in the layout.

“Edit Notification Layout” (Admin Default) with code editor and live preview.

image-1758200496592.png

4) Style a client-facing layout

For the Client Default Layout, you might include:

  • A branded header with gradient background.

  • A CTA button (e.g., “Visit Client Area”).

  • A footer with company signature.

Best practice: Keep fonts, spacing, and colors consistent with your website, and ensure the CTA is visible in both light/dark email clients.

“Edit Notification Layout” (Client Default) with branded CTA preview.

image-1758200514588.png

 

5) Apply layouts to your notification templates

  • Each notification template (e.g., “Invoice Paid”, “Password Reset”) can reference one of your layouts.

  • Use the Client Default Layout for customer-facing emails and Admin Default Layout for staff/internal alerts.

If your system allows choosing the layout inside each template: open Email & Notifications → Notification Templates, pick the template, and select the layout from the dropdown. (If not present, your installation may assign layouts automatically by scope—Client vs Admin.)

6) Test before you go live

  • Use Notification Senders (SMTP/PHPMail/Bell) to ensure delivery works.

  • Send a real test for each language tab you changed.

  • Check the email in a few clients (Gmail, Outlook, Apple Mail) and on mobile.

7) Tips & safeguards

  • Do not remove {!! $content !!} — your template body inserts here.

  • Keep inline styles where possible; many email clients strip external CSS.

  • Avoid heavy JS (email clients ignore it).

  • Dark mode: test contrast (buttons and text).

  • Language tabs: update all languages to avoid fallback mismatches.

  • Versioning: copy your HTML to a snippet file or Git before big edits.

Quick Troubleshooting

  • Broken layout? Revert to the default layout or restore your last working HTML.

  • Variables not rendering? Ensure you used the correct blade/templating syntax ({{ }} for escaped, {!! !!} for raw HTML).

  • Images blocked? Host images over HTTPS and add alt text; consider base64 for critical icons.

That’s it! Your notifications are now consistent, branded, and ready to ship.

No Comments
Back to top