Add comprehensive tenant API documentation and settings help pages
- Create 6 new tenant API documentation pages: - HelpApiOverview: Authentication, scopes, rate limits, errors - HelpApiAppointments: CRUD operations for appointments - HelpApiServices: Read-only service catalog access - HelpApiResources: Staff, rooms, equipment endpoints - HelpApiCustomers: Customer management endpoints - HelpApiWebhooks: Real-time event subscriptions - Create 6 new settings help pages for granular documentation - Update HelpComprehensive with API section linking to new docs - Update platform HelpApiDocs with comprehensive endpoint coverage - Fix non-clickable /api/v1/docs/ links (now opens in new tab) - Add routes for all new help pages in App.tsx - Update FloatingHelpButton with new help page mappings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
299
frontend/src/pages/help/HelpSettingsEmbedWidget.tsx
Normal file
299
frontend/src/pages/help/HelpSettingsEmbedWidget.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* Help Embed Widget Settings Page
|
||||
*
|
||||
* User-friendly help documentation for the Embed Widget feature.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Code,
|
||||
ExternalLink,
|
||||
Copy,
|
||||
Layout,
|
||||
Palette,
|
||||
Globe,
|
||||
ChevronRight,
|
||||
HelpCircle,
|
||||
Monitor,
|
||||
Smartphone,
|
||||
Settings,
|
||||
CheckCircle,
|
||||
} from 'lucide-react';
|
||||
|
||||
const HelpSettingsEmbedWidget: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-8 px-4">
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
{t('common.back', 'Back')}
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
|
||||
<Code size={24} className="text-brand-600 dark:text-brand-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
Embed Widget Guide
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Add a booking widget to your website in minutes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overview Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Layout size={20} className="text-brand-500" />
|
||||
Overview
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
The Embed Widget lets you add SmoothSchedule's booking functionality directly to your existing website.
|
||||
Your customers can book appointments without leaving your site, creating a seamless experience that
|
||||
matches your brand.
|
||||
</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
Works on any website platform including WordPress, Wix, Squarespace, Shopify, or custom HTML sites.
|
||||
No technical expertise required - just copy and paste the code snippet.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Embed Options Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Code size={20} className="text-brand-500" />
|
||||
Embed Options
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Layout size={20} className="text-blue-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Iframe Embed</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Simple HTML iframe - works everywhere, fixed size, easy to implement</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Code size={20} className="text-purple-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">JavaScript Snippet</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Advanced option - responsive sizing, better integration, modal support</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||||
<strong>Recommendation:</strong> Use the iframe for quick setup. Use JavaScript snippet for better responsive design
|
||||
and if you want the widget to appear as a modal/popup.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Customization Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Palette size={20} className="text-brand-500" />
|
||||
Customization Options
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Palette size={18} className="text-pink-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Brand Colors</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Customize primary color, button styles, and backgrounds to match your website</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Layout size={18} className="text-blue-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Widget Size</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Set width and height (iframe) or let it adapt to your page layout (JavaScript)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Monitor size={18} className="text-green-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Responsive Design</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Widget automatically adapts to mobile, tablet, and desktop screen sizes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Settings size={18} className="text-orange-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Display Preferences</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Choose default service, hide certain options, or pre-select staff members</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Installation Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Globe size={20} className="text-brand-500" />
|
||||
Installation by Platform
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<ol className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">WordPress</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Add a Custom HTML block to your page, paste the embed code, and publish. Works with any page builder.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Wix</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Click "Add Elements" → "Embed" → "Embed a Widget" → "HTML iframe" or "Custom Code", then paste your code.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Squarespace</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Edit your page, add a "Code" block, paste the embed code, and save. Set to HTML mode if prompted.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Shopify</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Go to Online Store → Pages → Create/Edit page → Show HTML editor → Paste code in desired location.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Custom HTML Website</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Paste the embed code directly into your HTML file where you want the widget to appear. For JavaScript snippet, add before closing </body> tag.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tips & Best Practices */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<CheckCircle size={20} className="text-brand-500" />
|
||||
Tips & Best Practices
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<ul className="space-y-3 text-sm text-gray-600 dark:text-gray-300">
|
||||
<li className="flex items-start gap-2">
|
||||
<Copy size={16} className="text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
<strong>Copy-to-clipboard:</strong> Use the built-in copy button in Settings → Embed Widget to easily copy your personalized code.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Monitor size={16} className="text-blue-500 mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
<strong>Test responsiveness:</strong> Preview the widget on mobile, tablet, and desktop before publishing to ensure it looks good everywhere.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Palette size={16} className="text-purple-500 mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
<strong>Match your brand:</strong> Customize colors to align with your website's design. The widget should feel like a natural part of your site.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Layout size={16} className="text-orange-500 mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
<strong>Placement matters:</strong> Put the widget on high-traffic pages like your homepage or services page for maximum bookings.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<Smartphone size={16} className="text-pink-500 mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
<strong>Mobile optimization:</strong> Most bookings happen on mobile. Ensure the widget is easy to use on small screens.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ExternalLink size={16} className="text-teal-500 mt-0.5 flex-shrink-0" />
|
||||
<span>
|
||||
<strong>Update anytime:</strong> Changes to your services, availability, or branding automatically appear in the widget - no need to re-embed.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quick Setup Guide */}
|
||||
<section className="mb-10">
|
||||
<div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<Settings size={24} className="text-brand-600 dark:text-brand-400 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Ready to Get Started?
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Head to your Embed Widget settings to customize your widget, preview it, and copy the code snippet.
|
||||
You'll have it live on your website in just a few minutes.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => navigate('/dashboard/settings/embed-widget')}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
||||
>
|
||||
Go to Embed Widget Settings
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Need More Help */}
|
||||
<section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
|
||||
<HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Need More Help?
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Having trouble embedding the widget? Our support team can help with installation and customization.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => navigate('/dashboard/tickets')}
|
||||
className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
||||
>
|
||||
Contact Support
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpSettingsEmbedWidget;
|
||||
Reference in New Issue
Block a user