Update Maple welcome email design#150
Conversation
Redesigned welcome email with modern multi-section layout including hero image, download CTAs, Pro upsell features, and Maple Proxy section.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe welcome email HTML template in Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Outlook does not support CSS flexbox. Use a table-based layout for the Maple Proxy section so the icon and text render side-by-side consistently across all email clients.
Many email clients do not support hsl() CSS colors. Replace all instances of hsl(264,89%,69%) with #a855f7 for broader compatibility.
Inline-block with percentage widths breaks in many email clients due to whitespace handling. Use a proper 2-column table for the Pro feature grid for reliable rendering across all clients including Outlook.
|
@marksftw we have to whitelist the maple support email with apple for their private email router thing. I don’t know if the maple domain is in there or if it’s just the opensecret one. Can you check? I forgot where it’s at. |
Okay, I added trymaple.ai next to the existing opensecret.cloud entry in the Apple Developer portal for Sign in with Apple for Email Communication. Should be good to go. |
Add warm intro message about Maple as a private space for AI conversations. Move primary CTA to the intro section as "Start your first chat" and keep "Download Apps" in the device section.
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/email.rs (2)
193-201: Consider adding preheader text for email preview optimization.Email clients display preview text (preheader) alongside the subject line. Without explicit preheader text, clients will pull from the first visible content ("Welcome to Maple AI" or the intro paragraph), which may get truncated awkwardly.
📧 Optional: Add hidden preheader text
<div class="wrapper"> + + <!-- Preheader (appears in email preview) --> + <div style="display: none; max-height: 0px; overflow: hidden; mso-hide: all;"> + Private, powerful AI that's ready when you are. Get started on Web, iPhone, Android, Mac, or Linux. + </div> <!-- Header --> <div class="header">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/email.rs` around lines 193 - 201, Add an explicit hidden preheader string immediately after the top of the email HTML (e.g., right after the <div class="wrapper"> or inside the <div class="header"> before the <h1>) by inserting a visually-hidden element (span/div) with a concise preview sentence; hide it with email-safe CSS (transparent color, zero height, overflow:hidden, mso-hide:all, and font-size:1px) so clients show the preheader in inbox previews but it doesn’t appear in the rendered message — update the template around the existing wrapper/header/h1 elements accordingly.
209-209: CTA buttons may render as plain links in Outlook.The inline-styled
<a>buttons work in most email clients but Outlook stripspaddingandborder-radiusfrom anchor tags. For truly bulletproof buttons, VML-based buttons are the standard approach, but this is an optional enhancement since the current implementation degrades gracefully to clickable links.📧 Example: Bulletproof button using VML (optional)
For Outlook-specific button rendering, you can wrap buttons in conditional VML:
<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://trymaple.ai" style="height:44px;v-text-anchor:middle;width:180px;" arcsize="14%" stroke="f" fillcolor="#a855f7"> <w:anchorlock/> <center style="color:`#ffffff`;font-family:sans-serif;font-size:15px;font-weight:500;">Start your first chat</center> </v:roundrect> <![endif]--> <!--[if !mso]><!--> <a href="https://trymaple.ai" style="...">Start your first chat</a> <!--<![endif]-->This is optional polish since the current buttons are functional across all clients.
Also applies to: 223-223, 267-267
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/email.rs` at line 209, The CTA anchor in the email HTML template (the <a href="https://trymaple.ai" ...>Start your first chat</a> elements) can render poorly in Outlook; wrap each CTA anchor with Outlook conditional VML markup so MSO clients get a <v:roundrect> button and non-MSO clients keep the existing inline-styled <a> fallback. Locate the CTA anchors (the styled anchor(s) used for "Start your first chat" around the template code that produces lines matching the shown snippet and the similar occurrences at the other reported lines) and surround them with MSO conditional comments: an MSO block that renders a VML roundrect with equivalent href, fillcolor, dimensions, arcsize and centered text, and a non-MSO block that preserves the current <a> markup; ensure you duplicate this for each occurrence referenced.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/email.rs`:
- Around line 193-201: Add an explicit hidden preheader string immediately after
the top of the email HTML (e.g., right after the <div class="wrapper"> or inside
the <div class="header"> before the <h1>) by inserting a visually-hidden element
(span/div) with a concise preview sentence; hide it with email-safe CSS
(transparent color, zero height, overflow:hidden, mso-hide:all, and
font-size:1px) so clients show the preheader in inbox previews but it doesn’t
appear in the rendered message — update the template around the existing
wrapper/header/h1 elements accordingly.
- Line 209: The CTA anchor in the email HTML template (the <a
href="https://trymaple.ai" ...>Start your first chat</a> elements) can render
poorly in Outlook; wrap each CTA anchor with Outlook conditional VML markup so
MSO clients get a <v:roundrect> button and non-MSO clients keep the existing
inline-styled <a> fallback. Locate the CTA anchors (the styled anchor(s) used
for "Start your first chat" around the template code that produces lines
matching the shown snippet and the similar occurrences at the other reported
lines) and surround them with MSO conditional comments: an MSO block that
renders a VML roundrect with equivalent href, fillcolor, dimensions, arcsize and
centered text, and a non-MSO block that preserves the current <a> markup; ensure
you duplicate this for each occurrence referenced.
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
2 participants
Summary
Test plan
Summary by CodeRabbit