khalidadil/dynamic-sites-simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite SMS onboarding page for owner text-to-edit, not customer notifications

Browse Source 
The sms-onboarding.astro page was previously framed around customers
subscribing to receive website update notifications (events, menu items,
announcements). This rewrites it entirely to reflect the actual product:
website owners editing their own site via natural language SMS.

Changes:
- Page title: 'Text-to-Edit' instead of 'Get Website Updates by Text'
- Hero: explains owners can edit their site by texting natural language
- Form: 'Enable Text-to-Edit' for the owner's phone number
- Features: edit content, add events, swap photos, update style — with
  example natural language prompts
- New 'How It Works' section: text → review proposal → reply YES
- FAQ: restructured around owner questions (who can edit, mistakes/undo,
  stopping, cost) with links to the visual editor
- Form action endpoint updated from /api/sms/subscribe to
  /api/sms/register-owner (reflects owner registration intent)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Khalid A
2026-04-26 04:26:24 -05:00
parent 250b0d4aa3
commit 3ca12a1ed1
1 changed files with 104 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/pages/sms-onboarding.astro
View File

@@ -5,18 +5,18 @@ import { loadSiteData } from '../lib/site-data.ts';
const { siteContext } = loadSiteData(); const { siteContext } = loadSiteData();
// In a real implementation, this would connect to an API endpoint // In a real implementation, this would connect to an API endpoint
// that stores the phone number and sends a confirmation SMS // that stores the owner's phone number and sends a confirmation SMS
--- ---
<BaseLayout title={`Text Message Updates — ${siteContext.businessName}`} primaryColor={siteContext.primaryColor}> <BaseLayout title={`Text-to-Edit — ${siteContext.businessName}`} primaryColor={siteContext.primaryColor}>
<Fragment slot="logo">{siteContext.businessName}</Fragment> <Fragment slot="logo">{siteContext.businessName}</Fragment>
<Fragment slot="tagline">Stay Connected</Fragment> <Fragment slot="tagline">Owner Portal</Fragment>
<section class="onboarding-hero"> <section class="onboarding-hero">
<div class="container"> <div class="container">
<h1>Get Website Updates by Text</h1> <h1>Update Your Website by Text</h1>
<p class="lead"> <p class="lead">
Sign up to receive text message notifications whenever we update our website Send a text message to edit your website — no login, no dashboard, just natural language.
with new events, menu items, or announcements. Change headlines, update hours, add events, swap photos, and more.
</p> </p>
</div> </div>
</section> </section>
@@ -24,10 +24,13 @@ const { siteContext } = loadSiteData();
<section class="onboarding-form"> <section class="onboarding-form">
<div class="container"> <div class="container">
<div class="form-card"> <div class="form-card">
<h2>Sign Up for Text Notifications</h2> <h2>Enable Text-to-Edit</h2>
<form id="sms-signup-form" method="POST" action="/api/sms/subscribe"> <p class="form-subtitle">
Enter the phone number you want to use to manage <strong>{siteContext.businessName}</strong>.
</p>
<form id="sms-signup-form" method="POST" action="/api/sms/register-owner">
<div class="form-group"> <div class="form-group">
<label for="phone">Phone Number</label> <label for="phone">Your Phone Number</label>
<input <input
type="tel" type="tel"
id="phone" id="phone"
@@ -36,7 +39,7 @@ const { siteContext } = loadSiteData();
required required
pattern="[\d\s\-\+\(\)]{10,}" pattern="[\d\s\-\+\(\)]{10,}"
/> />
<span class="hint">We'll send a confirmation text to verify your number.</span> <span class="hint">We'll send a confirmation text to verify this number.</span>
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -54,25 +57,24 @@ const { siteContext } = loadSiteData();
<input type="checkbox" name="consent" required /> <input type="checkbox" name="consent" required />
<span class="checkmark"></span> <span class="checkmark"></span>
<span class="label-text"> <span class="label-text">
I consent to receive text messages from <strong>{siteContext.businessName}</strong> I am the owner or authorized manager of <strong>{siteContext.businessName}</strong>
about website updates, events, and announcements. and I consent to receive text messages that allow me to edit this website.
Message frequency varies. Message and data rates may apply. Message and data rates may apply.
Reply STOP to opt out at any time.
</span> </span>
</label> </label>
</div> </div>
<button type="submit" class="submit-btn">Subscribe</button> <button type="submit" class="submit-btn">Enable Text-to-Edit</button>
</form> </form>
<div id="form-success" class="form-message success" style="display: none;"> <div id="form-success" class="form-message success" style="display: none;">
<h3>You're all set!</h3> <h3>You're all set!</h3>
<p>Check your phone for a confirmation message. Reply YES to complete your signup.</p> <p>Check your phone for a confirmation message. Reply YES to activate text-to-edit.</p>
</div> </div>
<div id="form-error" class="form-message error" style="display: none;"> <div id="form-error" class="form-message error" style="display: none;">
<h3>Something went wrong</h3> <h3>Something went wrong</h3>
<p>Please try again or contact us directly.</p> <p>Please try again or contact support.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -80,64 +82,77 @@ const { siteContext } = loadSiteData();
<section class="what-to-expect"> <section class="what-to-expect">
<div class="container"> <div class="container">
<h2>What You'll Receive</h2> <h2>What You Can Do</h2>
<div class="feature-grid"> <div class="feature-grid">
<div class="feature">
<span class="feature-icon">✏️</span>
<h3>Edit Content</h3>
<p>"Change the headline to Summer Sale" or "Update our hours to 8am–6pm"</p>
</div>
<div class="feature"> <div class="feature">
<span class="feature-icon">📅</span> <span class="feature-icon">📅</span>
<h3>New Events</h3> <h3>Add Events</h3>
<p>Be the first to know about upcoming community events, tastings, and workshops.</p> <p>"Add a workshop on May 15 at 2pm" or "Cancel the April webinar"</p>
</div> </div>
<div class="feature"> <div class="feature">
<span class="feature-icon">☕</span> <span class="feature-icon">🖼️</span>
<h3>Menu Updates</h3> <h3>Swap Photos</h3>
<p>Get notified when we add new seasonal drinks or specialty items to the menu.</p> <p>Text a photo to replace the hero image or add it to the gallery.</p>
</div> </div>
<div class="feature"> <div class="feature">
<span class="feature-icon">🏷️</span> <span class="feature-icon">🎨</span>
<h3>Special Offers</h3> <h3>Update Style</h3>
<p>Receive exclusive promotions and limited-time offers for subscribers.</p> <p>"Change our primary color to teal" or "Make the font bigger"</p>
</div>
<div class="feature">
<span class="feature-icon">🔔</span>
<h3>Website Changes</h3>
<p>Stay informed when we update our hours, location details, or services.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="how-it-works">
<div class="container">
<h2>How It Works</h2>
<ol class="steps-list">
<li><strong>Text your edit.</strong> Send a natural language message describing what you want changed.</li>
<li><strong>Review the proposal.</strong> You'll get a text back showing exactly what will change.</li>
<li><strong>Reply YES.</strong> The edit is applied to your site instantly — no deploy needed.</li>
</ol>
<p class="steps-note">
Every edit is validated, backed up, and reversible. Your site stays safe even if you mistype.
</p>
</div>
</section>
<section class="faq-section"> <section class="faq-section">
<div class="container"> <div class="container">
<h2>Common Questions</h2> <h2>Common Questions</h2>
<div class="faq-list"> <div class="faq-list">
<details class="faq-item"> <details class="faq-item">
<summary>How often will I receive messages?</summary> <summary>Who can edit the website?</summary>
<p> <p>
Message frequency varies based on website updates and events — typically 2-4 messages per month. Only the phone number you register here can send edit commands.
We respect your time and only send messages that matter. You can update or transfer ownership at any time from the <a href="/editor">visual editor</a>.
</p> </p>
</details> </details>
<details class="faq-item"> <details class="faq-item">
<summary>Is there a cost?</summary> <summary>Is there a cost?</summary>
<p> <p>
Message and data rates may apply depending on your wireless carrier plan. Standard text messaging rates from your wireless carrier apply.
Standard text messaging rates from your provider will apply. There is no additional charge from {siteContext.businessName} for using text-to-edit.
</p> </p>
</details> </details>
<details class="faq-item"> <details class="faq-item">
<summary>How do I stop receiving messages?</summary> <summary>How do I stop using text-to-edit?</summary>
<p> <p>
Reply <strong>STOP</strong> to any message at any time to opt out. Reply <strong>STOP</strong> to any message to pause edits.
You'll receive a confirmation, and no further messages will be sent. Reply <strong>START</strong> to resume.
Reply <strong>START</strong> to resubscribe. You can also disable text-to-edit entirely from the <a href="/editor">editor</a>.
</p> </p>
</details> </details>
<details class="faq-item"> <details class="faq-item">
<summary>Is my phone number shared?</summary> <summary>What if I make a mistake?</summary>
<p> <p>
No. Your phone number is used solely by {siteContext.businessName} for the purposes Every change is backed up automatically. Reply <strong>UNDO</strong> to revert the last edit,
you consented to. We do not sell or share your information with third parties. or visit the <a href="/editor">visual editor</a> to review and restore any previous version.
See our <a href="/privacy-policy">Privacy Policy</a> for full details.
</p> </p>
</details> </details>
</div> </div>
@@ -186,9 +201,16 @@ const { siteContext } = loadSiteData();
font-family: var(--font-display); font-family: var(--font-display);
font-size: 1.3rem; font-size: 1.3rem;
color: var(--color-primary-dark); color: var(--color-primary-dark);
margin-bottom: 1.25rem; margin-bottom: 0.5rem;
text-align: center; text-align: center;
} }
.form-subtitle {
text-align: center;
font-size: 0.9rem;
color: var(--color-text-muted);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.form-group { .form-group {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
@@ -329,6 +351,41 @@ const { siteContext } = loadSiteData();
line-height: 1.5; line-height: 1.5;
} }
.how-it-works {
padding: 3rem 1.5rem;
border-top: 1px solid var(--color-border);
}
.how-it-works h2 {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--color-primary-dark);
text-align: center;
margin-bottom: 2rem;
}
.steps-list {
max-width: 560px;
margin: 0 auto 1.5rem;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.steps-list li {
font-size: 0.95rem;
color: var(--color-text);
line-height: 1.6;
}
.steps-list li strong {
color: var(--color-primary-dark);
}
.steps-note {
text-align: center;
font-size: 0.85rem;
color: var(--color-text-muted);
max-width: 480px;
margin: 0 auto;
}
.faq-section { .faq-section {
padding: 3rem 1.5rem; padding: 3rem 1.5rem;
} }
@@ -397,7 +454,7 @@ const { siteContext } = loadSiteData();
const formData = new FormData(form); const formData = new FormData(form);
try { try {
const response = await fetch('/api/sms/subscribe', { const response = await fetch('/api/sms/register-owner', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify({
@@ -411,7 +468,7 @@ const { siteContext } = loadSiteData();
form.style.display = 'none'; form.style.display = 'none';
successMsg.style.display = 'block'; successMsg.style.display = 'block';
} else { } else {
throw new Error('Subscription failed'); throw new Error('Registration failed');
} }
} catch { } catch {
errorMsg.style.display = 'block'; errorMsg.style.display = 'block';