Claude Code көмегімен әзірлеушісіз пейвол апгрейд терезесін қалай жасауға болады
Claude Code көмегімен жұмсақ пейвол: тегін тариф пайдаланушысы ақылы функцияға жеткенде терезе апгрейдті түсіндіріп, тарифтер бетіне апарады — тариф бойынша бағытталған, статистикасы бар және релизсіз түзетіледі.
- Уақыты
- ● 20 минут
- Бағасы
- 14 күн тегін, картасыз
- Кім орындайды
- Сіз және Claude Code
Мысал: Claude Code көмегімен апгрейд терезесі
Claude Code арқылы жүргізілетін шот-фактура сервисі. «Тұрақты ету» (data-tour="recurring") басқан тегін тариф пайдаланушылары «Тұрақты шоттар — Pro тарифінде» деген жазуды және /pricing бетіне сілтемені көреді.
Бұл формат Pro тарифіне кіреді. Әрбір жаңа аккаунт барлық формат пен аудитория ережелері бар 14 күндік тегін сынақ кезеңінен басталады, карта керек емес. Сынақ біткенде ештеңе өшірілмейді, жарияланғандар көрсетіле береді, ал турлар мен кеңестер Free тарифінде тегін болып қалады.
Claude Code көмегімен пейвол терезесін қадам-қадаммен қосу
- Қадам 01
Clew кодын көшіріңіз
Тегін тіркеліңіз немесе кіріңіз, сайтыңызды қосып, админкадағы Шолу бөлімін ашыңыз. Виджеттен әлі сигнал келген жоқ. карточкасындағы жолды басыңыз — ол белгінің орнына сайтыңыздың нақты кілтімен көшіріледі.
<!-- Clew: САЙТ_КІЛТІН_ҚОЙЫҢЫЗ орнына Admin > Шолу бөліміндегі сайт кілтін қойыңыз --> <script src="https://tryclew.io/widget/САЙТ_КІЛТІН_ҚОЙЫҢЫЗ.js" async></script>

Қадам 1 · интерфейс сызбасы - Қадам 02
Жобада Claude Code-ты іске қосыңыз
Жоба қалтасында
claudeорындаңыз (немесе IDE-де Claude Code-ты ашыңыз). Ол нақты репозиториймен жұмыс істейді және файлдарды түзетпес бұрын рұқсат сұрайды.
Қадам 2 · интерфейс сызбасы - Қадам 03
Промптты кілтіңізбен жіберіңіз
САЙТ_КІЛТІН_ҚОЙЫҢЫЗорнына кілтті қойып, промптты жіберіңіз.Осы қолданбаға Clew онбординг виджетін қос. Мына тегті дәл осы күйінде бір рет қой, ол әр бетте, соның ішінде бетті қайта жүктемей ауысқаннан кейін де жүктелсін: <script src="https://tryclew.io/widget/САЙТ_КІЛТІН_ҚОЙЫҢЫЗ.js" async></script> Жобаның түбір HTML-ін немесе layout-ын тап (Vite үшін index.html, Next.js App Router үшін next/script бар app/layout.tsx, Nuxt үшін nuxt.config.ts ішіндегі app.head.script, SvelteKit үшін src/app.html, серверлік рендеринг үшін базалық шаблон) және тегті соған қой. Жүйеге кірген пайдаланушы жүктелгенде және жазылым өзгерген сайын Clew.identify({ plan: <ағымдағы тариф id-і жол түрінде, мысалы "free"> }) шақыр. Виджет әлі жүктелмеген болуы мүмкін болса, алдымен кезек заглушкасын жарияла: window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(["identify", p]); } }; содан кейін window.TutorKit.identify(...) шақыр. Ақылы функциялардың батырмаларына data-tour атрибутын қос (мысалы data-tour="export"). Өзіңнен төлем, бұғаттау немесе пейвол логикасын қоспа және батырмалардың әрекетін өзгертпе. Ережелер: - Скрипт URL-ін берілгендей қолдан. Оны жүктеп алма, бандлға жинама және npm пакетін орнатпа. - Жобада Content-Security-Policy бапталса, https://tryclew.io мекенжайын script-src және connect-src тізіміне қос. - Басқа ештеңені өзгертпе және диффті көрсет.
Қадам 3 · интерфейс сызбасы - Қадам 04
Түзетулерді мақұлдап, шығарыңыз
Ұсынылған түзетулерді оқып, мақұлдаңыз, содан кейін әдеттегідей коммит жасап, деплой етіңіз — немесе Claude Code-тан pull request ашуды сұраңыз.

Қадам 4 · интерфейс сызбасы - Қадам 05
Апгрейд терезесін жазыңыз
Clew-де Сценарийлер → + Жаңа сценарий ашып, Модальды терезе таңдаңыз. Бір қадам: пайдасы жазылған тақырып («Excel-ге жүктеу — Pro тарифінде»), құндылық туралы бір сөйлем, ал Сілтеме мәтіні / Сілтеме URL-і өрістерінде — батырма және тарифтер немесе төлем бетіңіздің мекенжайы.

Қадам 5 · интерфейс сызбасы - Қадам 06
Қайда, қашан және кімге көрсетуді таңдаңыз
Сол редакторда Қай жерде көрсету (бет URL-і), Қашан көрсету, Аудиторияны таңдау және Жиілік өрістерін толтырыңыз. Жоғарыдағы мысалдың баптаулары:
Баптау Мәні Формат Модальды терезе Қай жерде көрсету (бет URL-і) Префикс бойынша бөлім /invoicesҚашан көрсету Элемент басылғанда: [data-tour="recurring"]Аудиторияны таңдау Қасиет planтеңfreeЖиілік Әр кіргенде 
Қадам 6 · интерфейс сызбасы - Қадам 07
Жариялап, сайтта тексеріңіз
Күйі өрісін Жарияланған күйіне қойып, сақтаңыз. Бетті жасырын терезеде ашыңыз: Clew «бір рет» көрсетілетін элементті кім көргенін есте сақтайды, сондықтан қарапайым терезеде ол шықпауы мүмкін. Көрсетулер, өтулер мен тоқтаған жерлер тур статистикасында шығады.

Қадам 7 · интерфейс сызбасы
Пейвол Claude Code көмегімен: ескеретін жайттар
Claude.ai артефактілері — сіздің қолданбаңыз емес
Claude.ai чатындағы немесе артефактісіндегі код құмсалғышта орындалады және пайдаланушыларыңызға жетпейді. Clew-ді Claude Code арқылы нақты жобаға қойыңыз — өзгеріс продакшенге сол жерден кетеді.
Кілтті CLAUDE.md файлына салмаңыз
Сайт кілті жария, бірақ оның орны — бетте, басқа репозиторийлерде қайта қолданылатын жоба нұсқауларында емес.
Терезе қолжетімділікті тексеруді алмастырмайды
Қолданбада ақылы функция тегін пайдаланушыларға қолжетімді болса, терезе шығады, бірақ оның астында функция бәрібір орындалады. Тариф серверде тексерілетініне көз жеткізіңіз; терезе — тек хабарлама.
Төлемнен кейін қасиетті жаңартыңыз
Қасиеттер қолданба жаңа мән жібергенше браузерде сақталады. Тарифке сәтті өткеннен кейін Clew.identify({ plan: "pro" }) шақырыңыз, әйтпесе жаңа клиент терезені көре береді.
Сұрақтар мен жауаптар
Терезе тұрақты шотты баптауды тоқтата ма?
Жоқ. Шешімді қолданба қабылдайды; ең дұрысы — батырма тегін пайдаланушыларға бас тартады, ал терезе себебін түсіндіреді.
Claude-тың ақылы жазылымы керек пе?
Claude Code Claude жазылымдарымен және API арқылы қолжетімді; Clew үшін қайсысы екенінің маңызы жоқ.
Төлемді Clew қабылдай ма?
Жоқ. Батырма сіздің тарифтер немесе төлем бетіңізге апарады; Clew карталармен, жазылымдармен және қолжетімділікпен жұмыс істемейді.
Пейвол терезесі тегін бе?
Модальды терезе форматы мен аудитория ережесі керек — екеуі де Pro тарифінде. 14 күндік сынақ кезеңінде олар бар, картасыз.
Claude Code көмегімен тағы не қосуға болады
- Claude Code көмегімен әзірлеушісіз өнім турын қалай жасауға болады
- Claude Code көмегімен әзірлеушісіз онбординг чек-парағын қалай қосуға болады
- Claude Code көмегімен әзірлеушісіз пайдаланушылар онбордингін қалай баптауға болады
Пейвол басқа платформаларда
- Google Tag ManagerGoogle Tag Manager арқылы әзірлеушісіз пейвол апгрейд терезесін қалай жасауға болады
- LovableLovable қолданбасында әзірлеушісіз пейвол апгрейд терезесін қалай жасауға болады
- CursorCursor-да жасалған қолданбада әзірлеушісіз пейвол апгрейд терезесін қалай жасауға болады
- ChatGPT CodexChatGPT Codex көмегімен әзірлеушісіз пейвол апгрейд терезесін қалай жасауға болады
- Qwen CodeQwen Code көмегімен әзірлеушісіз пейвол апгрейд терезесін қалай жасауға болады