Files
shopify-ai-backup/chat/public/credits.html

475 lines
26 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="Understanding AI credits, tokens, and top-ups at Plugin Compass. Learn how our credit system works.">
<meta name="keywords"
content="AI credits, tokens, token usage, credit top-up, Plugin Compass credits system">
<meta name="robots" content="index, follow">
<meta property="og:title" content="AI Credits System - Plugin Compass">
<meta property="og:description"
content="Learn how AI credits, tokens, and top-ups work at Plugin Compass.">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:site_name" content="Plugin Compass">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="AI Credits System - Plugin Compass">
<meta name="twitter:description"
content="Learn how AI credits, tokens, and top-ups work at Plugin Compass.">
<link rel="canonical" href="">
<title>AI Credits System | 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-amber-50 text-gray-900 font-sans antialiased overflow-x-hidden">
<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">
<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">
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
class="text-green-700">Compass</span></span>
</a>
<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>
<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>
<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>
<div id="mobile-menu" class="hidden md:hidden bg-amber-50 border-b border-amber-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>
<section class="py-24 bg-amber-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Understanding AI Credits</h1>
<p class="text-xl text-gray-700">Everything you need to know about how credits, tokens, and top-ups work.
</p>
</div>
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">
<i class="fa-solid fa-coins text-green-600 mr-3"></i>What Are AI Credits?
</h2>
<p class="text-gray-700 leading-relaxed mb-4">
AI credits are the usage unit for Plugin Compass. Every AI-powered action—like generating code,
analyzing files, or building plugins—consumes credits from your monthly allowance. This system
ensures fair usage across all plans while providing flexibility for different project sizes.
</p>
<p class="text-gray-700 leading-relaxed">
Your plan includes a set number of credits each month that reset on your billing date. Credits do not
roll over to the next month, so it's important to use them within your billing period.
</p>
</div>
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">
<i class="fa-solid fa-microchip text-green-600 mr-3"></i>How Tokens Relate to Credits
</h2>
<p class="text-gray-700 leading-relaxed mb-4">
Tokens are the basic units of text that AI models process. Think of them as words or word pieces—the
average English word is roughly 4 characters or about 1.3 tokens. However, not all models use tokens
at the same rate.
</p>
<div class="bg-green-50 rounded-xl p-6 border border-green-200 mb-4">
<h3 class="font-semibold text-gray-900 mb-3">Model Multipliers</h3>
<p class="text-gray-700 text-sm mb-4">Different AI models have different capabilities and costs, so
they burn credits at different rates:</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white rounded-lg p-4 border border-green-100">
<div class="flex items-center gap-2 mb-2">
<span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded-full">1x</span>
<span class="font-semibold text-gray-900">Standard Models</span>
</div>
<p class="text-gray-600 text-sm">Efficient models for everyday tasks. 1 token = 1 credit.
</p>
</div>
<div class="bg-white rounded-lg p-4 border border-green-100">
<div class="flex items-center gap-2 mb-2">
<span class="bg-yellow-100 text-yellow-700 text-xs font-bold px-2 py-1 rounded-full">2x</span>
<span class="font-semibold text-gray-900">Advanced Models</span>
</div>
<p class="text-gray-600 text-sm">More capable models for complex tasks. 1 token = 2 credits.
</p>
</div>
<div class="bg-white rounded-lg p-4 border border-green-100">
<div class="flex items-center gap-2 mb-2">
<span class="bg-red-100 text-red-700 text-xs font-bold px-2 py-1 rounded-full">3x</span>
<span class="font-semibold text-gray-900">Premium Models</span>
</div>
<p class="text-gray-600 text-sm">Most powerful models for specialized tasks. 1 token = 3
credits.</p>
</div>
</div>
</div>
<p class="text-gray-700 leading-relaxed">
<strong>Example:</strong> If you use a 2x model and process 2,500 tokens, you'll consume 5,000 credits
from your monthly allowance. This multiplier system allows us to offer access to cutting-edge AI
models while keeping pricing fair across all plan levels.
</p>
</div>
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">
<i class="fa-solid fa-calendar text-green-600 mr-3"></i>Monthly Credit Limits by Plan
</h2>
<p class="text-gray-700 leading-relaxed mb-6">Each plan includes a monthly allocation of AI credits that
resets at the start of each billing cycle:</p>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100">
<div class="flex items-center gap-3">
<span class="w-24 text-sm font-medium text-gray-500">Hobby</span>
<span class="font-semibold text-gray-900">50,000 credits</span>
<span class="text-gray-500 text-sm">/ month</span>
</div>
<span class="text-green-600 text-sm font-medium">Included</span>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100">
<div class="flex items-center gap-3">
<span class="w-24 text-sm font-medium text-gray-500">Starter</span>
<span class="font-semibold text-gray-900">100,000 credits</span>
<span class="text-gray-500 text-sm">/ month</span>
</div>
<span class="text-green-600 text-sm font-medium">Included</span>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100">
<div class="flex items-center gap-3">
<span class="w-24 text-sm font-medium text-gray-500">Professional</span>
<span class="font-semibold text-gray-900">10,000,000 credits</span>
<span class="text-gray-500 text-sm">/ month</span>
</div>
<span class="text-green-600 text-sm font-medium">Included</span>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100">
<div class="flex items-center gap-3">
<span class="w-24 text-sm font-medium text-gray-500">Enterprise</span>
<span class="font-semibold text-gray-900">50,000,000 credits</span>
<span class="text-gray-500 text-sm">/ month</span>
</div>
<span class="text-green-600 text-sm font-medium">Included</span>
</div>
</div>
</div>
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">
<i class="fa-solid fa-bolt text-green-600 mr-3"></i>Credit Top-Ups
</h2>
<p class="text-gray-700 leading-relaxed mb-4">
Need more credits than your monthly allowance provides? You can purchase one-off credit top-ups at
any time. These are instant and never expire, giving you flexibility for large projects or
unexpected needs.
</p>
<div class="bg-green-50 rounded-xl p-6 border border-green-200 mb-4">
<h3 class="font-semibold text-gray-900 mb-3">Plan Discounts on Top-Ups</h3>
<p class="text-gray-700 text-sm mb-4">Paid plan subscribers receive automatic discounts on credit
top-ups:</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white rounded-lg p-4 border border-green-100">
<div class="flex items-center gap-2 mb-2">
<span class="font-semibold text-gray-900">Professional Plan</span>
</div>
<p class="text-gray-600 text-sm">2.5% discount on all top-up purchases.</p>
</div>
<div class="bg-white rounded-lg p-4 border border-green-100">
<div class="flex items-center gap-2 mb-2">
<span class="font-semibold text-gray-900">Enterprise Plan</span>
</div>
<p class="text-gray-600 text-sm">5% discount on all top-up purchases.</p>
</div>
</div>
</div>
<p class="text-gray-700 leading-relaxed">
Top-ups can be purchased from your account settings or by visiting the <a href="/topup"
class="text-green-700 font-medium hover:underline">token top-ups page</a>. Payment is processed
securely through Dodo Payments, and credits are added to your account immediately after successful
payment.
</p>
</div>
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50 mb-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">
<i class="fa-solid fa-exclamation-circle text-green-600 mr-3"></i>What Happens When You Run Out?
</h2>
<p class="text-gray-700 leading-relaxed mb-4">
When you approach or exceed your monthly credit limit, you'll receive notifications in the builder
interface. You have several options:
</p>
<div class="space-y-4">
<div class="flex items-start gap-4 p-4 bg-gray-50 rounded-xl">
<div
class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
<i class="fa-solid fa-arrow-up text-green-700"></i>
</div>
<div>
<h4 class="font-semibold text-gray-900 mb-1">Upgrade Your Plan</h4>
<p class="text-gray-700 text-sm">Choose a higher plan with more monthly credits. Changes
take effect immediately.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 bg-gray-50 rounded-xl">
<div
class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
<i class="fa-solid fa-bolt text-green-700"></i>
</div>
<div>
<h4 class="font-semibold text-gray-900 mb-1">Purchase a Top-Up</h4>
<p class="text-gray-700 text-sm">Buy additional credits instantly. These never expire and
are available immediately.</p>
</div>
</div>
<div class="flex items-start gap-4 p-4 bg-gray-50 rounded-xl">
<div
class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
<i class="fa-solid fa-clock text-green-700"></i>
</div>
<div>
<h4 class="font-semibold text-gray-900 mb-1">Wait for Reset</h4>
<p class="text-gray-700 text-sm">Your credits reset at the start of your next billing
cycle. Check your account for your exact reset date.</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-3xl p-8 border border-gray-100 shadow-xl shadow-gray-200/50">
<h2 class="text-2xl font-bold text-gray-900 mb-6">
<i class="fa-solid fa-circle-question text-green-600 mr-3"></i>Quick Reference
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-semibold text-gray-900 mb-3">Average Usage Examples</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center gap-2">
<i class="fa-solid fa-check text-green-600"></i>
Small plugin (simple features): ~5,000-15,000 credits
</li>
<li class="flex items-center gap-2">
<i class="fa-solid fa-check text-green-600"></i>
Medium plugin (moderate complexity): ~15,000-50,000 credits
</li>
<li class="flex items-center gap-2">
<i class="fa-solid fa-check text-green-600"></i>
Large plugin (complex features): ~50,000-200,000 credits
</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-gray-900 mb-3">Tips to Maximize Credits</h3>
<ul class="space-y-2 text-sm text-gray-700">
<li class="flex items-center gap-2">
<i class="fa-solid fa-check text-green-600"></i>
Use standard models for simple tasks
</li>
<li class="flex items-center gap-2">
<i class="fa-solid fa-check text-green-600"></i>
Review code before regeneration
</li>
<li class="flex items-center gap-2">
<i class="fa-solid fa-check text-green-600"></i>
Break large projects into smaller plugins
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<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 md:grid-cols-4 gap-12 mb-16">
<div class="col-span-2 md: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">
<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="/templates.html" 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>
<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.</p>
</div>
</div>
</footer>
<script>
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', (e) => {
e.stopPropagation();
mobileMenu.classList.toggle('hidden');
const isOpen = !mobileMenu.classList.contains('hidden');
mobileMenuBtn.innerHTML = isOpen ?
'<i class="fa-solid fa-times text-xl"></i>' :
'<i class="fa-solid fa-bars text-xl"></i>';
});
document.addEventListener('click', (e) => {
if (mobileMenuBtn && mobileMenu) {
if (!mobileMenuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
mobileMenu.classList.add('hidden');
mobileMenuBtn.innerHTML = '<i class="fa-solid fa-bars text-xl"></i>';
}
}
});
// Hide upgrade section for enterprise users
async function checkPlanAndHideUpgrade() {
try {
const response = await fetch('/api/me');
if (response.ok) {
const data = await response.json();
const plan = (data.account?.plan || '').toLowerCase();
if (plan === 'enterprise') {
const upgradeSection = document.querySelector('h4.font-semibold.mb-1');
if (upgradeSection && upgradeSection.textContent === 'Upgrade Your Plan') {
const parent = upgradeSection.closest('.bg-gray-50.rounded-xl');
if (parent) {
parent.style.display = 'none';
}
}
}
}
} catch (err) {
console.error('Failed to check plan:', err);
}
}
checkPlanAndHideUpgrade();
</script>
</body>
</html>