Templates Plugins Courses

How to get the "Tinder Swiping Cards" plugin to work?

Hi there!

I’ve already seen the discussion “Swipe to Workflow Action - New Plugin from Zeroqode” but it seems to be a different plugin. I’m trying to understand how to use this one. Is there any tutorial? For example, Bubble’s “Tinder-like Pile” is easy to understand, but the “Tinder Swiping Cards” plugin adds a whopping 4 entities and none of them appear to be able to connect to my data…

Hello @Innovator2K,

Thank you for your message and sorry for the delayed reply over the weekend.

We appreciate your interest in the “Tinder Swiping Cards” plugin.:hugging_face:

Zeroqode has recently acquired this plugin - please bear with us while we review the code and make improvements/fixes where necessary.

Unfortunately, it doesn’t have documentation on how to work with this plugin. Basically, all you need to do is install the plugin, place the plugin element on the page, and use its events and actions within the workflow area.

We are actively working on creating new resources (demo page and documentation) to help all the users understand better and use the plugin effectively.

We apologize for any inconvenience this may cause and appreciate your patience. We will inform you when we have new documentation or resources available for this plugin.

I appreciate your understanding. :pray:

Best regards,
Adarina

Hi @adarina.efros,

Thank you for the answer!

Basically, all you need to do is install the plugin, place the plugin element on the page, and use its events and actions within the workflow area.

I’m familiar with the basics of Bubble, so I tried to add, for example, ‘Cards Deck’, but the element wasn’t even shown in the preview mode.(

We apologize for any inconvenience this may cause and appreciate your patience. We will inform you when we have new documentation or resources available for this plugin.

Could you please share if you have an estimate of how long I will have to wait?

Hello @Innovator2K,

We regret to inform you that we are unable to offer an estimated time frame at this moment, as we have recently acquired multiple plugins requiring updates and improvements.

However, we will keep you informed as soon as we have any information about this matter.

Have a wonderful day🤗

Best regards,
Adarina

Hello @adarina.efros,

Sorry for the late response, I’ve had a hard week.

We regret to inform you that we are unable to offer an estimated time frame at this moment

It’s disappointing… But fortunately, I can wait for some time. I wish you fast and easy coding!

However, we will keep you informed as soon as we have any information about this matter.

Thank you! I am looking forward to good news. If I can help somehow (e.g. test, review), let me know! :hugs:

1 Like

Hey @Innovator2K ,

I hope you are doing well! :slightly_smiling_face:

We have some great news for you about Tinder Swiping Cards, now you can easily check how every plugin’s element is working and interacting in the live demo.

Feel free to share any thoughts or feedback you have. And, of course, if you need any help getting it set up or have additional questions, just let us know.

Looking forward to hearing about your experience with it. :pray:

Best Wishes,
Stephan

Hi @Stephan,

Great news! Thank you for this New Year’s gift.) I’ve tried the demo and it looks very good! I’ll try to incorporate the plugin at some time in January. If I have any questions, I’ll ask them!

2 Likes

Hi Svyatoslav,

Thank you for your reply and Happy New Year. :tada:
Feel free to reach us again when you need some help or assistance. It will be a pleasure to cooperate.

By the way, if you enjoy using our plugins, you can rate them by going to the Plugins tab in Bubble editor. Find the plugin by name and give it as many stars as it deserves. We would appreciate it a lot! :pray:

Have a great week ahead.

Regards,
Stephan

1 Like

Hi @Stephan,

I’m trying to incorporate the plugin (I’ve decided to start from the CardsDeck (PRO)). I filled in all the fields:


But when I tried to run the corresponding page in the debug mode, I got:

What am I doing wrong?

Hello @Innovator2K,

Thank you for the question,

It looks like you’ve set everything up correctly in the Element, but you also need to create a group called “CardTemplate” where you can design how you want the card to appear on the page. This is where you’ll set the dimensions for the image, title, and description. Additionally, make sure that the “CardDeck PRO” element is the same size and properly stacked on on group element.
Also dont forget to add CardTemplate ID Attribute in the plugin element as well.

You may also want to check out our Demo Editor page to see how it works.

I hope this this will prove helpful. I am eagerly awaiting your response. :pray:

Best regards,
Stephan

1 Like

Hi @Stephan,

Thank you for the fast answer and sorry for my late one :slight_smile:

but you also need to create a group called “CardTemplate” where you can design how you want the card to appear on the page

Oh, yeah, I’ve forgotten about this :sweat_smile:

and properly stacked on on group element

Sorry, what do you mean by this? In the demo editor page (thank you for the link!), I see the plugin element is overlapped:


Should I do the same? Or should I place the plugin element exactly behind the “CardTemplate”?

Also dont forget to add CardTemplate ID Attribute

It is very strange, but I simply don’t have this attribute in my editor…

Do you have ideas why this can be?

Hi @Innovator2K,

Thanks for your reply, :raised_hands:

“Should I do the same? Or should I place the plugin element exactly behind the “CardTemplate”?” - Here you can experiment and do what you feel is better for your app and use case, but generally yeah, they must be overlapped.

“It is very strange, but I simply don’t have this attribute in my editor…” - Yes, by default this option is hidden from Bubble, but you can activate it by going to → Settings → General → Scroll down until you see the checkbox “Expose the ID atribute to HTML elements” and activate it, after that you must see it on every element.

If you have any further questions, feel free to reach out! :pray:

Best,
Stephan

1 Like

Hello @Stephan,

Thank you for the detailed explanation of enabling IDs! At least I can see the cards now! But I still have a few questions…

  1. Following the demo, I created a group with the “Align to parent” layout and placed the plugin element (CardsDeck(PRO)) exactly behind the “Group Card Template” in which I placed objects for a user’s image, title and description:

    But for some reason the card rises up and hides its top part in the preview:

    How can I fix this?
  2. Moreover, it can be seen that the image and description are not shown, although “John” has these fields:

    Why is this?
  3. When one swipes to the right, the heart is shown. Is it possible to replace the heart with, e.g., a thumb up?

Hi @Innovator2K ,

Thanks for further questions, I will try to look into each of them:

“But for some reason the card rises up and hides its top part in the preview:” - can you please check again if the element is the same size as the group? As in preview only the element dimensions are visible.

“Moreover, it can be seen that the image and description are not shown, although “John” has these fields:” - That is quite unusual, can you try to change Description to Subtitle and see how it will behave?

“When one swipes to the right, the heart is shown. Is it possible to replace the heart with, e.g., a thumb up?” - currently there is no possibility of doing that, but I’ll add your suggestion to the list of plugin improvements and inform you when the feature will be available.

Also please check again the database, and make sure the table is set up correctly and connected to the element. You can check the Demo Page again for reference.

Hope this will help you, waiting for your response. :pray:

Best regards,
Stephan

Hi @Stephan,

CardsDeck(PRO) and “Group Card Template” are exactly of the same size, I even fixed their sizes:



Moreover, the cards are displayed as intended right after the preview starts (before the dynamic value for “Text” is set), but after about a second the cards move up (after “Text” becomes “John”). The preview element inspector also shows the correct position:

Do you have any idea why this is so?

Wow, that helped, thank you! But what should I do to see the image as well?

Okay, thank you! I’ll wait :slight_smile:

I don’t see anything suspicious in the debugger:


(You can even see that “John” has a profile picture.)

1 Like

Hi @Innovator2K,

Thanks for getting back.

We have tested the plugin on our Demo page, and Card Deck (PRO) displays images correctly.

Double check the setup, database, ensure the element ID is the same for the plugin element and for the group that contains image element, title, subtitle.



Hope this will help you out, please check our Demo page for any further reference.

Best regards,
Stephan

Hi @Stephan,

I’ve decided to test other cards decks offered by the plugin. “CardsDeck” works fine (everything is displayed and there is no rising up), but the cards format is not suitable for me. “CardsDeck[ElementsID]” is not relevant for my purposes. “CardsDeckvPro” is interesting, since it warns:
Screenshot from 2024-01-27 14-21-52
In my app, it’s okey for a user to have no profile picture and one of my users didn’t have images. Although “CardsDeckvPro” worked with missing pictures without errors, I decided to add an image to the user, since it might help to fix “CardsDeck (PRO)”. I set a profile picture for the user and run “CardsDeck (PRO)” in the preview mode, but this hasn’t helped :pensive:
Displaying images is not critical for me, but I’m upset because of the strange moving up (I’ve tried different positions, dimension sizes and so on). I can’t use “CardsDeck(PRO)” with such a behaviour :cry:

Hello @Innovator2K,

Thank you for the message.

I’m sorry to learn that you still encounter difficulties in using the “CardsDeckvPro” card.

To better understand what went wrong inside your app. Please add our Support Team as collaborators in your Bubble application.

To add our Support Team as a collaborator, you can follow these steps in the Bubble Editor:

  1. Go to Settings.
  2. Click on Collaboration.
  3. Add the email address support@zeroqode.com.

Please note that you may receive a warning message regarding your plan when adding collaborators. However, since we are an Agency, you can easily add us as collaborators without any issues.

As well, please share instructions on how to reproduce the issue on our side, the name of the page where the plugin element is located, group, plugin element, and workflow attached to it. A short description of where to click and user credentials to log in to be able to troubleshoot the reported issue. If possible, please attach a short Loom video (screencast recording where providing this guide).

Looking forward to hearing from you soon.

Best regards,
Stephan

1 Like

Hello @Stephan,

Wow, thank you and your team for such a great opportunity!

I’m sorry to learn that you still encounter difficulties in using the “CardsDeckvPro” card

Please note that the problem is with “CardsDeck(PRO)”, not with “CardsDeckvPro”. I also tried another browser (Firefox Web Browser) without any addons and with cache and cookies deleted before the attempt, but the rising up has reproduced, so you should be able to see the same behaviour.

Please add our Support Team as collaborators in your Bubble application.

Done:

please share instructions on how to reproduce the issue on our side, the name of the page where the plugin element is located, group, plugin element, and workflow attached to it

Page: “swiping”, group: “Group Swiping Cards copy” (in “Group Swiping”) contains the plugin element “CardsDeck(PRO) A” and the template “Group Card Template”, workflow: workflows aren’t attached

A short description of where to click and user credentials to log in to be able to troubleshoot the reported issue

  1. Choose the “swiping” page
  2. Click “Data”
  3. Pick the “User” datatype
  4. Click “App data”
  5. Click “Run as” for any user you like (I’m using the fourth from the top here)


    After this you should be able to see the “rising up”:

If possible, please attach a short Loom video (screencast recording where providing this guide).

I believe that everything is clear and that the video is unnecessary, but if not, please ask for clarifications. After all, I can try to record the video.

1 Like

Hello @Innovator2K,

Thank you for bringing us on board as collaborators.

We’ve thoroughly examined your application and confirm your observations. Despite setting everything up identically to our environment, the images remain invisible. This discrepancy appears to stem from Bubble’s method of storing and retrieving images across subscription plans.


Please allow us some time to delve deeper into this issue. I’ll come back as soon as we have any news about this matter.

Thanks for your understanding and patience! :pray:

Best regards,
Stephan

1 Like