HTML Builder

HTML Builder: AI Prompt Best Practices and Examples

8 min read

The quality of AI-generated HTML depends on how well you fill the AI Prompt form. The most important field is Your notification goal. A short line like "show a popup" gives generic results. A detailed paragraph gives the AI enough context for copy, layout, tags, and buttons.

This guide shows how to write a strong goal and includes 10 ready-to-adapt examples for common scenarios.

Workflow overview: HTML Builder: AI Prompt Workflow. 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 mentionWhy it helps
Who sees itNew visitors, returning customers, cart abandoners
What it should sayHeadline tone, offer amount, urgency
Which tags to use{product_name}, {cart_total}, {order_meta__billing_city}
Primary actionShop now, copy coupon, sign up, close
Visual styleMinimal, bold, playful, luxury
Must-have elementsProduct 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 the AI Prompt form. Adjust names, colors, and tags for your site.

1. Recent purchase social proof (WooCommerce)

FieldValue
IndustryOnline fashion store
Use caseBuild Trust and Social Proof
LayoutFloating Side Box
GoalShow 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

FieldValue
IndustrySaaS / software
Use caseRecover or Retain Visitors
LayoutPopup (Modal)
GoalExit-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

FieldValue
IndustryWooCommerce electronics shop
Use casePrevent Cart Abandonment
LayoutFloating Side Box
GoalRemind 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

FieldValue
IndustryBlog / content site
Use caseGrow Email List
LayoutFloating Bar (Top Bar)
GoalFull-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

FieldValue
IndustryWooCommerce beauty products
Use caseIncrease Sales
LayoutPopup (Modal)
GoalLimited-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

FieldValue
IndustryWooCommerce home goods
Use caseCommunicate with Visitors
LayoutFloating Bar (Top Bar)
GoalSite-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)

FieldValue
IndustryWooCommerce supplement store
Use caseGrow AOV
LayoutPopup (Modal)
GoalAfter 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

FieldValue
IndustryPersonal brand / creator
Use casePromote Social Channels
LayoutFloating Side Box
GoalSmall 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

FieldValue
IndustryB2B marketing agency
Use caseContent Blocking
LayoutPopup (Modal)
GoalCenter 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

FieldValue
IndustryNews / media site
Use caseBoost Engagement
LayoutFloating Side Box
GoalToast 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

  1. Paste into the HTML Builder and turn on Preview mode.
  2. Confirm tags show sample data, not raw {tag} names.
  3. If a tag looks wrong, open Insert Tag and fix the spelling.
  4. Save the template and assign it to a notification with the correct Content Source Type (Dynamic if tags are used).

Full steps: HTML Builder: AI Prompt Workflow.

Quick tips summary

TipDetail
Be specificMention layout, colors, button labels, and tags in your goal
Name your tagsWrite {product_name} in the goal so the AI uses exact Notifal tags
Match use casePick the closest use case or browse notifal.com/use-cases
Load a patternStart from a built-in pattern, then edit the goal field
Check previewSample data in the builder confirms tags are spelled correctly
Mention shortcodesIf you need a form, say which plugin shortcode to embed

Checklist

  • [ ] Wrote a detailed Your notification goal (who, what, tags, buttons, style)
  • [ ] Picked matching layout and use case
  • [ ] Copied prompt to AI tool and pasted HTML back
  • [ ] 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

  1. Creating a Template with the HTML Builder
  2. HTML Builder: Buttons, Close Icon, and Click Tracking
  3. HTML Builder: AI Prompt Workflow
  4. HTML Builder: AI Prompt Best Practices and Examples (you are here)
  5. HTML Builder: Layouts and Use Cases
  6. HTML Sanitization and Allowed HTML

Other template editors