TikTok

How to integrate TikTok with Webflow

TikTok integration adds social proof to marketing sites, displays creator content automatically, and tracks conversions from advertising campaigns. Add TikTok videos to product pages to show real customer experiences, maintain updated creator portfolios without manual embed updates, or connect form submissions to TikTok's advertising platform for ROI measurement.

You can integrate TikTok with Webflow through official embed code in custom Code Embed elements, third-party widget services that automate feed updates, or API connections for programmatic access to video data and conversion tracking. Most implementations start with embeds since they require no authentication and work immediately.

Use TikTok's official embed methods

TikTok provides multiple official embedding options that work directly in Webflow's custom Code Embed elements. Embed individual videos to showcase specific content, or use creator profile embeds to display your latest videos with follower counts.

Access any TikTok video on desktop, click the Share button, and select Embed to generate the HTML code. Paste this code into a Code Embed element in Webflow. The embed adapts to container width and includes playback controls.

TikTok's embed options include:

• Individual video embeds using iframe-based embed code with customizable autoplay, loop, and control parameters
• Creator profile embeds that display up to 10 recent videos with profile embed functionality showing follower metrics
• Script-based embedding using <script async src="https://www.tiktok.com/embed.js"></script> with <blockquote class="tiktok-embed"> elements for better performance through built-in lazy loading
• oEmbed API for converting video URLs programmatically using GET https://www.tiktok.com/oembed?url={video_url} to receive ready-to-use HTML with metadata

Wrap embeds in a Div Block with position: relative and padding-bottom: 56.25% to maintain aspect ratio across devices.

TikTok's embed.js includes automatic intersection observer-based lazy loading. Videos only load when scrolling into viewport, reducing initial page weight. If you implement Content Security Policy headers, add script-src 'self' https://www.tiktok.com; frame-src 'self' https://www.tiktok.com; to allow TikTok resources.

Use third-party widget services

Third-party services like SociableKIT provide TikTok feed widgets that automatically update when you publish new videos. These widgets handle authentication with TikTok, fetch your content on a schedule, and generate embed code you add to Webflow's custom Code Embed elements.

Create a widget through the service's dashboard, customize the visual appearance and layout, then copy the provided embed code into Webflow. The widget manages content synchronization without requiring you to manually update embeds when publishing new TikTok videos.

Widget capabilities include:

• Automatic feed updates so new TikTok videos appear in your Webflow site without manual embed code updates
• Visual customization to configure grid layouts, thumbnail sizes, and brand colors through widget dashboards
• Template integration through pre-built Webflow templates that provide starting points with TikTok slider components using CMS Collections for managing video URLs

These services typically handle TikTok's OAuth authentication and rate limiting on their infrastructure. You receive a single embed code that displays dynamically updating content.

Build with Webflow and TikTok APIs

TikTok's developer platform provides multiple APIs for programmatic access to video data, user authentication, and business features. Connect Webflow form submissions to TikTok's conversion tracking to measure advertising ROI, or use the Display API to build custom video galleries with filtering and search capabilities.

API integration requires server-side implementation since TikTok lacks an official JavaScript SDK. All requests need OAuth 2.0 authentication with clientkey and clientsecret in signature headers according to TikTok's OAuth documentation. When syncing TikTok data to Webflow CMS, the Webflow API rate limits of 60-120 requests per minute constrain how quickly you can write videos to CMS Collections. TikTok's Display API allows 600 requests per minute for fetching video data.

Connect form submissions to TikTok conversion tracking

Track marketing performance by sending Webflow form submission data to TikTok's conversion tracking system. This requires implementing TikTok Pixel on your Webflow site and configuring server-side event tracking through custom backend services or Webflow webhooks.

Set up Webflow webhooks that trigger on form submission. Build a server-side endpoint that receives webhook data, formats it according to TikTok's Events API specification, and sends conversion events to TikTok. This connects your advertising spend to measurable outcomes like lead generation and form completions.

Implementation steps:

• Add TikTok Pixel base code to your Webflow site through custom code in site settings
• Configure event tracking for standard events like View Content, Add to Cart, and Purchase
• Set up webhook triggers in Webflow for form submissions
• Build server-side endpoint to receive Webflow webhooks and transform data
• Send formatted conversion events to TikTok Events API with proper authentication
• Verify event tracking through TikTok's Events Manager dashboard

User submits Webflow form, Webflow webhook fires, your server receives webhook payload, server extracts form data like email and name, server formats as TikTok conversion event, server sends to TikTok Events API, and conversion appears in TikTok Ads Manager attributed to campaign.

Build custom video galleries with Display API

The TikTok Display API provides access to user profile data and video lists through authenticated endpoints like /v2/user/info/ and /v2/video/list/. Build custom video galleries in Webflow that display filtered TikTok content based on user interactions or search queries.

This requires a backend service to handle OAuth authentication and API requests, then pass formatted data to Webflow through the Webflow Data API or direct client-side rendering. The Display API provides video metadata including titles, descriptions, view counts, and embed URLs you can format into custom layouts.

Use cases include:

• Filtered content galleries that display TikTok videos matching specific hashtags or topics with custom search interfaces
• User-generated content curation to pull videos from specific creators or user submissions for social proof sections
• Cross-platform content distribution to sync TikTok videos to Webflow CMS Collections for unified content management

TikTok's CORS policies prevent direct browser-based API calls. You need server-side endpoints that authenticate with TikTok, fetch data, then return it to your Webflow site.

What you can build

Integrating TikTok with Webflow enables e-commerce social proof displays, content creator portfolios with automated updates, marketing conversion tracking systems, and custom video galleries with filtering capabilities.

• E-commerce product showcases: Embed TikTok videos showing products in use to provide social proof on product detail pages
• Creator portfolio sites: Display your latest TikTok content automatically through profile embeds that update when you publish new videos
• Conversion tracking dashboards: Connect form submissions to TikTok's advertising platform to measure which campaigns generate qualified leads and calculate marketing ROI
• Curated video galleries: Build custom interfaces that filter and display TikTok content based on hashtags or topics using Display API integration with server-side authentication