Create new snippet for call campaigns integrating Callpower

[benhohner]

We need to integrated the Callpower call activism tool into Fo'Mo. It allows you to enter your phone number and receive a call that connects you with one of more of your local representatives. The purpose of this is for the new head of the FCC election. We'd like to reach out to people to get them to express support for a progressive ex-mozillian candidate.

• [x] Create a new campaign snippet type for call campaigns
• [x] Reference code from previous implementation (Pomax to find)
• [ ] Add a checkbox for signing up for the email newsletter.

old code:

• https://github.com/mozilla/advocacy.mozilla.org/blob/995854531662ba7a4edd52a6613a0e4daa6e0702/src/components/net-neutrality/call-tool.js
• https://github.com/mozilla/advocacy.mozilla.org/blob/995854531662ba7a4edd52a6613a0e4daa6e0702/routes/call.js

[Pomax]

Callpower code in our old donate repo: https://github.com/mozilla/advocacy.mozilla.org/blob/master/routes/call.js

[benhohner]

@benhohner to add docs from call with Josh

[benhohner]

Notes from meeting with Josh:

• Can submit directly to callpower with a form post.
• Add a js hook on the submit action, to send to both CRM and callpower
• Response in json says Call queued
• Often want to show someone what to say when they're talking. Can either store in callpower or on site. Use that to show a modal or something.
  • e.g. "We're calling you now. Here's what to say."
  • Phone will call with delay, can set delay
• https://github.com/OpenSourceActivismTech/call-power/blob/master/INTEGRATION_JS.md#calling-endpoints-directly, easiest way, if you have devs, don't need to use
• Testing?
  • Make a test campaign, run as many calls through it as you like
• Volume
  • Set up on couple thousand calls per month.
  • If we end up running hundreds of thousands of calls per month, let Josh know, he can bump up server resources.
• Gotchas
  • Their rep. If you call one number, you can overwhelm the target.
  • There is a rate limit, so people don't call numbers more than a couple times an hour

[Pomax]

Looking at https://github.com/OpenSourceActivismTech/call-power this appears to be a "deployable by us" server that we need to provision on Heroku, rather than an already-established third party API that we make API calls to. Is that the actual intention here? Because that opens up a whole can of security concerns.

[benhohner]

We're just looking to call their RESTful API to submit a call action to it when someone fills in their phone number. We definitely don't need to host anything!

On Thu, Sep 9, 2021 at 7:48 PM Pomax @.***> wrote:

Looking at https://github.com/OpenSourceActivismTech/call-power this appears to be a "deployable by us" server, is that the actual intention here?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mozilla/foundation.mozilla.org/issues/7284#issuecomment-916492035, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALFHMM76VWIF46XQ7RIGNLUBE2VBANCNFSM5DCI63FQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Pomax]

@ben I cannot find any documentation on that RESTful API or which endpoint(s) to use, could you (or someone else) either drop that information into this issue, or communicate that to me through non-public channels?

[Pomax]

While it's easy to implement this as extension to CTA, having existing campaigns allow for "any extension of a CTA" is proving fairly complicated in wagtail (as in, not sure if we can do this) so I'm asking for help on the wagtail slack, but if this isn't possible we may need to rethink how we want to do this.

[benhohner]

Hey @kristinashu we're almost done integrating callpower, wondering if you could assign to a designer to review the UX/UI with Pomax?

[kristinashu]

Hey, you can put me down for now.

[Pomax]

bumping the estimate up for this one, because our old React code is properly old at this point, and quite convoluted for current React devs, and just writing some clear, concise, modern plain JS to work with the django-template's HTML directly is going to be much, much more maintainable going forward.

[Pomax]

Working on this, some questions:

• what kind of hook to the CRM are you looking for? (the callpower handling can be done entirely client side, is there a way we can trigger CRM activity from the client, too?)
• how do we surface which country the callout is for?
• signing up for the newsletter requires knowing which locale the user is in, so pages like https://foundation.mozilla.org/en/campaigns/apples-anti-tracking-plans-iphone/ have a country picker, which might not be the best UI for this kind of CTA.

[benhohner]

@Pomax

• Callpower should be triggered entirely client side, but we will need a field in the snippet for the callpower campaign, that can pass through the template to the client side JS.
• AFAIK call power can detect the country by the phone number's area code, but maybe we should have a text field in the snippet backend for campaign creators to specify what countries are available (it will usually be between 1-3 countries)
• @kristinashu thoughts on whether to have newsletter signup for a call campaign snippet and how to specify to the user which countries are supported in the campaign in an MVP way?

[kristinashu]

Hey, I have no idea what this looks like or what the flow is. Do we know what the form fields are and what the flow is? Are there real examples of Call Power being used somewhere (not on our site but somewhere on the web)? I'm curious how they handle locations.

[Pomax]

Not sure, although in terms of what it looks like "right now" I now have a PR up with a review app over on https://github.com/mozilla/foundation.mozilla.org/pull/7577 that has a live demo page up on https://foundation-s-genericise-ftncey.mofostaging.net/en/campaigns/initial-test-bannered-campaign-with-fixed-title/

Note that the TOGGLE button is a workflow-faking-button that switches the CTA's content, as if you successfully presse the "make the call" button. Mostly as a convenient way for us to see what we're working on without having to constantly make actual calls to a test campaign.

@benhohner

1. yep, already in there (see https://foundation-s-genericise-ftncey.herokuapp.com/cms/snippets/wagtailpages/callpower/edit/27/)
2. that won't help us for newsletter signup purposes, though. Someone could be a US expat in France, and not want a French newsletter in the slightest, so if we want to fold newsletter signsup into this, we'll need to know which locale the user actually wants.

[Pomax]

I managed to run the old advocay site, where we presented it a very cyan way:

[kristinashu]

Notes from our meeting are here.

Here are some quick mock-up and I've shared it in slack for feedback from Kaili. Note: I'm assuming the snippet will be available on both Banner and Campaign page types.

[kristinashu]

Kaili said the mock-up looks good so this should now be unblocked.

[Pomax]

Here are some quick mock-up

Perfect, I will update the CTA template and model accordingly.

I'm assuming the snippet will be available on both Banner and Campaign page types.

Yep!

[Pomax]

@kristina it looks like the social share butttons don't cover the full column width, should they? Or should they be a smaller total width?

From the comp:

Using the same stacked layout component that is used for petitions:

[kristinashu]

Oh they should be full column, or whatever is already in use. Thanks for checking!

[Pomax]

For the "error" case, what do we want to show the user? I'm currently using "Something went wrong..." as heading and then the debug error, but that's not super great =D

The old Advocacy code uses the following possible body texts

"we don't know what's wrong":

We’re sorry, we seem to be having some trouble.
Please try again later.

Someone filled in a bad phone number (in this case I assume we want some kind of "back" button so the user doesn't have to reload the page):

We can’t call that number.

Someone's calling so much that they're getting rate-limited:

Thanks for your calls! You’ve reached the hourly limit. Please try again in an hour.

[kristinashu]

The old Advocacy ones sound good.

I would just edit:

We can’t call that number.

to

We're sorry, we can’t call that number. Please double check the number or try a different one.

And the other ones look good as is.

[Pomax]

Can do - do we want to offer users a "back" button, or do we want to automatically send them back to the form but with the description updated?

[kristinashu]

Please send them back automatically with the error text.

[Pomax]

https://github.com/mozilla/foundation.mozilla.org/pull/7577 should be ready for review.