Widgets for Gratipay 2.0

mattbk commented 9 years ago

I realized this should be here rather than at https://github.com/gratipay/gratipay.com/issues/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
[ ] https://github.com/gratipay/gratipay.com/issues/3924

mattbk commented 9 years ago

+1 from https://github.com/RunestoneInteractive/RunestoneComponents/commit/a8d1713512a028befef5743266b815672c0f41d3

e9t commented 9 years ago

+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 commented 9 years ago

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

The API issue on the gratipay.com side is https://github.com/gratipay/gratipay.com/issues/3726.

mattbk commented 8 years ago

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

techtonik commented 8 years ago

@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 commented 8 years ago

I'll try to take a look this weekend.

mattbk commented 8 years ago

This seems to have been fixed in https://github.com/gratipay/gratipay.com/issues/3726.

Leaving open while I check some more.

mattbk commented 8 years ago

Teams: The receiving value is a link that should go to the team page, however it goes to http://gratipay.com/undefined. <--reticketed as https://github.com/gratipay/grtp.co/issues/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 https://github.com/gratipay/grtp.co/issues/111

mattbk commented 8 years ago

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 https://github.com/gratipay/grtp.co/issues/110

mattbk commented 8 years ago

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

techtonik commented 8 years ago

Or "XXX team receives"

rummik commented 8 years ago

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 commented 8 years ago

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

chadwhitacre commented 8 years ago

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.

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

mattbk commented 8 years ago

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 commented 8 years ago

😞

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

cgzgrokw8aeu3ox

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

mattbk commented 8 years ago

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.

Widgets already in the wild should be updated to reflect giving and taking for ~users.

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 https://github.com/gratipay/grtp.co/issues/112 for the latter.

mattbk commented 8 years ago

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

https://github.com/gratipay/grtp.co/pull/133

mattbk commented 8 years ago

We should implement new widgets specifically for Teams.

There are at least three ways to do this:

clone lib/ and modify the API from the bottom up
have a switch in v1.js that points to a different api.js just for teams
have a switch at the top of api.js that points to variations of the functions for teams
clean up https://github.com/gratipay/grtp.co/issues/112 so it is just about adding team functionality; depends on merging #133.

No idea which is right, from a programming standpoint.

chadwhitacre commented 8 years ago

Alright, thinking this through with @kaguillera ...

What are the widgets we have out in the wild right now?

First Generation

Entrypoint: https://gratipay.com/whit537/widget.html

Depends on redirects from www.gittip.com to gratipay.com.

<iframe style="border: 0; margin: 0 0 -3pt 3pt; padding: 0;"
        src="https://www.gittip.com/whit537/widget.html"
        width="48pt" height="22pt"></iframe>

This used to be dynamic but now it's static, it just displays Gratipay all the time.

Second Generation

Entrypoint: https://grtp.co/v1.js

Users embed a <script> tag that loads //grtp.co/v1.js. Depends on redirects from gttp.co to grtp.co.

<script data-gratipay-username="whit537"
        data-gratipay-widget="button"
        src="//grtp.co/v1.js"></script>

<script data-gratipay-username="whit537"
        src="//grtp.co/v1.js"></script>

<script data-gratipay-username="whit537"
        data-gratipay-widget="giving"
        src="//grtp.co/v1.js"></script>

chadwhitacre commented 8 years ago

Fundamentally those are the two widgets we have out there right now. The first generation ain't goin' no where. We leave that alone. Congrats on being early.

What are we doing with https://grtp.co/v1.js?

chadwhitacre commented 8 years ago

Well lookie here:

http://grtp.co/v1/widgets/ http://grtp.co/v1/widgets/button.html http://grtp.co/v1/widgets/default.html http://grtp.co/v1/widgets/giving.html

chadwhitacre commented 8 years ago

Huh. Promise.js (https://github.com/gratipay/grtp.co/issues/103#issuecomment-212134269) inlined us:

screen shot 2016-04-27 at 5 12 39 pm

https://www.promisejs.org/static/3.0.19/gittip-widget/client.js

screen shot 2016-04-27 at 5 13 34 pm

view-source:https://www.promisejs.org/

chadwhitacre commented 8 years ago

Alright, so consider this: all of the Gratipay 1.0 receiving widgets that are out there—they represent ~users that could/should apply for a new Team account. Sure, we could probably hackishly mostly transparently upgrade their widget to show taking instead ... but! Another option would be to make the widgets say something like "Upgrade Gratipay!" with a link to a page under gratipay.com/about explaining the situation and how to get back on track.

screen shot 2016-04-27 at 5 31 54 pm

The giving widgets should be fine. The second-generation buttons we can drop back to just Gratipay as we did for the first generation ones.

chadwhitacre commented 8 years ago

But in that case we should have new Team widgets ready to embed before we prompt people to upgrade.

chadwhitacre commented 8 years ago

Waddya think, @mattbk?

chadwhitacre commented 8 years ago

Another option would be to make the widgets say something like

We would do that for any widget that had data-{gittip,gratipay}-username and the default data-{gittip,gratipay}-widget.

mattbk commented 8 years ago

That makes sense.

mattbk commented 8 years ago

So we should build a v2 widget that is cloned and then modified from the v1 widget. This new version will handle giving in the same way, but will handle taking (for ~users) and receiving (for teams).

chadwhitacre commented 8 years ago

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

mattbk commented 8 years ago

Not a problem.

mattbk commented 8 years ago

https://github.com/gratipay/grtp.co/issues/103#issuecomment-215227273

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

Third generation should be v2.js then.

mattbk commented 8 years ago

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 https://github.com/gratipay/grtp.co/issues/133 and https://github.com/gratipay/grtp.co/issues/112.

mattbk commented 8 years ago

In https://github.com/gratipay/grtp.co/pull/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 commented 8 years ago

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 commented 8 years ago

Ya.

chadwhitacre commented 8 years ago

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 commented 8 years ago

@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 https://github.com/gratipay/gratipay.com/issues/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:

screen shot 2016-06-25 at 11 45 37 am

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

screen shot 2016-06-29 at 4 07 09 pm

screen shot 2016-06-29 at 4 08 53 pm

And of course, the venerable:

screen shot 2016-06-29 at 4 09 24 pm

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:

screen shot 2016-06-29 at 4 14 18 pm

screen shot 2016-06-29 at 4 16 36 pm

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 commented 8 years ago

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.

mvp