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();
// 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="tagline">Stay Connected</Fragment>
<Fragment slot="tagline">Owner Portal</Fragment>
<section class="onboarding-hero">
<div class="container">
<h1>Get Website Updates by Text</h1>
<h1>Update Your Website by Text</h1>
<p class="lead">
Sign up to receive text message notifications whenever we update our website
with new events, menu items, or announcements.
Send a text message to edit your website — no login, no dashboard, just natural language.
Change headlines, update hours, add events, swap photos, and more.
</p>
</div>
</section>
@@ -24,10 +24,13 @@ const { siteContext } = loadSiteData();
<section class="onboarding-form">
<div class="container">
<div class="form-card">
<h2>Sign Up for Text Notifications</h2>
<form id="sms-signup-form" method="POST" action="/api/sms/subscribe">
<h2>Enable Text-to-Edit</h2>
<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">
<label for="phone">Phone Number</label>
<label for="phone">Your Phone Number</label>
<input
type="tel"
id="phone"
@@ -36,7 +39,7 @@ const { siteContext } = loadSiteData();
required
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 class="form-group">
@@ -54,25 +57,24 @@ const { siteContext } = loadSiteData();
<input type="checkbox" name="consent" required />
<span class="checkmark"></span>
<span class="label-text">
I consent to receive text messages from <strong>{siteContext.businessName}</strong>
about website updates, events, and announcements.
Message frequency varies. Message and data rates may apply.
Reply STOP to opt out at any time.
I am the owner or authorized manager of <strong>{siteContext.businessName}</strong>
and I consent to receive text messages that allow me to edit this website.
Message and data rates may apply.
</span>
</label>
</div>
<button type="submit" class="submit-btn">Subscribe</button>
<button type="submit" class="submit-btn">Enable Text-to-Edit</button>
</form>
<div id="form-success" class="form-message success" style="display: none;">
<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 id="form-error" class="form-message error" style="display: none;">
<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>
@@ -80,64 +82,77 @@ const { siteContext } = loadSiteData();
<section class="what-to-expect">
<div class="container">
<h2>What You'll Receive</h2>
<h2>What You Can Do</h2>
<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">
<span class="feature-icon">📅</span>
<h3>New Events</h3>
<p>Be the first to know about upcoming community events, tastings, and workshops.</p>
<h3>Add Events</h3>
<p>"Add a workshop on May 15 at 2pm" or "Cancel the April webinar"</p>
</div>
<div class="feature">
<span class="feature-icon">☕</span>
<h3>Menu Updates</h3>
<p>Get notified when we add new seasonal drinks or specialty items to the menu.</p>
<span class="feature-icon">🖼️</span>
<h3>Swap Photos</h3>
<p>Text a photo to replace the hero image or add it to the gallery.</p>
</div>
<div class="feature">
<span class="feature-icon">🏷️</span>
<h3>Special Offers</h3>
<p>Receive exclusive promotions and limited-time offers for subscribers.</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>
<span class="feature-icon">🎨</span>
<h3>Update Style</h3>
<p>"Change our primary color to teal" or "Make the font bigger"</p>
</div>
</div>
</div>
</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">
<div class="container">
<h2>Common Questions</h2>
<div class="faq-list">
<details class="faq-item">
<summary>How often will I receive messages?</summary>
<summary>Who can edit the website?</summary>
<p>
Message frequency varies based on website updates and events — typically 2-4 messages per month.
We respect your time and only send messages that matter.
Only the phone number you register here can send edit commands.
You can update or transfer ownership at any time from the <a href="/editor">visual editor</a>.
</p>
</details>
<details class="faq-item">
<summary>Is there a cost?</summary>
<p>
Message and data rates may apply depending on your wireless carrier plan.
Standard text messaging rates from your provider will apply.
Standard text messaging rates from your wireless carrier apply.
There is no additional charge from {siteContext.businessName} for using text-to-edit.
</p>
</details>
<details class="faq-item">
<summary>How do I stop receiving messages?</summary>
<summary>How do I stop using text-to-edit?</summary>
<p>
Reply <strong>STOP</strong> to any message at any time to opt out.
You'll receive a confirmation, and no further messages will be sent.
Reply <strong>START</strong> to resubscribe.
Reply <strong>STOP</strong> to any message to pause edits.
Reply <strong>START</strong> to resume.
You can also disable text-to-edit entirely from the <a href="/editor">editor</a>.
</p>
</details>
<details class="faq-item">
<summary>Is my phone number shared?</summary>
<summary>What if I make a mistake?</summary>
<p>
No. Your phone number is used solely by {siteContext.businessName} for the purposes
you consented to. We do not sell or share your information with third parties.
See our <a href="/privacy-policy">Privacy Policy</a> for full details.
Every change is backed up automatically. Reply <strong>UNDO</strong> to revert the last edit,
or visit the <a href="/editor">visual editor</a> to review and restore any previous version.
</p>
</details>
</div>
@@ -186,9 +201,16 @@ const { siteContext } = loadSiteData();
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--color-primary-dark);
margin-bottom: 1.25rem;
margin-bottom: 0.5rem;
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 {
margin-bottom: 1.25rem;
@@ -329,6 +351,41 @@ const { siteContext } = loadSiteData();
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 {
padding: 3rem 1.5rem;
}
@@ -397,7 +454,7 @@ const { siteContext } = loadSiteData();
const formData = new FormData(form);
try {
const response = await fetch('/api/sms/subscribe', {
const response = await fetch('/api/sms/register-owner', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -411,7 +468,7 @@ const { siteContext } = loadSiteData();
form.style.display = 'none';
successMsg.style.display = 'block';
} else {
throw new Error('Subscription failed');
throw new Error('Registration failed');
}
} catch {
errorMsg.style.display = 'block';