Widgets for Gratipay 2.0

[mattbk]

I realized this should be here rather than at gratipay/gratipay.com#3603.

Pretty sure widgets are still linked to users, not teams, and probably don't reflect the right amount received anyway after Gratipocalypse.

Plan

• ossify data-{gittip,gratipay}-widget=button (no longer dynamic; always just "Gratipay")
• implement a new widget or button for Teams
• publish a page under https://gratipay.com/about/ about upgrading widgets
• show "Please upgrade" when data-{gittip,gratipay}-widget=default and data-{gittip,gratipay}-username

Notify

• https://gratipay.freshdesk.com/helpdesk/tickets/2534

When milestone accomplished

• Re-add widget menu item gratipay.com#3924

[mattbk]

+1 from RunestoneInteractive/RunestoneComponents@a8d1713

[e9t]

+1
I've changed the handle from my user account to team account, but seeing "I receive $0.00 / wk on Gratipay." on my widget instead of the proper amount of donations.

Many wishes on resolving Gratipocalypse!

[chadwhitacre]

Thanks @e9t! We're gettin' there! :-)

The API issue on the gratipay.com side is gratipay/gratipay.com#3726.

[mattbk]

So if we fix the API, will the widgets work automatically?

[techtonik]

@mattbk I don't see a clear explanation what API is broken, so before fixing it, somebody needs to research, what was that API expected response, where was the endpoint and then I can investigate what is broken.

[mattbk]

I'll try to take a look this weekend.

[mattbk]

This seems to have been fixed in gratipay/gratipay.com#3726.

Leaving open while I check some more.

[mattbk]

Teams: The receiving value is a link that should go to the team page, however it goes to http://gratipay.com/undefined. <--reticketed as #109

~Users: The receiving link is correct, although in my case it says "anonymously" for the value, which used to be hooked to a setting that I can't find now.<--reticketed as #111

[mattbk]

Moved from gratipay/gratipay.com#3726.

Hot dog, the API and Widget works for teams!

I get the following Team widget though (https://gratipay.com/northern-plains-athletics/public.json), need to fill in trailing zeros:
<--reticketed as #110

[mattbk]

For teams, the widget should say "This team receives" rather than "I receive."

[techtonik]

Or "XXX team receives"

[rummik]

It used to say 'We receive', rather than 'I receive', if it was a team receiving, but the APIs changed and the widget didn't get updated along with.

[techtonik]

"We receive" is better than 3rd party reference.

[chadwhitacre]

I think what we want to do is make the existing widgets that are already out in the wild as backwards compatible as possible. They are there to represent what are now ~users.

1. Widgets already in the wild should be updated to reflect giving and taking for ~users.
2. We should implement new widgets specifically for Teams.

[mattbk]

Widgets in the wild were built to include Teams 1.0, as far as I can tell.

It sounds right to split them now that Teams 2.0 aren't as close to ~users as Teams 1.0 were to ~users 1.0, I just need to find the time to figure it out.

[chadwhitacre]

😞

$undefined #Gratipay @ http://promisejs.org :)

https://twitter.com/GeorgeChetreanu/status/722342060137832449

[mattbk]

I think what we want to do is make the existing widgets that are already out in the wild as backwards compatible as possible. They are there to represent what are now ~users.

1. Widgets already in the wild should be updated to reflect giving and taking for ~users.
2. We should implement new widgets specifically for Teams.

So first we need a PR that takes the existing ~user widgets and reterms "receiving" as" taking."

Secondly, we need to build a separate widget for teams to use.

I think I can use pieces of #112 for the latter.

[chadwhitacre]

@mattbk Just a heads-up: I'm going to focus on gratipay/gratipay.com#3994 through May. I'll be happy to work on this further with you after that! :)

[mattbk]

Not a problem.

[mattbk]

#103 (comment)

Keep in mind that first generation has no version, and second generation entrypoint is v1.js.

Third generation should be v2.js then.

[mattbk]

I just closed my open PRs to lessen the confusion. Don't have one started for third-generation widgets yet, but there are pieces in #133 and #112.

[mattbk]

In #138, I stub out a basic working v2 for Teams only. The idea is that (for now) Teams can use v2 and ~users can continue using v1.

[chadwhitacre]

The idea is that (for now) Teams can use v2 and ~users can continue using v1.

And once v2 is deployed we'll modify v1 to show "Please upgrade," ya?

[mattbk]

Ya.

[chadwhitacre]

Key

bold = default
italic = deprecated ("Please upgrade")
(parenthesis) = potential

Current Widgets

1.0 users	2.0 ~users	2.0 Teams
receiving	(taking)	(receiving)
button	(button)	(button)
giving	(taking)	(distributing)

Current + 1: #138

1.0 users	2.0 ~users	2.0 Teams
receiving	(taking)	receiving
button	(button)	(button)
giving	(taking)	(distributing)

...

Current + N

???

[chadwhitacre]

@mattbk I'm struggling over here, because I think we need to somewhat shift the direction we're going with this ticket. I think if we zoom out, the real pain point we're trying to address here is that currently we have no option for Teams to embed any sort of Gratipay-branded thing on their own website after they've signed up. Yes?

The question @kaguillera and I are wrestling with over here is whether the design of the old Gittipay 1.0 widgets is good enough to try to bring back, as we're attempting to do in #138. Ultimately I think we want to move more in the direction of a direct call-to-action button a la PayPal, Stripe, Coinbase, Patreon, or Gumroad. We've been attempting this over in gratipay/gratipay.com#1167 for a while now (and we also have a simple button of a certain style in another repo). I've closed that ticket in favor of this one.

I guess I want us to deliver something that we can be proud of, and I'm not sure this is it:

I think we want to line ourselves up alongside fine buttons such as these:

And of course, the venerable:

The strength of the button is in the brand. Stripe takes a more white-label approach, though of course their modal is instantly recognizable; on Django:

Of these examples, Gumroad is the strongest parallel for us, I think. Since we have a social layer in addition to the processing infrastructure layer, it makes sense for us to have some branding (not completely white label). I like Gumroad's light touch compared to Patreon (and gratipay-badge). PayPal is just old-school, of course. Gumroad's focus is on their customer—the "my" in "Buy my product" is not Gumroad. They also have the best widget builder of the bunch. Drool. 💧

[chadwhitacre]

So I guess my question is, how do we get there from here? Obviously we need to take incremental steps—a lot of work went into that Gumroad experience.

(h/t)

[chadwhitacre]

Honestly, this drives me back to gratipay/gratipay.com#3665 and gratipay/inside.gratipay.com#298.

[chadwhitacre]

Here's a Gumroad screenshot ftr:

[icarito]

Breaking the widget was a bad idea and not having an alternative (even static) is a shame! The old widget offers a Error, quite ugly!

[icarito]

Gratitude, by the way, for being open and all ;-)

I guess the main issue is there's no documentation from the home page that I could find!

[chadwhitacre]

Sorry for the trouble, @icarito. 😞

Check this out for the latest widget we have to offer:

https://github.com/gratipay/grtp.co#examples

For a static alternative see here:

https://github.com/gratipay/gratipay-badge#gratipay-badge

[chadwhitacre]

I guess the main issue is there's no documentation from the home page that I could find!

Agreed, we need to bring back documentation on Gratipay.com itself.

[mattbk]

Agreed, we need to bring back documentation on Gratipay.com itself.

gratipay/gratipay.com#3924

[mattbk]

Example of OpenCollective checkout:

[clone1018]

That's Stripe right?