TikTok

Use TikTok with Webflow to publish video content on your site, measure conversions, and keep website content aligned with your TikTok activity.

Webflow does not include built-in TikTok support. There is no native toggle for the TikTok Pixel, no automatic video feed component, and no pre-configured event tracking for TikTok ad campaigns. If you run TikTok ads or publish TikTok content, your Webflow site has no way to connect to that activity out of the box.

Connecting TikTok with Webflow fills that gap. You can embed individual TikTok videos on any page and install the TikTok Pixel for ad conversion tracking. Auto-updating TikTok feeds are supported through third-party widgets or API-based setups. Specific automation connections are also available for named Webflow triggers and TikTok actions. Automation tools and APIs extend the connection further for teams that need content syncing or server-side event tracking.

DTC brands and e-commerce teams use this integration to install the TikTok Pixel on Webflow landing pages and track ad-driven conversions. Content creators build portfolio sites with live TikTok feeds that update without manual work. Agencies and performance marketers connect TikTok ad data to Webflow sites for accurate conversion attribution and retargeting.

How to integrate TikTok with Webflow

What is TikTok? TikTok is a short-form video platform where users discover, create, and share content. For businesses, TikTok offers an advertising platform with campaign management, conversion tracking via the TikTok Pixel, and commerce tools including TikTok Shop. TikTok's developer platform provides APIs for video display, content posting, and server-side event tracking.

Teams connect TikTok with Webflow when they need their website to reflect their TikTok presence or measure ad-driven traffic. E-commerce brands install the TikTok Pixel to attribute purchases. Creators embed their latest videos as social proof. Marketers send form submission data back to TikTok to improve campaign targeting.

The TikTok-Webflow integration supports 3 approaches:

• Code Embed elements handle video embedding, Pixel installation, and third-party feed widgets without writing application code.
• Automation tools support specific connections with explicit Webflow triggers and TikTok actions, such as sending Webflow form submissions or order data to TikTok Conversions, or creating Webflow CMS items from TikTok Lead Ad submissions.
• The Webflow and TikTok APIs give you direct control over CMS content syncing, server-side event tracking, and dynamic video feeds, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add TikTok content with Code Embed elements

Code Embed elements are the most direct way to add TikTok functionality to a Webflow site. You can embed a single TikTok video, install the TikTok Pixel for ad tracking, or add a third-party widget that displays an auto-updating feed. All three paths use the same core workflow: paste a code snippet into a Code Embed element or into your custom code in head and body tags. Code Embed elements require a paid Webflow site plan.

Embed a single TikTok video

TikTok provides a native embed code for any public video. This approach works well for featuring a specific video on a landing page, blog post, or case study. The embed does not auto-update — if you want to feature a different video later, you replace the code manually.

To embed a TikTok video:

1. Open the video on tiktok.com in a desktop browser.
2. Click the Share button, then select Embed.
3. Copy the generated embed code (a <blockquote> tag and a <script> tag).
4. In Webflow, click + (Add Elements) in the left sidebar.
5. Drag a Code Embed element onto the canvas inside a container or section for responsive behavior.
6. Double-click the Code Embed element, paste the embed code, and click Save & Close.
7. Publish your site — TikTok embeds render only on the published site, not in the canvas preview.

For responsive sizing, wrap the Code Embed element in a Div Block with position: relative and padding-bottom: 56.25% to maintain a 16:9 aspect ratio. If the original video gets removed from TikTok, the embed will stop displaying on your site without notice, per TikTok's embed documentation.

Install the TikTok Pixel

The TikTok Pixel is a JavaScript snippet that tracks visitor behavior on your Webflow site and sends that data to TikTok Ads Manager. You need it for conversion tracking, retargeting audiences, and improving campaign performance. Webflow is not a TikTok certified Pixel partner, so installation is manual.

To install the TikTok Pixel site-wide:

1. In TikTok Ads Manager, go to Tools > Events > Web and create your Pixel.
2. Select Manual Setup and copy the base Pixel code snippet.
3. In Webflow, open Site Settings > Custom Code.
4. Paste the TikTok Pixel snippet into the Head Code field.
5. Click Save Changes and publish your site.

For page-specific tracking (such as a thank-you or order confirmation page), paste the Pixel code in Page Settings > Custom Code > Head on the target page instead. You can also manage the Pixel through Google Tag Manager if GTM is already installed on your Webflow site.

Webflow forms use AJAX submissions without page reloads, which means TikTok Pixel lead events will not fire automatically on form submission. You need a custom JavaScript listener targeting Webflow's form success callback to trigger events like CompleteRegistration or SubmitForm. Cookie consent is also required before the Pixel fires — TikTok requires advertisers to disable cookies when a visitor declines consent.

Display a TikTok feed with third-party widgets

Third-party widget services let you display an auto-updating TikTok feed on your Webflow site without managing API connections yourself. Services like EmbedSocial and Flockler are listed in Webflow's official integrations directory and support TikTok as a content source. Other options include Elfsight, Taggbox, and Curator.io.

To add a feed widget:

1. Create an account with the widget service and connect your TikTok account or enter a username or hashtag.
2. Use the visual configurator to select a layout (grid, slider, carousel) and customize colors and post count.
3. Copy the generated embed code snippet.
4. In Webflow, drag a Code Embed element onto the page and paste the snippet.
5. Click Save & Close and publish your site.

Widget snippets show only a placeholder box in the Webflow canvas. The actual feed renders on the published live site. Each widget service has its own subscription, so evaluate feed update frequency and layout options before committing.

Connect TikTok and Webflow with Zapier or IFTTT

This section is limited to specific, explicitly named Webflow triggers and TikTok actions.

Zapier offers a direct Webflow + TikTok Conversions connection. Webflow triggers include new form submissions, new orders, and updated orders (all instant). The TikTok Conversions action sends lead events with fields for account, CRM event set ID, lead status, TikTok lead ID, email, phone, TikTok Click ID, and CRM name.

IFTTT supports a TikTok Lead Ads + Webflow connection. When a new TikTok Lead Ad form submission comes in, IFTTT can create a Webflow collection item automatically. Several Webflow triggers on IFTTT require a Pro subscription, and some TikTok features use higher tiers.

Specific triggers and actions available across platforms:

• Webflow form submission → Send lead event to TikTok Conversions (Zapier)
• New Webflow order → Send conversion event to TikTok Conversions (Zapier)
• New TikTok Lead Ad submission → Create Webflow collection item (IFTTT)

API changes on either platform can break existing automations, so test connections periodically and monitor for failures.

Build with the Webflow and TikTok APIs

API integration gives you direct control over data flow between TikTok and Webflow. You can build automated CMS syncing for TikTok video content and implement server-side conversion tracking independent of browser-side Pixel limitations. Dynamic feeds that pull directly from TikTok's Display API are also possible. All API approaches require server-side development — TikTok's client_secret must never appear in client-side code, per TikTok's content sharing guidelines.

The relevant APIs are:

• TikTok's Display API handles video listing, user info, and embed link retrieval via OAuth 2.0
• TikTok's Events API handles server-side conversion tracking independent of browser cookies
• Webflow Data API handles CMS collections and item management
• Webflow webhooks trigger real-time events like form submissions to your server

Together, these APIs cover the main custom integration paths discussed below. A registered TikTok developer app with approved OAuth scopes is required before any API calls. App review takes several days to two weeks per TikTok's developer FAQ.

Sync TikTok videos to Webflow CMS

This approach automatically populates a Webflow CMS collection with your TikTok video data — including embed links, cover images, and metadata. A middleware service (such as a Vercel or Netlify serverless function) polls TikTok's Display API on a schedule and writes new items to Webflow's CMS API. TikTok webhooks do not fire for organically posted content, so scheduled polling is the only option for organic video sync.

To implement TikTok-to-CMS syncing:

1. Register a TikTok developer app and get approval for user.info.basic and video.list scopes at the TikTok Developer Portal.
2. Set up OAuth 2.0 token exchange on your server using POST https://open.tiktokapis.com/v2/oauth/token/. Store tokens server-side and refresh them before the 24-hour access token expiry.
3. Create a scheduled job that calls POST https://open.tiktokapis.com/v2/video/list/ with a cursor parameter to fetch new videos. Each response returns up to 20 videos.
4. Compare fetched video IDs against existing items in your Webflow CMS collection using GET /v2/collections/{collection_id}/items.
5. Create new CMS items with POST /v2/collections/{collection_id}/items/bulk, mapping TikTok fields like embed_link and cover_image_url to your collection fields.
6. Publish the new items with POST /v2/collections/{collection_id}/items/publish.

Webflow's API has lower request throughput than TikTok's Display API, so batch writes and schedule jobs during off-peak hours to avoid hitting limits. For high-traffic read scenarios, use api-cdn.webflow.com instead of api.webflow.com per Webflow's content delivery docs.

Track conversions with the TikTok Events API

The TikTok Events API sends conversion data server-to-server, bypassing browser-side limitations like ad blockers and cookie restrictions. This complements the TikTok Pixel for more accurate attribution. Since Webflow does not support server-side languages, you need external middleware to relay event data. For Webflow form-submission webhooks, this server-side path is available on Business plans and above.

To implement server-side conversion tracking:

1. Register a form_submission webhook on your Webflow site using POST /v2/sites/{site_id}/webhooks with {"triggerType": "form_submission"} via the Webflow Webhooks API.
2. Build a server endpoint that receives the Webflow webhook payload, extracts form fields (email, phone, page URL), and formats them per the TikTok Events API specification.
3. Forward the formatted event to TikTok's Events API through the business-api.tiktok.com business API environment. Exact implementation details depend on TikTok's business documentation and account access.

When running both the Pixel and Events API, use TikTok's deduplication to avoid double-counting events. The Signal Beam app in the Webflow Apps marketplace handles TikTok Events API integration with automatic deduplication and a no-code event mapper, if you prefer to skip custom development.

What can you build with the TikTok Webflow integration?

Integrating TikTok with Webflow lets you connect your TikTok presence and ad campaigns directly to your website without managing separate platforms manually.

• Social proof product pages: Embed TikTok UGC and product review videos on Webflow e-commerce pages using Code Embed elements or a feed widget. A beauty brand could display customer tutorial videos alongside the product listing so visitors see real usage before purchasing.
• Creator portfolio with live feed: Build a Webflow portfolio site that auto-populates a Collection List with your latest TikTok videos via API syncing. Brands and agencies visiting the site see up-to-date content performance without any manual updates.
• TikTok ad landing pages with conversion tracking: Install the TikTok Pixel on dedicated Webflow landing pages that match your TikTok ad creative. Track View Content, Add to Cart, and Purchase events to feed data back to TikTok Ads Manager for improved campaign targeting and retargeting audience building.
• Lead capture with CRM routing: Use Webflow forms to capture leads from TikTok ad traffic, then route submissions through the specific automation or API paths described above. A SaaS company running TikTok Search Ads could send demo request form data back to TikTok for lookalike audience building.

If you need more control over dynamic content syncing or multi-event server-side tracking, the API integration path covers those cases with full flexibility.