Embeddable widget for progress towards funding Goals

[hestenet]

User story

As the maintainer of a collective, I'd like to show progress to funding goals on third party sites.

Best solution for this problem

An embeddable button/widget that displays the progress bar towards a specific funding goal

MVP

An MVP would simply display the same progress bar as is used on OC itself, but as an embeddable widget:

Metrics

It would be possible to A/B test the rate at which a new goal gets funded when embedded with a goal progress widget vs a regular donation button.

Documentation

Documentation should provide examples of the embed code. Ideally the exact embed code is simply automatically generated on the control panel where goals are configured.

[hestenet]

There may be something else around goals that has caused some confusion, though maybe just better documentation of how to use goals is needed:

For example - rather than using the goal system, the Drupal Diversity and Inclusion collective actually started a second collective for a speaker inclusion initiative:

• https://opencollective.com/drupal-diversity-and-inclusion
• https://opencollective.com/drupal-diversity-and-inclusion-speaker-initiative

[gusaus]

The ability to customize and embed Open Collective widgets has been a long sought-after feature. Especially in projects/communities like Drupal and WordPress that power all types of customer-facing sites and products.

Here are a few related issues/comments from a couple of folks in the Drupal community -

• 💡 API Use Case: advertisement for project sponsors opencollective-api#769 (comment)
• 💡 API Use Case: advertisement for project sponsors opencollective-api#769 (comment)
• 💡 API Use Case: advertisement for project sponsors opencollective-api#769 (comment)
• Redesign /donate and make it embeddable #339 (comment)

Seems like helping contribute to this functionality (and docs!) could be a deliverable of related Drupal projects referenced here? https://www.drupal.org/project/ideas/issues/2922986#comment-12640354

If there's overlap, maybe there's an opportunity to collaborate?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. We want to keep it in our todo list but haven't had the time to address it yet.
Thank you for your contributions!

[gusaus]

Widgets like these would be a huge asset as we get closer to enabling Open Collective on drupal.org, a Drupal module, and other open-source platforms. I think the usage of this donation modal #339 (comment) would be wide-ranging.

If the Open Collective team needs some help, possibly some resources could be directed with a bounty?

[Betree]

@gusaus I also think that such widgets that would allow you to contribute to a collective without leaving their website would be really useful. In France https://www.helloasso.com provides such widgets and they've been massively used by associations because it's so easy to embed and it really simplifies the contribution process.

I'm not sure why #339 was dropped, it looked pretty nice. @piamancini do you have more context?

[piamancini]

hmmm I'm not sure to be honest. Maybe because we did the standalone tiers?

[gusaus]

In France https://www.helloasso.com provides such widgets and they've been massively used by associations because it's so easy to embed and it really simplifies the contribution process.

https://donorbox.org/ is another great example referenced in #339 (comment)

There's also a more recent issue for a Tier widget #2169

As mentioned above #2230 (comment) we're working on what could be a pretty high profile implementation. Considering @hestenet (who posted this feature request) is one of the drupal.org technical leads, there's a current opportunity to collaborate as we detail our implementation plans. https://www.drupal.org/project/funding/issues/3094549#comment-13515594

[Betree]

By looking at it again, #339 actually proposed two things: resign the contribution flow and create a widget to embed it. I believe it was closed because the first part was done - which was the right thing to do, issues should always be contained and have a clear scope.

I'll create another issue now to extract the idea of an embedded contribution flow, I still think it could be interesting.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. We haven't had the time to address it yet, but we want to keep it open. This message is just a reminder for us to help triage issues.

[viktorix]

+1 on this

[Betree]

Another request for this.

It looks like there could be a pretty simple way to achieve this:

• Isolate the "Goal / Contribute" card in a separate component (e.g. TierGoalCard)
• Create a new pages/embed/tier-goal.js that fetches the necessary data, re-use the features we've implemented with the embedded contributions flow (e.g. EmbeddedPage)
• Document it