logo
Zeroqode Docs
/
Plugins

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=TikTok Player?utm_source=docs&utm_medium=referral&utm_campaign=demo_link
✅
Bubble Editor: https://bubble.io/page?version=live&name=TikTok+Player&id=zeroqode-native-demo-03&tab=Design&type=page&elements=cnHEl0

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:
  1. Install the Plugin: Navigate to your Bubble app’s Plugin tab and install the TikTok Player Native plugin from the Plugin store.
  1. Add the Element: Drag and drop the TikTok Player element from the Visual Elements section onto your page.
    1. 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).
      1. Adjust Settings: Configure the “Allow Scrolling” option based on your UI requirements.
        1. 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:

          1. Add the Element: Place the TikTok Player element on your page where you want the video to appear.
            1. Set Video URL: Configure the “TikTok Video url” field with either:
                • A dynamic value from your database field containing TikTok URLs
            1. 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
            1. 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:

            1. Monitor Error State: Create a conditional that checks the has_error state
            1. Display Fallback: When an error occurs, show alternative content or an error message
            1. Retry Mechanism: Optionally implement a retry button that refreshes the element or tries a different video URL
            Image without caption

            Changelogs

            Squares & Circles Bubble Animation
            User Device Info for Bubble Mobile
            Powered by Notaku
            Share
            Content
            TikTok Player for Bubble Mobile
            Demo to preview the plugin:
            Introduction
            Prerequisites
            How to setup
            Plugin Element Properties
            TikTok Player
            Exposed states
            Element Events
            Workflow example
            Basic Video Display Workflow:
            Error Handling Workflow:
            Changelogs