679 lines
37 KiB
HTML
679 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="scroll-smooth">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description"
|
||
content="Plugin Compass documentation. Learn how to plan, build, export, and install AI-generated WordPress plugins using the Plugin Compass builder.">
|
||
<title>Documentation - Plugin Compass</title>
|
||
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
sans: ['Inter', 'sans-serif'],
|
||
},
|
||
colors: {
|
||
brand: {
|
||
50: '#eef2ff',
|
||
100: '#e0e7ff',
|
||
200: '#c7d2fe',
|
||
300: '#a5b4fc',
|
||
400: '#818cf8',
|
||
500: '#6366f1',
|
||
600: '#4f46e5',
|
||
700: '#4338ca',
|
||
800: '#3730a3',
|
||
900: '#312e81',
|
||
950: '#1e1b4b',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #fdf6ed;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #d1d5db;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #9ca3af;
|
||
}
|
||
|
||
.glass-nav {
|
||
background: rgba(251, 246, 239, 0.9);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid rgba(0, 66, 37, 0.1);
|
||
}
|
||
</style>
|
||
|
||
<!-- PostHog Analytics -->
|
||
<script src="/posthog.js"></script>
|
||
</head>
|
||
|
||
<body class="bg-white text-gray-900 font-sans antialiased overflow-x-hidden">
|
||
|
||
<!-- Navigation -->
|
||
<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center h-20">
|
||
<!-- Logo -->
|
||
<a href="/" class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
|
||
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8 rounded-lg">
|
||
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
||
class="text-green-700">Compass</span></span>
|
||
</a>
|
||
|
||
<!-- Desktop Menu -->
|
||
<div class="hidden md:flex items-center space-x-8">
|
||
<a href="/features"
|
||
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Features</a>
|
||
<a href="/pricing"
|
||
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Pricing</a>
|
||
<a href="/docs"
|
||
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Docs</a>
|
||
<a href="/faq"
|
||
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">FAQ</a>
|
||
</div>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div class="hidden md:flex items-center gap-4">
|
||
<a href="/login"
|
||
class="text-gray-700 hover:text-gray-900 font-medium text-sm transition-colors">Sign In</a>
|
||
<a href="/signup"
|
||
class="bg-green-700 hover:bg-green-600 text-white px-5 py-2.5 rounded-full font-medium text-sm transition-all shadow-lg shadow-green-700/20 hover:shadow-green-700/40 transform hover:-translate-y-0.5">
|
||
Get Started
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Mobile Menu Button -->
|
||
<div class="md:hidden flex items-center">
|
||
<button id="mobile-menu-btn" class="text-gray-700 hover:text-gray-900 focus:outline-none">
|
||
<i class="fa-solid fa-bars text-xl"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Menu Panel -->
|
||
<div id="mobile-menu" class="hidden md:hidden bg-white border-b border-slate-200">
|
||
<div class="px-4 pt-2 pb-6 space-y-1">
|
||
<a href="/features"
|
||
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Features</a>
|
||
<a href="/pricing"
|
||
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Pricing</a>
|
||
<a href="/docs"
|
||
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Docs</a>
|
||
<a href="/faq"
|
||
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">FAQ</a>
|
||
<div class="pt-4 flex flex-col gap-3">
|
||
<a href="/login" class="w-full text-center py-2 text-gray-700 font-medium">Sign In</a>
|
||
<a href="/signup" class="w-full bg-green-700 text-white text-center py-3 rounded-lg font-medium">Get
|
||
Started</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="max-w-6xl mx-auto px-4 pt-24 lg:pt-32 pb-12 grid lg:grid-cols-[280px,1fr] gap-8">
|
||
<aside class="bg-white border border-slate-200 rounded-xl p-4 h-fit shadow-sm lg:sticky lg:top-24">
|
||
<h2 class="text-sm font-semibold text-slate-700 mb-3">Contents</h2>
|
||
<nav class="space-y-2 text-sm flex lg:flex-col flex-wrap gap-x-4 gap-y-2 lg:gap-0 lg:space-y-2">
|
||
<a class="block text-green-700 font-semibold" href="#overview">Overview</a>
|
||
<a class="block hover:text-green-700" href="#quick-start">Quick start</a>
|
||
<a class="block hover:text-green-700" href="#projects">Projects & sessions</a>
|
||
<a class="block hover:text-green-700" href="#builder">Builder workflow</a>
|
||
<a class="block hover:text-green-700" href="#prompting">Writing a great spec</a>
|
||
<a class="block hover:text-green-700" href="#install">Export & install</a>
|
||
<a class="block hover:text-green-700" href="#billing">Billing & account</a>
|
||
<a class="block hover:text-green-700" href="#security">Security best practices</a>
|
||
<a class="block hover:text-green-700" href="#troubleshooting">Troubleshooting</a>
|
||
<a class="block hover:text-green-700" href="#support">Support</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<section class="space-y-6 lg:space-y-10 min-w-0">
|
||
<article id="overview" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight">Documentation</h1>
|
||
<p class="text-slate-600 mt-3 leading-relaxed">
|
||
Plugin Compass is an AI builder for creating custom WordPress plugins. Describe what you want,
|
||
review a clear plan, then let the builder generate and iterate on production-ready code.
|
||
</p>
|
||
|
||
<div class="grid md:grid-cols-2 gap-4 mt-6">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h2 class="font-semibold text-gray-900 flex items-center gap-2">
|
||
<i class="fa-solid fa-check"></i>
|
||
Best for
|
||
</h2>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-gray-700">
|
||
<li>Replacing expensive plugin subscriptions with a plugin you own</li>
|
||
<li>Building admin panels, dashboards, forms, and workflow automations</li>
|
||
<li>Creating custom post types, taxonomies, shortcodes, and Gutenberg blocks</li>
|
||
<li>Integrating with third-party APIs (CRMs, email providers, internal services)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h2 class="font-semibold text-gray-900 flex items-center gap-2">
|
||
<i class="fa-solid fa-shield-halved"></i>
|
||
Before you ship
|
||
</h2>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-gray-700">
|
||
<li>Test on a staging site and keep WordPress + plugins up to date</li>
|
||
<li>Review permissions, sanitization, and nonces on admin actions</li>
|
||
<li>Confirm your plugin doesn’t break theme templates or existing workflows</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="quick-start" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Quick start</h2>
|
||
<p class="text-slate-600 mt-2">The fastest path from idea → plugin ZIP.</p>
|
||
|
||
<ol class="list-decimal list-inside space-y-2 mt-4 text-slate-700">
|
||
<li>
|
||
Create an account at <a href="/signup" class="text-green-700 font-semibold">/signup</a> (or sign
|
||
in at
|
||
<a href="/login" class="text-green-700 font-semibold">/login</a>).
|
||
</li>
|
||
<li>
|
||
After verification you’ll be asked to pick a plan (if you haven’t already), then you’ll land on
|
||
<a href="/apps" class="text-green-700 font-semibold">/apps</a>.
|
||
</li>
|
||
<li>
|
||
Click <strong>Create New Plugin</strong> to open the builder.
|
||
</li>
|
||
<li>
|
||
Start with a detailed request (use the template below).
|
||
</li>
|
||
<li>
|
||
Review the plan, approve it, then let the builder generate code.
|
||
</li>
|
||
<li>
|
||
Click <strong>Download ZIP</strong> to export your plugin and install it in WordPress.
|
||
</li>
|
||
</ol>
|
||
|
||
<div class="mt-6">
|
||
<h3 class="font-semibold">Starter prompt template</h3>
|
||
<p class="text-sm text-slate-600 mt-1">Copy/paste this into the builder and fill in the brackets.
|
||
</p>
|
||
<pre
|
||
class="mt-3 overflow-x-auto rounded-lg bg-slate-950 text-slate-100 p-4 text-sm leading-relaxed"><code>Build me a WordPress plugin called: [Plugin Name]
|
||
|
||
Goal:
|
||
- [What business problem it solves]
|
||
|
||
Users & permissions:
|
||
- Admin can: [list]
|
||
- Editor can: [list]
|
||
- Logged-out users can: [list]
|
||
|
||
Admin UI:
|
||
- Add a new menu item under: [Tools / Settings / custom top-level]
|
||
- Screens needed:
|
||
1) [Screen name] - [what it does]
|
||
2) [Screen name] - [what it does]
|
||
|
||
Data model:
|
||
- Store data as: [options / post meta / custom table]
|
||
- Fields:
|
||
- [field] (type) - validation rules
|
||
|
||
Workflows:
|
||
- When [event] happens, do [action]
|
||
- Send email/notification to [who] when [condition]
|
||
|
||
Acceptance criteria:
|
||
- [bullet list of “done” conditions]
|
||
</code></pre>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="projects" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Projects & sessions</h2>
|
||
<p class="text-slate-600 mt-2">
|
||
Each plugin you build lives in its own project (also called a <em>session</em>). Sessions keep your
|
||
chat history,
|
||
plan approvals, and generated files together.
|
||
</p>
|
||
|
||
<div class="grid md:grid-cols-2 gap-4 mt-4">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Create & manage projects</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li>Go to <a href="/apps" class="text-green-700 font-semibold">/apps</a> to see all
|
||
projects.</li>
|
||
<li>Rename a project to match the plugin’s purpose (e.g. “Membership Portal”).</li>
|
||
<li>Delete old experiments to keep your dashboard clean.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Import an existing plugin (paid plans)</h3>
|
||
<p class="text-sm text-gray-700 mt-2">
|
||
If you already have a plugin ZIP, you can upload it from <strong>/apps</strong> and continue
|
||
iterating in the builder.
|
||
This is great for adding features, fixing bugs, or modernizing an older plugin.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="builder" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Builder workflow</h2>
|
||
<p class="text-slate-600 mt-2">A predictable loop: plan → approve → build → iterate.</p>
|
||
|
||
<div class="grid md:grid-cols-2 gap-4 mt-4">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">1) Plan</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-gray-700">
|
||
<li>Clarifies requirements and edge cases before code is generated</li>
|
||
<li>Proposes screens, data storage, and a file layout</li>
|
||
<li>Lists acceptance criteria so you can quickly verify “done”</li>
|
||
</ul>
|
||
<p class="text-sm text-gray-700 mt-3">
|
||
If anything is missing, reply with changes (e.g. “add role-based access” or “store data in a
|
||
custom table”).
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">2) Build</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li>Generates plugin scaffolding, admin UI, and core logic</li>
|
||
<li>Updates existing files instead of starting over when you request changes</li>
|
||
<li>Surfaces progress and keeps context in the project session</li>
|
||
</ul>
|
||
<p class="text-sm text-slate-700 mt-3">
|
||
Iteration works best when you describe the desired behavior and include exact error messages
|
||
or screenshots.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full mt-6">
|
||
<h3 class="font-semibold text-gray-900">Common iteration requests</h3>
|
||
<div class="grid md:grid-cols-2 gap-3 mt-3 text-sm text-slate-700">
|
||
<div class="bg-white rounded-lg border border-slate-200 p-3 mx-auto w-full">
|
||
“Add a settings screen for API keys and validate input.”
|
||
</div>
|
||
<div class="bg-white rounded-lg border border-slate-200 p-3 mx-auto w-full">
|
||
“Fix the activation error and add a database migration routine.”
|
||
</div>
|
||
<div class="bg-white rounded-lg border border-slate-200 p-3 mx-auto w-full">
|
||
“Make the admin table sortable + add search and filters.”
|
||
</div>
|
||
<div class="bg-white rounded-lg border border-slate-200 p-3 mx-auto w-full">
|
||
“Add WP-CLI commands for batch processing.”
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="prompting" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Writing a great spec</h2>
|
||
<p class="text-slate-600 mt-2">The more specific your inputs, the more reliable the output.</p>
|
||
|
||
<div class="grid md:grid-cols-2 gap-4 mt-4">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Include these details</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li><strong>Actors</strong>: who uses it (admin, editor, member, guest)</li>
|
||
<li><strong>Data</strong>: what you store, where it lives, and retention requirements</li>
|
||
<li><strong>UI</strong>: what screens exist and what actions each screen supports</li>
|
||
<li><strong>Rules</strong>: validation, permissions, and edge cases</li>
|
||
<li><strong>Acceptance criteria</strong>: concrete checks to confirm it’s correct</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">When reporting a bug</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-gray-700">
|
||
<li>Exact WordPress version + PHP version</li>
|
||
<li>What you expected vs what happened</li>
|
||
<li>Any fatal error text from the WP debug log</li>
|
||
<li>The exact page URL and steps to reproduce</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Examples of “good” vs “better”</h3>
|
||
<div class="grid lg:grid-cols-2 gap-3 mt-3 text-sm">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<p class="font-semibold text-gray-900">Good</p>
|
||
<p class="text-slate-700 mt-2">“Make a plugin to collect leads.”</p>
|
||
</div>
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<p class="font-semibold text-gray-900">Better</p>
|
||
<p class="text-slate-700 mt-2">
|
||
“Add a lead capture form shortcode with name/email/company fields, store submissions in
|
||
a custom table,
|
||
add an admin list screen with search + CSV export, and send a notification email to the
|
||
site admin.”
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="install" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Export & install</h2>
|
||
<p class="text-slate-600 mt-2">Download your plugin as a ZIP and install it like any other WordPress
|
||
plugin.</p>
|
||
|
||
<div class="grid md:grid-cols-2 gap-4 mt-4">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Export from the builder</h3>
|
||
<ol class="list-decimal list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li>Open your project in the builder.</li>
|
||
<li>Click <strong>Download ZIP</strong>.</li>
|
||
<li>Save the ZIP locally (don’t unzip it for WordPress upload).</li>
|
||
</ol>
|
||
</div>
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Install in WordPress</h3>
|
||
<ol class="list-decimal list-inside space-y-2 mt-3 text-sm text-gray-700">
|
||
<li>In wp-admin: <strong>Plugins → Add New → Upload Plugin</strong>.</li>
|
||
<li>Select the exported ZIP and click <strong>Install Now</strong>.</li>
|
||
<li>Click <strong>Activate</strong>.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full mt-6">
|
||
<h3 class="font-semibold text-gray-900">Recommended deployment flow</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li>Install on a staging environment first.</li>
|
||
<li>Enable <code class="px-1 py-0.5 bg-slate-100 rounded">WP_DEBUG</code> to catch
|
||
notices/fatals early.</li>
|
||
<li>Only deploy to production once you’ve validated permissions, forms, and edge-case behavior.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="billing" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Billing & account</h2>
|
||
<p class="text-slate-600 mt-2">Manage your subscription and payment method from settings.</p>
|
||
|
||
<div class="grid md:grid-cols-2 gap-4 mt-4">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Plans</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li>New users are prompted to choose a plan after email verification.</li>
|
||
<li>Plan limits can affect things like project count, usage, and importing existing plugins.
|
||
</li>
|
||
<li>You can upgrade or downgrade later.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Settings</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li>Visit <a href="/settings" class="text-green-700 font-semibold">/settings</a> to manage
|
||
your account.</li>
|
||
<li>Update your payment method at any time.</li>
|
||
<li>Cancel or resume a subscription from the same page.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="security" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Security best practices</h2>
|
||
<p class="text-slate-600 mt-2">WordPress plugins run inside your site—treat them like production
|
||
software.</p>
|
||
|
||
<div class="grid md:grid-cols-2 gap-4 mt-4">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Admin actions</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-slate-700">
|
||
<li>Use capability checks (e.g. <code
|
||
class="px-1 py-0.5 bg-slate-100 rounded">manage_options</code>)</li>
|
||
<li>Protect form submissions with nonces</li>
|
||
<li>Sanitize input and validate server-side</li>
|
||
<li>Escape output in templates and admin screens</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">Data handling</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-3 text-sm text-gray-700">
|
||
<li>Store secrets (API keys) in the options table and restrict access</li>
|
||
<li>Avoid logging sensitive data</li>
|
||
<li>Use prepared statements for custom SQL queries</li>
|
||
<li>Document retention/export/deletion requirements when you collect personal data</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="troubleshooting" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Troubleshooting</h2>
|
||
<p class="text-slate-600 mt-2">Common issues and how to resolve them quickly.</p>
|
||
|
||
<div class="mt-4 space-y-4">
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">I can’t access the dashboard / builder</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-2 text-sm text-slate-700">
|
||
<li>Make sure you’re signed in (try <a href="/login"
|
||
class="text-green-700 font-semibold">/login</a>).</li>
|
||
<li>If you’re redirected to plan selection, choose a plan first.</li>
|
||
<li>If you recently changed browsers/devices, your session cookie may be missing—sign in
|
||
again.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">My export ZIP is empty</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-2 text-sm text-slate-700">
|
||
<li>Make sure you’ve completed at least one build step that generates files.</li>
|
||
<li>Try asking the builder to list the files it created, then export again.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-white border border-slate-200 rounded-lg p-4 mx-auto w-full">
|
||
<h3 class="font-semibold text-gray-900">The plugin fails to activate on WordPress</h3>
|
||
<ul class="list-disc list-inside space-y-2 mt-2 text-sm text-slate-700">
|
||
<li>Enable WP debug logging and capture the exact fatal error text.</li>
|
||
<li>Share the error message with the builder and ask for a fix.</li>
|
||
<li>Confirm your hosting PHP version meets the plugin’s requirements.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article id="support" class="bg-white border border-slate-200 rounded-xl p-4 sm:p-6 shadow-sm">
|
||
<h2 class="text-2xl font-bold">Support</h2>
|
||
<p class="text-slate-600 mt-2">Need help refining a plugin or debugging an issue?</p>
|
||
|
||
<ul class="list-disc list-inside space-y-2 mt-4 text-slate-700">
|
||
<li>Start with your project session in the builder and describe the goal or issue.</li>
|
||
<li>Include URLs, screenshots, and exact error text whenever possible.</li>
|
||
<li>Check <a href="/settings" class="text-green-700 font-semibold">/settings</a> for account and
|
||
plan status.</li>
|
||
</ul>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- CTA Footer (from homepage) -->
|
||
<section class="py-24 bg-white">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 class="text-3xl sm:text-4xl font-bold mb-8 text-gray-900">Build Your Custom Plugin Today</h2>
|
||
<p class="text-xl text-gray-700 mb-10">Start building WordPress plugins that fit your exact needs. No coding
|
||
experience required.</p>
|
||
<a href="/signup"
|
||
class="inline-flex items-center justify-center px-8 py-4 bg-green-700 text-white rounded-full font-bold hover:bg-green-600 transition-all shadow-xl shadow-green-700/20">
|
||
Get Started Free <i class="fa-solid fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer (from homepage) -->
|
||
<footer class="bg-white border-t border-green-200 pt-16 pb-8">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-2 lg:grid-cols-5 gap-12 mb-16">
|
||
<div class="col-span-2 lg:col-span-1">
|
||
<div class="flex items-center gap-2 mb-6">
|
||
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8 rounded-lg">
|
||
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
||
class="text-green-700">Compass</span></span>
|
||
</div>
|
||
<p class="text-gray-600 text-sm leading-relaxed">
|
||
The smart way for WordPress site owners to replace expensive plugin subscriptions with custom
|
||
solutions. Save thousands monthly.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-900 mb-6">Product</h4>
|
||
<ul class="space-y-4 text-sm">
|
||
<li><a href="/features" class="text-gray-600 hover:text-green-700">Features</a></li>
|
||
<li><a href="/pricing" class="text-gray-600 hover:text-green-700">Pricing</a></li>
|
||
<li><a href="#" class="text-gray-600 hover:text-green-700">Templates</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-900 mb-6">Resources</h4>
|
||
<ul class="space-y-4 text-sm">
|
||
<li><a href="/docs" class="text-gray-600 hover:text-green-700">Documentation</a></li>
|
||
<li><a href="/faq" class="text-gray-600 hover:text-green-700">FAQ</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-bold text-gray-900 mb-6">Legal</h4>
|
||
<ul class="space-y-4 text-sm">
|
||
<li><a href="/privacy.html" class="text-gray-600 hover:text-green-700">Privacy Policy</a></li>
|
||
<li><a href="/terms" class="text-gray-600 hover:text-green-700">Terms of Service</a></li>
|
||
<li><a href="/contact" class="text-gray-600 hover:text-green-700">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-span-2 lg:col-span-1">
|
||
<h4 class="font-bold text-gray-900 mb-6">Stay Updated</h4>
|
||
<p class="text-gray-600 text-sm mb-4">Get the latest updates and WordPress tips.</p>
|
||
<form id="footer-signup-form" class="flex flex-col gap-2">
|
||
<input type="email" name="email" placeholder="Your email" required
|
||
class="px-4 py-2 border border-green-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-700/20 text-sm">
|
||
<button type="submit"
|
||
class="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium text-sm transition-colors shadow-lg shadow-green-700/10">
|
||
Subscribe
|
||
</button>
|
||
</form>
|
||
<div id="signup-message" class="mt-2 text-xs hidden"></div>
|
||
</div>
|
||
</div>
|
||
<div class="border-t border-gray-100 pt-8 flex justify-center">
|
||
<p class="text-gray-500 text-xs text-center">© 2026 Plugin Compass. All rights reserved. Built for
|
||
WordPress.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
|
||
mobileMenuBtn.addEventListener('click', () => {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
// Smooth scroll for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
const href = this.getAttribute('href');
|
||
if (!href || href === '#') return;
|
||
|
||
e.preventDefault();
|
||
const target = document.querySelector(href);
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
// Close mobile menu if open
|
||
mobileMenu.classList.add('hidden');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Navbar scroll effect
|
||
window.addEventListener('scroll', () => {
|
||
const navbar = document.getElementById('navbar');
|
||
if (window.scrollY > 20) {
|
||
navbar.classList.add('shadow-md', 'h-16');
|
||
navbar.classList.remove('h-20');
|
||
} else {
|
||
navbar.classList.remove('shadow-md', 'h-16');
|
||
navbar.classList.add('h-20');
|
||
}
|
||
});
|
||
|
||
// Email Signup Form Handler
|
||
const signupForm = document.getElementById('footer-signup-form');
|
||
const signupMessage = document.getElementById('signup-message');
|
||
|
||
if (signupForm) {
|
||
signupForm.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
const email = signupForm.querySelector('input[name="email"]').value;
|
||
const button = signupForm.querySelector('button');
|
||
|
||
button.disabled = true;
|
||
button.textContent = 'Subscribing...';
|
||
|
||
try {
|
||
const response = await fetch('https://emailmarketing.modelrailway3d.co.uk/api/webhooks/incoming/wh_0Z49zi_DGj4-lKJMOPO8-g', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
email: email,
|
||
source: 'plugin_compass_footer',
|
||
timestamp: new Date().toISOString()
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
signupMessage.textContent = 'Successfully subscribed!';
|
||
signupMessage.className = 'mt-2 text-xs text-green-600';
|
||
signupForm.reset();
|
||
} else {
|
||
throw new Error('Failed to subscribe');
|
||
}
|
||
} catch (error) {
|
||
signupMessage.textContent = 'Failed to subscribe. Please try again.';
|
||
signupMessage.className = 'mt-2 text-xs text-red-600';
|
||
} finally {
|
||
signupMessage.classList.remove('hidden');
|
||
button.disabled = false;
|
||
button.textContent = 'Subscribe';
|
||
|
||
setTimeout(() => {
|
||
signupMessage.classList.add('hidden');
|
||
}, 5000);
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |