🛠️ Full Instructions (Setup Guide)

The SwipeTok Feed PRO

Place the SwipeTok Pro element on your page and make it fill the screen (Width/Height: 100%).

Map your database lists to the plugin fields (Video URLs, UIDs, Usernames, Descriptions, Likes, Shares).

How to Setup Deep Linking (Share URLs & ?video=uid)
SwipeTok has a built-in deep-linking engine. If a user opens a link with a specific video UID, the plugin will instantly load the feed and silently jump to that video before the user even notices!

Step A (The Share Button): In your Database, make sure you generate a Share URL for each video. The format should be: Website Home URL + ?video= + Current Video's UID (e.g., yourapp.com/feed?video=12345). Feed this list into the List Share URLs field.

Step B (The Page Load): In the SwipeTok Feed element, look for the Initial Video UID field. Set it to: Get data from page URL -> Parameter name: video -> Type: text.

Step C (The Magic): That's it! When a user clicks the shared link, the plugin will auto-scroll to the correct video. Our JavaScript engine will even silently clean the ?video=uid parameter from the browser's address bar without reloading the page, keeping your URLs looking perfectly clean! ✨


How to Setup the Native Comments Engine
SwipeTok Pro renders the comments UI natively at 60fps, but you need to format the text exactly as the plugin expects it: VideoUID|||Username|||CommentText.

Step A (The Database): In your Bubble Database, go to your Comment Data Type and create a new text field called plugin_format.

Step B (The Workflow): Go to your Workflows and add an event: A SwipeTok Feed PRO Comment Sent.

Step C (Saving the Data): Inside that workflow, add a "Create a new thing" action (to create the Comment).

Set the plugin_format field to this exact dynamic expression:
👉 This SwipeTok Feed's clicked_action_uid & ||| & Current User's Name & ||| & This SwipeTok Feed's current_comment

(Don't forget to also add +1 to the Video's comment count!)

Step D (Feeding the Plugin): Back in the SwipeTok element properties, map the List Comments Raw field to: Search for Comments: each item's plugin_format. The plugin will automatically split the ||| delimiters and build the beautiful chat bubbles! 💬


How to Setup Non-Destructive Trimming (SwipeTok Creator)

Step A: Use Bubble's native File Uploader to let the user upload a video securely to your database or if you want to edit your videos put them in a dropdown.

Step B: Pass the uploaded File's URL to the SwipeTok Creator element. The timeline UI will automatically appear.

Step C: Create a Workflow for the event A SwipeTok Creator Trim Updated.

Step D: In this workflow, use "Make changes to a thing" (your Video). Save the plugin's exposed states: trim_start (number) and trim_end (number). You can also save the creator_thumbnail (Base64 text) as an image.

Step E: Pass the lists of Trim Starts and Trim Ends into your SwipeTok Feed element. The feed will automatically loop the videos only between those exact seconds! ✂️

Multi-Feed: Add names to Tab 1 Name (e.g., "Following") and Tab 2 Name (e.g., "For You"). Use the Tab Changed event to run a workflow that updates the lists sent to the plugin.




📖 Complete Mobile Beta Setup Instructions
1. Formatting the list_video_data (The Super String)
To guarantee high performance and data integrity, SwipeTok Mobile requires all video data to be injected as a List of Texts, where each text contains 13 data points separated by |||.

In your Bubble property inspector for list_video_data, build your search like this:
Search for Videos :format as text :split by ( ### )

Inside the :format as text dialog, set it up exactly like this:

Content to show per item:
This Video's UID ||| This Video's URL ||| This Video's Thumbnail ||| This Video's Username ||| This Video's Description ||| This Video's Likes Count ||| This Video's Shares Count ||| This Video's Comments Count ||| This Video's Trim Start ||| This Video's Trim End ||| This Video's Profile Pic URL ||| This Video's Custom HTML ||| This Video's Creator UID

Delimiter: ###

(Note: If a field is empty, like Trim End or Custom HTML, just leave a space between the |||).

2. Setting up Native Sharing & Deep Links
When a user clicks the Share icon, SwipeTok optimistically increments the share counter on the screen and triggers the Share Clicked event.

Workflow Setup:

Event: When SwipeTokMobile's share_clicked is triggered

Action 1: Generate your Deep Link (e.g., using Branch.io or Bubble's native link generator) appending SwipeTokMobile's clicked_action_uid as the video parameter.

Action 2: Use your preferred Native Share plugin (like "Share Link" or "Native Share") and pass the generated deep link.