QR code for donors to scan that goes straight to donate page for a project.

Giveth / giveth-dapps-v2

This project is the aggregation of GIVeconomy and Giveth.io DApps in a single repo

https://staging.giveth.io

GNU General Public License v3.0

62 stars 33 forks source link

QR code for donors to scan that goes straight to donate page for a project. #1505

Open clara-zi opened 2 years ago

clara-zi commented 2 years ago

Project owner asking for a QR code on project page for potential donors to scan and send funds.

divine-comedian commented 6 months ago

This is an interesting idea - we could have it as an option on our share modal to display a QR code that links to the project URL

mosaeedi commented 5 months ago

I've added the QR code to the share modal!

The current share modal has some issues compared to what it should actually look like, whoever takes this task, please make sure it's 100% following the design on Figma.

Link to Figma

Please note

Also, regarding the QR code, I would like to know which third party we will use, they usually offer some customization! we can generate a QR code more in line with our brand!

I've made this one with qr.io service!

divine-comedian commented 5 months ago

Nice! Can we implement a 2 phase solution to generate the QR code @mosaeedi ?

The user can click to generate QR code, it's not rendered automtically - this prevents us from calling any services unnecessarily if the user doesn't need a QR code.

@jainkrati - we should look for ideally a free service to generate QR codes - bonus points if they look nice!

mosaeedi commented 5 months ago

Can we call the service with a button click? it could be like just a button like "Download the QR code", and when they click it will be generated and downloaded. is that possible? this way it could be just one action!

Or it should be two separate actions!

user request to generate
then they can download the generated QR code!

Which one we can do?

divine-comedian commented 5 months ago

I think having the 2 step option is better - if someone who owns a project wants to "physically" pass the URL to someone they can show the QR code on their phone screen to someone else (we should optimize for mobile here) - and optionally they can download it too if they want to print it off or use it on another website.

mosaeedi commented 5 months ago

Here is the second part of the share modal -> QR code

mosaeedi commented 5 months ago

So here is the final design for the share modal.

The Share modal

Link to Figma

Right after user clicks on Generate QR Code we take the user to the second part of the share modal to show the generated QR Code

Loading state

Link to Figma

QR Code

Link to Figma

mosaeedi commented 5 months ago

@divine-comedian Please take a look, also let me know if we need to update the copy.

mosaeedi commented 5 months ago

Also since we are here, Please add this IDs to use them for the analytic purposes

Copy Link button -> ID: Copy_Link Share on Twitter button -> ID: Share_Twitter Share on Facebook button -> ID: Share_Facebook Share on LinkedIn button -> ID: Share_LinkedIn Generate QR Code button -> ID: Generate_QR

divine-comedian commented 5 months ago

@divine-comedian Please take a look, also let me know if we need to update the copy.

Copy looks good!

What do you think about reusing some color schemes on the share buttons for social media - same colours we used in implementing the social media badges for projects.

mosaeedi commented 5 months ago

Do you mean these colors?

divine-comedian commented 5 months ago

@mosaeedi sure those colours work but I meant this one https://github.com/Giveth/giveth-dapps-v2/issues/3466

divine-comedian commented 4 months ago

@mosaeedi Can you please provide an update on this issue - with the requested colour changes to the design?