Develop Your Mini Drama

During this stage, you will locally develop your mini drama app and integrate with necessary APIs. This guide explains how to develop a mini drama based on H5 runtime.

What are TikTok Minis?

Unlike traditional mini-program runtime environments, TikTok Minis are lightweight web applications that run within the TikTok app's WebView. This architecture combines standard web development practices with TikTok-native client capabilities, offering developers a familiar workflow while accessing platform features. Key characteristics include:

• Minis are built as standard web projects with core files like index.html, frontend framework code, and compiled build artifacts
• TikTok client-side capabilities are exposed via the global window.TTMinis interface, rather than being implemented directly in your web code
• Local development relies on three interconnected layers: your local business page, the Playground debug page, and the TikTok mobile app
• Before uploading to the Developer Platform, you first build your web project independently, then run the minis build command to validate and package your artifacts according to platform requirements

Complete app setup on Developer Platform

Set up basic information

Ensure all required project fields (including app information, Privacy Policy URL, Terms of Service URL) are populated in the Developer Portal. Empty or incomplete configuration will cause login and authorization errors. Use temporary placeholder links if your production resources are not yet available.

Learn more about configuring your app's basic information.

Configure request domains

Add all domains that your mini app will communicate with to the allowlist in the Developer Portal. Cross-origin requests from non-whitelisted domains will be blocked by the TikTok client.

Learn more about configuring trusted domains.

Enable monetization capabilities

TikTok Minis support two primary monetization models: In-App Ads (IAAs) and In-App Purchases (IAPs). Ensure you've completed monetization enablement, signed all necessary contracts, and received approval from TikTok before integrating monetization features into your app project.

1. Review the monetization overview and process for mini apps.
2. Enable your desired monetization features in the Developer Portal. This step can only be performed by an organizational admin.
3. After approval, configure monetization features for your mini app on the Developer Portal.
1. IAAs: Create and configure your ad units to get unique identifiers for rewarded ads, interstitial ads, and other supported formats.
2. IAPs: Configure your payment callback URL for webhooks to receive transaction updates from TikTok's servers.

Install developer tools

Install TikTok Minis command line interface tool

After completing development of your H5 mini app, install the command-line interface (CLI) tool to generate config files and debug.

npm install tiktok-minis-cli -g --registry=https://registry.npmjs.org/

Verify your installation by checking the CLI version:

minis -v
# Expected output: 0.0.4

Install TikTok Client for testing

For local testing with Android devices, you must use a test client version of TikTok. Reach out to your operations representative at TikTok or submit a support ticket for more information.

For local testing on iOS devices, you can test your TikTok Minis by uploading the packaged artifact to the Developer Platform and scanning the generated QR code to preview on your device.

Develop your mini app

Since TikTok Minis run in a standard WebView, you can develop most UI and non-client-dependent functionality using standard browser-based development workflows. Features that require TikTok client access (including login, authorization, ads, payments, and subscriptions) must be tested using the local debugging workflow outlined below.

Initialize TikTok Minis SDK

First, you must initialize the TikTok Minis SDK to access all of TikTok's client-side JavaScript APIs.

To use TikTok Minis SDK, include a piece of JavaScript code in your HTML to asynchronously load the SDK into your pages. This will not block other elements from loading on your page. TikTok Minis SDK does not require standalone files or downloads.

Add the TikTok Minis SDK to your index.html file and initialize it with your project's unique client key:

<!-- index.html -->
<head>
  <script src="https://connect.tiktok-minis.com/drama/sdk.js"></script>
  <script>
    TTMinis.init({
      clientKey: "your_client_key_here",
    });
  </script>
</head>

Integrate with core capabilities

TikTok provides a number of open capabilities through two complementary API bundles:

• TikTok Minis SDK (TTMinis): A client-side JavaScript SDK that runs inside the TikTok app. It provides in-app capabilities like login and authorization, payments, UI triggers, rewarded ads, lifecycle hooks, networking, and capability detection.
• TikTok Minis Server APIs (open.tiktokapis.com): A secure, backend-only suite of endpoints that manages identity and commerce for mini apps via OAuth v2 and scope-based permissions. It provides OAuth token retrieval, scope-gated user info retrieval, order creation and management, and pricing. Your backend stores and manages tokens and trade orders.

The open capabilities offered through these APIs allow your mini app to integrate seamlessly with the TikTok in-app experience and access TikTok's client-side functionalities.

Silent Login

The silent login flow allows you to authenticate users without additional user interaction, enabling seamless account creation and session management.

• Silent Login implementation guide
• Silent Login JavaScript API reference
• Server API OAuth reference

Explicit Authorization

For permissions that require explicit user approval, use the TTMinis.authorize() method to launch the TikTok permission request flow.

• Explicit Authorization implementation guide
• Explicit Authorization JavaScript API reference
• OAuth Server API reference

In-App Ads (IAAs)

To configure in-app ads for your mini app, IAA must be enabled for your mini app. There are two types of IAAs: rewarded ads and interstitial ads.

• In-App Ads configuration guide
• In-App Ads JavaScript API reference

In-App Purchases (IAPs)

To configure in-app purchases for your mini app, IAP must be enabled for your mini app. There are two types of IAPs: one-time purchases with TikTok Beans and subscriptions.

• In-App Purchases configuration guide
• In-App Purchases JavaScript API reference
• Subscriptions JavaScript API reference
• Payment Server API reference
• Subscriptions Server API reference

Navigation Bar

Configure a navigation bar in your mini app that adapts to the user's device.

• Navigation Bar configuration guide
• UI JavaScript API reference