Tinder Swiping Cards

Demo to preview the plugin:

Introduction

The Tinder Swiping Cards plugin enables a Tinder-style swipe interaction for native Bubble elements, bringing a sleek and interactive user experience to your app. With this plugin, users can swipe through a set of cards (similar to the famous Tinder app) with smooth transitions and intuitive gestures. It works by integrating with your Bubble app’s elements, allowing you to create engaging interfaces for selecting or sorting items via swipes, whether it's for user profiles, product catalogs, or any other content that benefits from a swipeable display.
Key Features:

👛 Please support our efforts to keep this plugin free—your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.
Image without caption

How to setup

Step 1: Installation

Step 2: Place the Element

Step 3: Setup Data Types and Fields

Step 4: Setup Plugin Element

Plugin Element Properties

Cards Deck

Image without caption
Fields:
Title
Description
Type
Titles
The main heading or title of each card.
Text
Figures
The primary image displayed on the card.
Image
Texts
The subtitle or additional description shown on the card.
Text
Colors
The background or theme color for each card.
Text
Display dislike button
Shows a "dislike" button on the card for users to indicate disinterest.
Checkbox (yes/no)
Display like button
Shows a "like" button on the card for users to express interest.
Checkbox (yes/no)
Display reload button
Allows users to reload/reset the card deck.
Checkbox (yes/no)
Display send to the back button
Moves the current card to the back of the stack instead of swiping it away.
Checkbox (yes/no)
Hide card title text
Hides the title text from being displayed on the card.
Checkbox (yes/no)
Hide card body text
Hides the body or subtitle text on the card.
Checkbox (yes/no)
Hide card image
Hides the image from being displayed on the card.
Checkbox (yes/no)

Element Actions

  1. dislikeCard – Moves the current card to the left, indicating disinterest or rejection.
  1. likeCard – Moves the current card to the right, marking it as liked or approved.
  1. reloadCards – Resets and reloads the card deck, bringing back all cards into the stack.
  1. sendToBack – Moves the current card to the back of the stack instead of discarding it, allowing users to revisit it later.

Cards Deck (PRO)

Image without caption
Fields:
Title
Description
Type
Display dislike button
Enables or disables the dislike button, allowing users to swipe left or reject a card.
Checkbox (yes/no)
Display like button
Enables or disables the like button, allowing users to swipe right or approve a card.
Checkbox (yes/no)
Display reload button
Enables or disables the reload button, which resets and reshuffles the card deck.
Checkbox (yes/no)
Display send to the back button
Enables or disables the send-to-back button, which moves the current card to the back of the stack instead of discarding it.
Checkbox (yes/no)
Cards
With fields named as: bodytext, title
Any Thing
Show tip of cards behind
Enables a preview effect that slightly reveals the edges of the cards behind the top card, enhancing the visual stacking effect.
Checkbox (yes/no)

Element Actions

  1. sendToBack – Moves the current card to the back of the deck instead of discarding it, allowing it to be reviewed again later.
  1. dislikeCard – Triggers the action for swiping left, typically indicating disinterest or rejection of the card.
  1. likeCard – Triggers the action for swiping right, usually indicating interest or approval of the card.
  1. reloadCards – Resets and reshuffles the deck, bringing back all cards and allowing the user to start over.

Exposed states

Title
Description
Type
CardClicked
Tracks whether a user has interacted with a card by clicking on it
Text

Element Events

Title
Description
clickedCard
The clickedCard event is triggered when a user clicks on a card within the swipe deck.

Cards Deck [Elements ID]

Image without caption
Fields:
Title
Description
Type
Display dislike button
Enables a dislike button on each card, allowing users to indicate negative feedback by swiping left or clicking the button.
Checkbox (yes/no)
Display like button
Enables a like button on each card, allowing users to indicate positive feedback by swiping right or clicking the button.
Checkbox (yes/no)
Display reload button
Shows a reload button that resets the card deck, bringing back previously swiped cards for another round of interaction.
Checkbox (yes/no)
Display send to the back button
Adds a button to send the current card to the back of the deck without dismissing it permanently.
Checkbox (yes/no)
Cards ID attributes
Unique identifiers assigned to each card, enabling tracking, referencing, and workflow actions based on specific card selections.
Text

Element Actions

  1. dislikeCard – This action simulates a left swipe on the current card, marking it as "disliked" and triggering the corresponding workflow.
  1. likeCard – This action simulates a right swipe on the current card, marking it as "liked" and triggering the corresponding workflow.
  1. reloadCards – This action resets the card deck, bringing back all previously swiped cards to the starting position.
  1. sendToBack – This action moves the current card to the back of the deck instead of dismissing it.

Cards Deck vPro

Image without caption
Fields:
Title
Description
Type
⚠️ Make sure you have a template with ID “cardtemplate” containing a “Title” a “Subtitle” and “Image”. Also, uncheck this “make element fixed-width” for 100% screen width
Card height (vh)
This setting defines the height of each card in viewport height (vh). Adjusting this value controls how much vertical space each card occupies on the screen.
Number
⚠️ No missing data is allowed! Make sure your database is complete or there is a string default for missing values.
Titles
This refers to the text content used as the main heading for each card.
Text
Bodies
This field contains the descriptive text or subtitle displayed on the card
Text
Figures
This refers to any media content (images, icons, or other visual elements) associated with the card
Image
Card ID
A unique identifier assigned to each card
Text

Element Actions

  1. islikeCard – This action simulates a left swipe on the current card, marking it as "disliked" and triggering the corresponding workflow.
  1. likeCard – This action simulates a right swipe on the current card, marking it as "liked" and triggering the corresponding workflow.
  1. reloadCards – This action resets the card deck, bringing back all previously swiped cards to the starting position.
  1. sendToBack – This action moves the current card to the back of the deck instead of dismissing it.

Exposed states

Title
Description
Type
CardClicked
Tracks whether a user has interacted with a card by clicking on it
Text

Element Events

Title
Description
clickedCard
The clickedCard event is triggered when a user clicks on a card within the swipe deck.
Image without caption
Changelogs