The quality of AI-generated HTML depends on how much useful detail you give Noti. A short line like "show a popup" gives generic results. A detailed paragraph gives enough context for copy, layout, tags, buttons, and forms.
Use these tips in:
- The floating Noti chat in HTML Builder
- The Brief step of the OnPage Generate with AI wizard
This guide shows how to write a strong brief and includes 10 ready-to-adapt examples.
Workflow overview: HTML Builder: Chat with Noti (AI). Layout and use case options: HTML Builder: Layouts and Use Cases.
How to write a strong notification goal
Include as many of these as apply:
| Detail to mention | Why it helps |
|---|---|
| Who sees it | New visitors, returning customers, cart abandoners |
| What it should say | Headline tone, offer amount, urgency |
| Which tags to use | {product_name}, {cart_total}, {order_meta__billing_city} |
| Primary action | Shop now, copy coupon, sign up, close |
| Visual style | Minimal, bold, playful, luxury |
| Must-have elements | Product image, close icon, form, countdown |
Weak vs strong goal
Weak:
> Show a sales popup.
Strong:
> Floating side box for WooCommerce visitors on product pages. Social proof style: "Someone in {order_meta__billing_city} just bought {product_name}." Show product image on the left, text on the right. Primary button "View product" linking to the product. Include a close icon top-right. Clean white card, soft shadow, brand primary color for the button. Keep text under two lines.
The strong version tells the AI exactly what to build. The AI prompt already includes all Notifal tags, so the AI can insert them directly when you mention them in your goal.
10 powerful examples
Copy the Industry, Use case, Layout, and Goal into a Noti chat message, or into the matching OnPage wizard steps. Adjust names, colors, and tags for your site.
1. Recent purchase social proof (WooCommerce)
| Field | Value |
|---|---|
| Industry | Online fashion store |
| Use case | Build Trust and Social Proof |
| Layout | Floating Side Box |
| Goal | Show a compact social proof toast on shop and product pages. Headline: "Trending now" with body text "Someone in {order_meta__billing_city} purchased {product_name}." Use notifal-post-feature-image for the product image (small, left side). Action button "Shop now" with notifal-action-button linking to the product. Close icon top-right. White background, subtle border, primary color #7e2bd2 for the button. |
2. Exit intent discount popup
| Field | Value |
|---|---|
| Industry | SaaS / software |
| Use case | Recover or Retain Visitors |
| Layout | Popup (Modal) |
| Goal | Exit-intent style popup for first-time visitors. Headline "Wait, don't leave yet!" Subtext offering 15% off with code WELCOME15. Copy button using notifal-action-button with copy action for WELCOME15. Secondary text link to dismiss. Centered layout, max width 520px, soft gradient background, close icon top-right. No dynamic tags needed (static offer). |
3. Cart abandonment reminder
| Field | Value |
|---|---|
| Industry | WooCommerce electronics shop |
| Use case | Prevent Cart Abandonment |
| Layout | Floating Side Box |
| Goal | Remind visitors they have items waiting. Text: "You have {cart_item_count} items worth {cart_total} in your cart." Show urgency line "Complete checkout before items sell out." Primary button "Return to cart" linking to cart URL. Use cart tags only. Red accent on the button, light gray card background, close icon included. |
4. Newsletter signup top bar
| Field | Value |
|---|---|
| Industry | Blog / content site |
| Use case | Grow Email List |
| Layout | Floating Bar (Top Bar) |
| Goal | Full-width top bar for all pages. Text: "Get weekly tips in your inbox." Include space for a Mailchimp or newsletter shortcode form in the center. Small close icon on the right. Dark background (#1a1a2e), white text, compact height (about 48px). Static content, no dynamic tags. |
5. Flash sale popup with product tags
| Field | Value |
|---|---|
| Industry | WooCommerce beauty products |
| Use case | Increase Sales |
| Layout | Popup (Modal) |
| Goal | Limited-time sale popup on product pages. Headline "Today only!" Body: "{product_name} now {product_meta__sale_price} (was {product_meta__regular_price})." Product image via notifal-post-feature-image. Bold "Buy now" button with notifal-action-button. Countdown feel with red accent color. Close icon top-right. |
6. Free shipping announcement bar
| Field | Value |
|---|---|
| Industry | WooCommerce home goods |
| Use case | Communicate with Visitors |
| Layout | Floating Bar (Top Bar) |
| Goal | Site-wide announcement: "Free shipping on orders over $50." Single line, centered text, optional small truck emoji or icon. Green background (#22c55e), white text. Close icon on the right. No tags. Keep it thin and readable on mobile. |
7. Upsell bundle (grow AOV)
| Field | Value |
|---|---|
| Industry | WooCommerce supplement store |
| Use case | Grow AOV |
| Layout | Popup (Modal) |
| Goal | After viewing a product, suggest a bundle. Headline "Complete your stack." Body mentions {product_name} plus a related item. Show product image. Button "Add bundle to cart" with ajax add to cart action. Use product tags. Clean two-column layout inside popup, close icon top-right. |
8. Social follow prompt
| Field | Value |
|---|---|
| Industry | Personal brand / creator |
| Use case | Promote Social Channels |
| Layout | Floating Side Box |
| Goal | Small toast bottom-left after 30 seconds on blog posts. Headline "Enjoying this article?" Body "Follow us for more." Two buttons: Instagram and YouTube as custom links with notifal-action-button. Static text, no tags. Playful colors matching brand. Close icon included. |
9. Content gate / lead magnet
| Field | Value |
|---|---|
| Industry | B2B marketing agency |
| Use case | Content Blocking |
| Layout | Popup (Modal) |
| Goal | Center popup to unlock a PDF guide. Headline "Get the free checklist." Include space for an email capture shortcode (WPForms or similar). Short privacy note below the form. Semi-transparent dark overlay feel in the card design. Close icon top-right. Static content except form shortcode placeholder. |
10. Engagement nudge on blog posts
| Field | Value |
|---|---|
| Industry | News / media site |
| Use case | Boost Engagement |
| Layout | Floating Side Box |
| Goal | Toast on long blog posts after scroll. Headline "Did you find this helpful?" Two buttons: "Yes, share it" (custom link to Twitter share) and "Read more" (post link using notifal-action-button with post-link action). Use {post_title} in the share text if possible. Minimal design, close icon top-right. |
After the AI returns HTML
- Paste into the HTML Builder and turn on Preview mode.
- Confirm tags show sample data, not raw
{tag}names. - If a tag looks wrong, open Insert Tag and fix the spelling.
- Save the template and assign it to a notification with the correct Content Source Type (Dynamic if tags are used).
Full steps: HTML Builder: Chat with Noti (AI).
Quick tips summary
| Tip | Detail |
|---|---|
| Be specific | Mention layout, colors, button labels, and tags in your goal |
| Name your tags | Write {product_name} in the goal so the AI uses exact Notifal tags |
| Match use case | Pick the closest use case or browse notifal.com/use-cases |
| Use a chip, then edit | Click a suggestion chip in Noti, then add your offer, tags, and brand details |
| Check preview | Sample data in the builder confirms tags are spelled correctly |
| Mention Notifal Forms | Prefer notifal-form markup for lead capture; avoid putting secrets in attributes |
| Mention shortcodes | Only if you still need a third-party plugin form |
Checklist
- [ ] Wrote a detailed brief (who, what, tags, buttons, style)
- [ ] Mentioned layout and goal (or picked them in the OnPage wizard)
- [ ] Sent the brief to Noti or the OnPage wizard
- [ ] Verified tags render as sample data in preview
- [ ] Saved template and set Content Source Type on the notification
What to read next
HTML Builder series
- Creating a Template with the HTML Builder
- HTML Builder: Widgets and Structure
- HTML Builder: Buttons, Close Icon, and Click Tracking
- HTML Builder: Chat with Noti (AI)
- HTML Builder: AI Prompt Best Practices and Examples (you are here)
- HTML Builder: Layouts and Use Cases
- HTML Sanitization and Allowed HTML