🛠️ 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.