An API (Application Programming Interface) is a defined contract that lets two pieces of software exchange data and trigger actions. For websites, APIs are the connective tissue that powers everything from payment checkouts and contact forms to live search, maps, and AI features. They let your site reach beyond its own database to pull in or push out information on demand.
What an API Actually Does
At its simplest, an API is a messenger. Your website sends a structured request to a server, the server processes it, and a structured response comes back. The website never needs to know how the other system works internally, only how to ask. This separation is what makes the modern web composable. A Framer or Webflow site, a WordPress blog, or a custom Next.js application can all consume the same API to display the same data in different ways.
Why Designers and Builders Should Care
You do not need to write APIs from scratch to benefit from them. Even a one-page marketing site likely calls a half-dozen APIs every visit: analytics, fonts, embedded video, form submission, CDN edge functions. Understanding what an API is, how it is structured, and where it can fail will save you hours of debugging and unlock features that would otherwise require a developer.
The Three Main API Styles
Most APIs on the public web fall into one of three categories. Picking the right style for a project depends on the data shape, the audience, and the tooling.
REST
REST (Representational State Transfer) is the dominant pattern. A REST API exposes resources at URLs and uses standard HTTP verbs: GET to read, POST to create, PUT or PATCH to update, DELETE to remove. The response is almost always JSON. WordPress, Stripe, Mailchimp, HubSpot, and most SaaS tools expose REST APIs because they are easy to cache, easy to document, and trivial to call from any language.
GraphQL
GraphQL flips the model. Instead of multiple endpoints returning fixed shapes, GraphQL exposes a single endpoint and lets the client ask for exactly the fields it needs. This avoids the over-fetching problem REST sometimes causes. Shopify, GitHub, and many headless CMS platforms ship GraphQL APIs. The trade-off is more upfront complexity and harder caching.
Webhooks
A webhook is the inverse of a normal API call. Instead of your site asking for data, an external system pushes data to your site when an event happens. Stripe fires a webhook on payment, Calendly fires one on booking, Mailchimp fires one on a new subscriber. Webhooks are how real-time integrations are built without polling.
How a Website Calls an API
From the browser, the standard tool is the Fetch API in JavaScript. From a server, the same call can happen in any language, often through an SDK that wraps the raw HTTP for you. A minimal browser call looks like this conceptually: build a request URL, attach an authorization header, send it, parse the JSON response, render the result. Modern frameworks like React and Next.js add caching, error boundaries, and loading states on top.
Authentication Patterns
- API keys — a long random string sent as a header. Simple, common for server-to-server calls.
- OAuth 2.0 — the user grants your site permission to act on their behalf. Used by Google, LinkedIn, and most consumer platforms.
- JWT (JSON Web Tokens) — signed tokens that prove identity without a database lookup. Common for single-page apps.
- Bearer tokens — short-lived credentials, often issued after an OAuth flow.
Status Codes That Matter
HTTP responses come with a numeric code. The ones to memorize are 200 (OK), 201 (created), 204 (no content), 400 (bad request), 401 (unauthorized), 403 (forbidden), 404 (not found), 429 (rate limited), and 500 (server error). Reading the code first tells you whether the problem is in your request, your credentials, or the remote server.
Common Website Integrations
Most marketing and product sites use the same handful of APIs. Recognizing the pattern means you can swap providers without rewriting the front end.
Payments
Stripe and similar processors expose REST APIs and ship hosted checkout pages so card data never touches your servers. The integration is usually three calls: create a session, redirect the user, listen for the webhook that confirms payment.
Email and CRM
HubSpot, Mailchimp, and ConvertKit accept new contacts through a POST request from your form. The same APIs let you tag, segment, or trigger automations. For a Framer or Webflow site this is often the only backend you need.
Maps and Location
Google Maps and Mapbox both expose JavaScript libraries on top of REST APIs. You load the script, instantiate a map, and call methods to drop markers or fetch directions. Pricing is usage-based, so caching matters.
AI and Content
AI providers expose simple REST endpoints that take a prompt and return generated text, images, or embeddings. The same pattern powers chat widgets, semantic search, and auto-tagging.
Security Basics
An exposed API key is a leaked credential. Treat it the way you treat a password.
Never Put Secrets in the Browser
Any value shipped to the client is visible. Server-only keys belong on a server, an edge function, or a serverless route, never in a public JavaScript bundle. The pattern is: browser calls your own backend, your backend calls the third party with the secret key.
Rate Limits and Quotas
Most APIs cap how often you can call them. A 429 response means you have exceeded the limit. Cache aggressively, deduplicate requests, and add exponential backoff on retries. Read the documentation to understand monthly quotas before you ship a feature that could exhaust them in a week.
CORS
Cross-Origin Resource Sharing is the browser security rule that controls which domains can call which APIs. If you see a CORS error in the console, the remote server has not whitelisted your domain. Either proxy the request through your own backend or contact the provider.
How to Evaluate an API Before You Commit
Not every API is worth integrating. Before you build, check a handful of things.
- Documentation quality — clear examples, copy-paste snippets, an interactive playground.
- Versioning policy — how breaking changes are announced and how long old versions are supported.
- Status page — uptime history and incident communication.
- Pricing — per-call, per-month, or revenue-share. Model it for your expected traffic.
- SDKs — official libraries in your language remove a lot of work.
- Community — Stack Overflow answers, GitHub issues, and tutorials signal a healthy ecosystem.
Testing and Debugging APIs
The tools every builder should have installed:
- Postman or Insomnia — visual REST clients for testing endpoints.
- curl — the command-line workhorse. Every API documentation page should ship a curl example.
- Browser DevTools Network tab — inspect real calls your site is making, including headers and responses.
- Webhook.site — a free inspector for webhook payloads during development.
Logging requests and responses on the server, with secrets redacted, is the single highest-leverage habit for debugging production issues.
APIs and SEO
Content fetched from an API at runtime can be invisible to search engines if you do not render it correctly. Static site generation, server-side rendering, and incremental static regeneration solve this. For a deeper look at the trade-offs, see our guide to SSG vs SSR vs ISR and the broader JavaScript SEO guide. The short version: if a search bot has to wait for an API call to see your content, you will lose ranking. Pre-render or cache.
The 2026 Landscape
Three shifts are worth noting. Edge computing has made API calls faster by running them geographically close to the user. AI APIs have collapsed the cost of generating content and embeddings, opening new product categories. And the rise of typed APIs (tRPC, GraphQL with strict schemas) is making integrations safer because the contract is enforced at build time, not runtime.
Frequently Asked Questions
What is the difference between an API and a database?
A database stores data. An API is the interface that lets other software read from or write to that data (or trigger actions). You almost never expose a database directly to the internet — an API sits in front of it to enforce permissions, validation, and rate limits.
Do I need to know how to code to use APIs on my website?
For platforms like Framer, Webflow, and WordPress, most common API integrations are handled by built-in features or plugins — payments, forms, embeds, analytics. You only need to write code when you want a custom integration that no existing tool covers, and even then, low-code automation tools like Zapier and Make can bridge most gaps.
How do I keep my API keys secure?
Store them in environment variables on your server, never in client-side JavaScript or a public repository. Rotate them regularly, scope them to the minimum permissions needed, and use a secrets manager if you have more than a handful of services. If a key is ever committed to version control, revoke it immediately — the public web is scraped for leaked credentials constantly.
What is a REST API in simple terms?
A REST API is a way to read and write data over the web using standard HTTP verbs. You send a GET request to a URL to read something, a POST to create something, a PUT or PATCH to update, and a DELETE to remove. The data comes back as JSON. It is the most common style of API on the public internet.
If you want a website that integrates cleanly with the APIs your business already depends on — payments, CRM, AI, maps — see our pricing or get in touch to discuss your stack.