API Works in Preview but Not on the Live Website? Compare Production Configuration

Work from the safest step to the harder repair.

1. Step 1. Open the provider's official developer or integration page and identify the exact product or connection type.
2. Step 2. Work one non-sensitive screen at a time. Screenshots can help an AI assistant explain visible fields and the next step.
3. Step 3. Stop sharing screenshots when secrets, tokens, passwords, private keys, signing secrets, session values, or sensitive personal data appear.
4. Step 4. Keep private credentials in protected server-side secret or environment-variable storage, never public frontend code.
5. Step 5. Implement the smallest connection, test normal and error behavior, and inspect sanitized logs before production.
6. Step 6. Publish or deploy only after verification, then test the live domain. For exact code, use Genesis Code Doctor's Code Store or Request a Code.

Need the actual code? Go to GenesisCodeDoctor.com to search the Code Store or request code for the exact platform, error, and repair you are working on.

Use evidence to decide the next move.

1. 1. Can you reproduce the exact problem? If no, collect evidence before editing. If yes, preserve the failing example.
2. 2. Did something change immediately before the failure? If yes, inspect that revision, plugin/app, dependency, configuration, or deployment first.
3. 3. Is there a low-risk configuration or isolated code cause you can test first? If yes, start there. If no, move to logs, requests, dependencies, and architecture.
4. 4. Did the focused repair pass its checks and restore the original journey? If no, roll back or continue diagnosis. If yes, publish/deploy.
5. 5. Does the real production URL now pass the same test? If no, compare production environment and caching. If yes, record the verified repair.

A visual path from symptom to verified production.

Protect the working site first.

• Confirm the code matches your platform, framework, version, affected route, and exact failure before applying it.
• Read prerequisites and the README; never paste secrets, private customer data, tokens, cookies, or credentials into code or support conversations.
• Apply the smallest relevant change to the intended files only, then run the available build/typecheck/tests and the original user journey.
• Publish or deploy only after verification, test the live production URL, and keep the rollback point until the change is proven stable.

Do not turn a repair into a larger outage.

• Stop if the repair starts changing unrelated pages, layout, data, authentication, payments, or other working features outside the stated problem.
• Stop if you do not have a checkpoint, backup, commit, theme duplicate, or another recoverable known-good state.
• Stop if testing cannot distinguish whether the change actually fixed the original symptom.

Diagnose the exact failure before choosing a repair.

Genesis separates the visible symptom from the underlying technical cause. Run the supported diagnostic first, review the evidence, and then use a matching repair only when the failure is actually verified.

Platform scope

WordPress, Shopify, Wix/Velo, Webflow, React, Next.js, AI-built websites, and comparable platforms

Category

APIs & integrations made simple

Last updated

2026-09-21

Know the complexity before you edit.

Difficulty

Beginner

Change risk

Low

These labels describe implementation complexity and blast radius, not a guaranteed repair time.

Before you make the change

Continue from easy to harder.

• Website Problems? Start With the Easiest Fix First — Then Work Upward
• Before You Change Website Code: Create a Checkpoint, Backup, or Restore Point
• How to Verify a Website Fix: Before-and-After Testing That Actually Proves It
• Fixed the Website but Nothing Changed? Check the Publish Button and Production Build