# Manage Notification Layouts in the Admin Area ### PUQcloud Panel ##### [Order Now](https://puqcloud.com/puqcloud-panel.php) | [Download](https://github.com/puqcloud/PUQcloud) | [FAQ](https://faq.puqcloud.com/) 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. - - - - - - #### 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](https://doc.puq.info/uploads/images/gallery/2025-09/scaled-1680-/image-1758200468585.png)](https://doc.puq.info/uploads/images/gallery/2025-09/image-1758200468585.png) - - - - - - #### 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](https://doc.puq.info/uploads/images/gallery/2025-09/scaled-1680-/image-1758200473815.png)](https://doc.puq.info/uploads/images/gallery/2025-09/image-1758200473815.png) - - - - - - #### 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 `` 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](https://doc.puq.info/uploads/images/gallery/2025-09/scaled-1680-/image-1758200496592.png)](https://doc.puq.info/uploads/images/gallery/2025-09/image-1758200496592.png) - - - - - - #### 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](https://doc.puq.info/uploads/images/gallery/2025-09/scaled-1680-/image-1758200514588.png)](https://doc.puq.info/uploads/images/gallery/2025-09/image-1758200514588.png) - - - - - - #### 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.)

- - - - - - #### 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. - - - - - - #### 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.