typeform website integration

Typeform Website Integration: From Copy Paste to Reliable Webhooks

Start with Typeform’s copy paste embed, move to the Embed SDK for UX control, then use webhooks or the Responses API for reliable server side workflows.

The fastest way to integrate Typeform with your website depends on what you need: paste the HTML snippet from Typeform’s Share → Embed menu for a quick proof-of-concept, use the Embed SDK when you need timed popups, chaining, or React lifecycle control, and wire webhooks or the Responses API when you need reliable server-side processing. Many teams combine these approaches in stages, often on a platform like WebsitePublisher that hosts the surrounding website or app for you.

TL;DR:

Publish the form before embedding it; later published edits update existing snippets, and separate codes let one form use different modes across pages.

Use inline or full page for dedicated survey pages, while popups, sliders, popovers, and side tabs suit triggered or persistent feedback.

For timed openings, chained forms, or single page app navigation, use the Embed SDK and call unmount on route changes to remove orphaned iframes.

Serve embeds over HTTPS, allow Typeform in both frame source and script source directives, and use inline on mobile to keep inline forms from switching to fullscreen on phones.

Use webhooks for immediate production processing; reserve the Responses API for pulls, backfills, or audits, with up to 1,000 responses per request and pagination tokens.

Where to get your Typeform embed code
Picking the right embed mode for your page
Quick HTML embed: the data-tf snippet and key attributes
The Embed SDK for advanced control
Making embeds responsive on every screen
Fixing security, CSP, and overlap issues
Handling responses on your server
Common mistakes in Typeform integrations
Simplify your integration stack with WebsitePublisher
FAQ
Sources
Essential Typeform documentation for integration

Where to get your Typeform embed code

Open your form in Typeform, click Share, then select Embed in a web page, and hit Start embedding. Typeform generates the HTML snippet right there, ready to paste into your site’s code.

A few things catch people off guard the first time:

Published edits update automatically wherever the embed lives, so you never need to regenerate the code after a content change.
You can create multiple embed codes for the same form, each set to a different embed mode, which is handy when one page needs an inline form and another needs a popup (Embed your form in a Webflow site).
Every live embed snippet contains data-tf- attributes, so if you ever need to find or remove an embed buried in your codebase, search for that string first.

Forms must be published before they show up correctly in any embed, a step that trips up a surprising number of first-time integrations.

Picking the right embed mode for your page

Typeform’s embed library supports six display types: inline, full-page, popup, slider, popover, and side tab, and each one fits a different job on your site (Embed SDK).

Inline or full-page: best for a dedicated landing page or a long-form survey where the form is the main content.
Popup or slider: good for a microsurvey you want to trigger without sending visitors to a new page.
Popover or side tab: suited to persistent feedback widgets or exit-intent capture that stays out of the way until triggered.

Reach for the SDK’s modal options when you want more than a static trigger, like a timed popup, a form that opens after a scroll event, or multiple forms chained together without a page reload (Vanilla Embed Library - Configuration).

Pro tip: Generate a separate embed code for each page where the same form needs different behavior, rather than reusing one snippet and fighting it with custom CSS.

One form branching into page-specific embeds

Quick HTML embed: the data-tf snippet and key attributes

For most sites, the copy-paste snippet is all you need. Paste the <div data-tf-widget> or <a data-tf-popup> element where you want the form to appear, then include the embed script, either self-hosted or from the CDN, once per page (packages/embed/README.md).

A handful of data-tf- attributes cover most customization needs:

data-tf-open and data-tf-open-value: control timed or event-based opening.
data-tf-size: sets the popup size as a percentage (desktop only; popups open fullscreen on phones).
data-tf-hide-footer: hides the form’s progress bar and navigation buttons.
data-tf-redirect-target: sets where a redirect configured in the form opens (_self, _parent, _top, or _blank).
data-tf-inline-on-mobile: keeps an inline embed inline on small screens instead of switching to fullscreen, and skips the placeholder welcome screen (Vanilla Embed Library - Configuration).

Publish your form, copy the embed code, paste it into your page, and test it on an HTTPS-served site before calling it done.

The Embed SDK for advanced control

When data attributes alone aren’t enough, the @typeform/embed package or its CDN equivalent gives you programmatic control. Import the relevant CSS file, popup.css or widget.css, and call createWidget, createPopup, createSlider, createSidetab, or createPopover depending on the mode you need (packages/embed/README.md).

These functions return controls you’ll use throughout the component’s life:

open, close, toggle: trigger a popup, slider, popover, or side tab programmatically from your own UI events.
unmount: call this on route changes in a single-page app to avoid orphaned iframes.
refresh: call this after a layout shift so the embed recalculates its size correctly.

An inline widget from createWidget returns only refresh and unmount. The SDK also accepts iframeProps, hidden field values, and callbacks like onReady and onSubmit, plus a redirectTarget option; set it to _self to chain into the next form inside the same embed (Vanilla Embed Library - Configuration).

Pro tip: Reach for the SDK, not the static snippet, whenever you need timed opens, preventReopenOnClose, or a chain of forms that stays on one page.

Making embeds responsive on every screen

A form that looks great on desktop can clip awkwardly on mobile if you skip a couple of settings. Set data-tf-inline-on-mobile so an inline form stays inline on small screens instead of switching to fullscreen, and let the embed’s height adjust automatically instead of locking it to a fixed pixel value (Embed SDK).

Size the container with percentage widths and a max-width rule, not a fixed pixel width that breaks on narrower viewports.
Call the SDK’s refresh method any time your page layout shifts after the embed loads, so the iframe recalculates correctly.
Check the welcome screen specifically on mobile, since it’s often the first thing a visitor sees and the easiest place for cramped styling to show up.

Pro tip: Test on at least one real phone, not just a browser emulator. Emulators tend to miss keyboard overlap issues that show up on actual touchscreens.

Fixing security, CSP, and overlap issues

Typeform will not render on pages served over plain HTTP. Embeds work only on HTTPS or on HTTP localhost during local development, a Content Security Policy restriction built into how Typeform serves forms (Embed your form).

If your embed fails to load, check your site’s CSP headers and confirm Typeform’s domains are allowed in both frame-src and script-src.
Confirm your page is actually served over HTTPS, not just redirected there, since some staging environments silently serve mixed content.
If a popup or slider renders but appears hidden behind your header or navigation, remember the Typeform modal uses a default z-index of 10001; check whether your fixed header has a higher value and adjust it so the form sits on top (typeform.com).

Handling responses on your server

For any workflow beyond a simple contact form, decide early whether you need responses pushed to you or whether you’ll pull them on demand.

Webhooks push each response to your backend the moment it’s submitted, which keeps your processing decoupled from the client and is the more reliable choice for production workflows (typeform.com).
Responses API lets you retrieve data on demand, useful for backfilling or audits; a single request can return up to 1,000 responses, and you can page through larger sets using the before and after tokens (Responses API walkthroughs).
API access requires an access token and, for registered apps, an OAuth flow (Create applications that integrate with Typeform’s APIs). The Embed SDK itself needs no token since it only renders the form client-side (Get started).

Common mistakes in Typeform integrations

Recurring mistakes include forgetting to publish a form after editing it (so the embed shows stale content), embedding on an HTTP page and wondering why nothing renders, and skipping unmount in single-page apps, which leaves orphaned iframes behind after route changes.

The sequence that tends to work best is simple: start with the copy-paste embed to validate content and placement, move to the SDK once you need timed behavior or chaining, and set up webhooks for anything that needs to reach your backend reliably, reserving the Responses API for occasional pulls rather than your main data path.

Simplify your integration stack with WebsitePublisher

Wiring a form embed is one piece of a bigger puzzle: you still need somewhere to host the pages around it, capture leads, and keep your design consistent across pages. WebsitePublisher, the AI web platform, lets your AI assistant, whether that’s ChatGPT, Claude, Gemini, or another tool, build and publish the surrounding website or app through the WebsitePublisher connector, with changes going live immediately and no separate deploy step.

Websitepublisher

Built-in forms and integrations cover lead capture, so you can connect form submissions to the rest of your stack.
A visual editor lets you adjust layout and branding around your embedded form directly in the browser, without re-generating content.
Reusable components keep the pages around your form consistent if you’re running the same embed across several landing pages.

Compare plans on the WebsitePublisher pricing page, or see how the platform fits into a full site build on the AI website builder page.

FAQ

What is the fastest way to add Typeform to a website?

The fastest method is the copy-paste HTML embed: go to Share → Embed in a web page, click Start embedding, and paste the generated snippet into your site (Embed SDK). It works for inline, popup, and other display modes without writing any JavaScript.

Why won’t my embedded Typeform load on my site?

The most common cause is serving your page over HTTP instead of HTTPS, since Typeform’s Content Security Policy blocks embeds on non-secure pages, allowing only HTTPS or localhost during development (Embed your form). A restrictive CSP header that excludes Typeform’s domains from frame-src or script-src causes the same failure.

How do I make a Typeform embed responsive on mobile?

Add the data-tf-inline-on-mobile attribute so an inline form stays inline on small screens instead of switching to fullscreen, and avoid fixing the container to a pixel width (Embed SDK). Letting the embed height adjust automatically prevents clipped content on narrower viewports.

Should I use webhooks or the Responses API for form data?

Use webhooks when you want each response pushed to your backend immediately, which keeps processing decoupled from the client and suits production workflows (typeform.com). Use the Responses API when you need to pull data on demand, such as for backfilling or audits, with up to 1,000 responses per request and pagination tokens for larger sets (Responses API walkthroughs).

Does embedding a Typeform require an API key?

No, a basic embed created through the Embed SDK or the copy-paste snippet does not require an access token. Access tokens and OAuth are needed only when you call Typeform’s Create, Responses, or Webhooks APIs directly (Create applications that integrate with Typeform’s APIs).

Sources

Essential Typeform documentation for integration

For deeper reference, these are the primary Typeform sources this article draws on, covering embed configuration, HTTPS and CSP requirements, and the developer APIs.