TikTok Player for Bubble Mobile

✅

Link to the plugin page: https://zeroqode.com/plugin/tiktok-player-for-bubble-mobile-plugin-1748590880341x681816023381924600

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-03.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Tik Tok

✅

Bubble Editor: https://bubble.io/page?version=live&name=Tik+Tok&id=zeroqode-native-demo-03&tab=Design&type=page

Introduction

The TikTok Player Native plugin allows you to seamlessly embed and display TikTok videos directly within your Bubble application. This plugin provides a native video player experience that maintains the original TikTok video quality and aspect ratio. The plugin is designed specifically for mobile platforms and offers responsive video playback with customizable scrolling options.

The plugin is ideal for applications that need to showcase TikTok content, social media aggregators, content curation platforms, or any app that wants to integrate TikTok videos into their user experience.

To use this plugin effectively, you’ll need:

Valid TikTok video URLs from publicly accessible TikTok posts

Mobile-optimized Bubble application (plugin is designed for mobile platforms)

Basic understanding of Bubble’s responsive design principles

Prerequisites

No external API accounts or services are required for this plugin. The plugin works natively within your Bubble application with no additional dependencies.

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at:

https://testflight.apple.com/join/VykzdCs6

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Setting up the TikTok Player Native plugin is straightforward:

Install the Plugin: Navigate to your Bubble app’s Plugin tab and install the TikTok Player Native plugin from the Plugin store.

Add the Element: Drag and drop the TikTok Player element from the Visual Elements section onto your page.

Configure Video URL: In the element’s properties panel, set the “TikTok Video url” field to a valid TikTok video URL (either static text or a dynamic value from your database).

Adjust Settings: Configure the “Allow Scrolling” option based on your UI requirements.

Set Dimensions: The element comes with default dimensions of 300x170 pixels, but you can resize it to fit your design needs.

Plugin Element Properties

The plugin contains a TikTok Player visual element that should be placed on your page to display TikTok videos.

TikTok Player

Fields:

Title	Description	Type
TikTok Video URL	The complete URL of the TikTok video you want to embed and display	Text
Allow Scrolling	Controls whether scrolling is enabled within the video player area	Boolean

Exposed states

Name	Description	Type
has error	Indicates whether an error occurred while loading the TikTok video	Boolean
is loaded	Indicates whether the TikTok video has successfully loaded and is ready for playback	Boolean

Element Events

Name	Description
loaded	Triggered when the TikTok video has successfully loaded and is ready for display
load_error	Triggered when an error occurs during the video loading process (e.g., invalid URL, network issues, or restricted content)

Workflow example

Here’s a basic workflow to get started with the TikTok Player Native plugin:

Basic Video Display Workflow:

Add the Element: Place the TikTok Player element on your page where you want the video to appear.

Set Video URL: Configure the “TikTok Video url” field with either:

A static TikTok video URL (for testing): https://www.tiktok.com/@username/video/1234567890123456789Example: https://www.tiktok.com/@bmw/video/7504674157163040022

A dynamic value from your database field containing TikTok URLs

Handle Loading States: Use the element’s states to provide user feedback:

Show a loading indicator while is_loaded is false

Display an error message when has_error is true

Configure Events: Set up workflows for the element events:

Use the loaded event to hide loading indicators or trigger additional actions

Use the load_error event to show error messages or attempt alternative content loading

Error Handling Workflow:

Monitor Error State: Create a conditional that checks the has_error state

Display Fallback: When an error occurs, show alternative content or an error message

Retry Mechanism: Optionally implement a retry button that refreshes the element or tries a different video URL