Tinder Swipe

Demo page

πŸ”—

Introduction

You can trigger workflows by swiping left and right, like Tinder. It's fast and It can be flexibly customized!
You can use one image and 4 text slots.

Features

Video Overview

How to Setup

  • Add the TinderSwipe element into the editor.- Open to the plugin properties and set the β€œtype of content” field
  • Set the β€œImage field” field.
  • Set the slots that you will need. Each slot is a field of β€œtype of content” and it will fill the image caption.
  • Set the Image when like and Image when disliking fields
  • Open the workflow tab.
  • Create a β€œGeneral β†’ Page is Loaded” event.
  • Create an β€œElement Actions β†’ Set height” action, and set size.
  • Create an β€œElement Actions β†’ Set data source”, and fill the β€œData source” field with a list of things.
☝
Note: the things must be the same type as the declared in the β€œType of Content” field.

Frequently Asked Questions

When I'm swiping, the screen tends to start scrolling left and right (but it shouldn't scroll, since the page's width is fixed and is less than the width of my phone

There is a solution to this issue. This behavior happens because of Bubble's standard configuration for scrolling pages on mobile devices, so we must block the page to keep scrolling.
To do this, add an '"HTML" element to the page, and add the following lines:
javascript
<!DOCTYPE html> <html> <head> <title>Remove rubberband scrolling from web apps on mobile safari (iOS)</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <style> html, body {margin: 0; padding: 0; overflow: hidden}
⁉️
Have a question, or suggestion, or encountered an issue? πŸ€·β€β™‚οΈ Please contact us by sending a mail to: support@rapidevelopers.com
☝
Want to report a bug? Please follow this guideline!