Build "Take Action" widget

[mmontesanonyc]

Some details and backstory here.

A Take Action page would let a user:

• enter their address and get their City Council district
• Provide an email address for their CM
• Automatically draft an email (based on some 'select topics you're concerned about' function?) about issues, and citing our website
• Email using a mailto link.

We can also build out other Take Action functions, including a 311 widget, and links to a limited set of advocacy orgs/CBOs working on relevant issues.

[mmontesanonyc]

I think there are a couple of first steps here that I'd like to get moving on -

• [x] Build shell page (MM)
• [ ] Build initial locator feature (GC) - this would let a user input an address and return their council district. Here's old code that Grant built to identify the parent NTA of an address (on index.html) - can this be adapted/revised for council districts? Council districts geojson are here.

[mmontesanonyc]

Shell page built here. Right now it just has a very rough interaction pattern built into it - @cgettings, can you build the initial locator feature? Enter address, get council district?

[mmontesanonyc]

I poked around with this geocoder that Grant had initially put together - it uses the nyc-lib npm package maintained by DOITT, part of the NYC Core Framework.

anyway, it's almost all automatic - it handles the geocoding, and returns a map.location object. map.location.data is full of a bunch of info we can use (much more than pictured here).

[mmontesanonyc]

So here's the challenge, @cgettings - grabbing council district, name, neighborhoods, and email address from this page.

Would love if we can make this a js object so that the geocoding can get us the council district, and we can match/filter the js object to return the council member's name, neighborhoods, email address.

[cgettings]

This will be really easy with R. I can write something for the EHDP-data repo, then we can grab the JSON like all the other data.

[mmontesanonyc]

🙏 that'll be great, thanks!

[mmontesanonyc]

Basic functionality is in place, though will note that the JS-generated email address isn't accurate (for districts with a single digit the email address is just District1@... but the code-generated email addresses are District01@...) and the text formatting is not idea. Plus, I'm fiddling around with some better display/interaction-flow approaches.

[mmontesanonyc]

I've done a bunch of fiddling to iron out formatting issues, and I think the only thing outstanding is getting CM's names in there - so @cgettings if you're able to do that R scrape and generate that file, then I'll add a few more fields from that file (CM's names, neighborhood names).

At that point I'll want to merge to development, share with Mike and Cari, and have a conversation about what other kinds of actions we can support.

Will be good to brainstorm some additional text to incorporate to this, too - I'm sure I didn't get it right on the first time. And, we could also build a GA4 event so that we can track the number of sent emails (or at least, the number of times somebody clicks "send emails" - the final event is out of our hands).

[mmontesanonyc]

Heya, I'd like to get moving on this - think you can run that scrape @cgettings ? Or maybe you'd like to delegate to AM? Can chat in today's site meeting.

[mmontesanonyc]

Merging this to development so we can demo to folks.

[mmontesanonyc]

A couple things are sliiiightly wonky.

• I can't quite figure out the best way to convert text to email body and preserve the formatting.
• I've got some awkward approaches to sentence formulation, mostly involving adding the word "and."

I'm sure this is iron-outable, but also want to get some conversations moving in the review chain.

[mmontesanonyc]

NB: I moved the email widget to a subpage of the Take-Action section, so that we can have the dialog as another subpage.

[mmontesanonyc]

Email function

• Polish MVP and show to CO.
• Likely form: launching from a modal
• Enhancement: adding other electeds (bp, state rep, congress, etc). Add phone numbers for offices. BCC us? GA event on sendbutton.

[mmontesanonyc]

Got this into a modal fired by a button on the DE, below keywords. It works a little bit awkwardly:

• map library loads a little inconsistently, and i had to add some classes to get some screenreader buttons offscreen. Want to look into it to see if some library CSS isn't loading.
• Currently functionality is a little awkward on copying the text to an email. I'm not sure if the best way to use JS to copy semi-formatted text. Currently doing textEntry.textContent = textDestination.innerText and then doing var body = textEntry.textContent (more or less).
• Haven't done it so that the topic is reflected in the TA widget but that's a clear enhancement that makes it very specific instead of general.

[mmontesanonyc]

Revising this functionality... Some notes:

• First, we're largely using the Google Civic Information API. However, this doesn't have NYC Council Members. So, the app hits the nyc-lib map library and returns the City Council District. That looks up information in our city council csv. Then, the app sends the address along to the Google Civic Information API and returns the rest of the elected officials. A little cludged behind the scenes, but works well.

Notes for next week:

• Fetching API will dump each official, their office, and their contact information into an allReps JS object or something like that
• When it's done, we can loop over that object and create table rows with the contents
• For the officials without email addresses, we can add a default note to give their office a call instead
• Then, for everyone for whom there's an email address, we'll create buttons to go next to the text field. User will send one email at a time. This will probably benefit from user testing.
• I dumped some quick n rough copy into the "Email tips" but this can benefit from some more attention for sure.
• What's the best way to build a text entry field that will pass along a little bit of formatting?

[mmontesanonyc]

Hi all, big updates to Take Action are up on the feature-take-action branch - serve that up and go to ... `/EH-dataportal/take-action/email-electeds.

A few requests:

• Can you shake this around and try to make bugs happen? Do weird interaction patterns and see if you can break it.
• Emily - could you please strengthen the page intro, and edit those email tips?
• And, generally, I'm all ears on suggestions for this.

@cgettings @etorem @sportsmanam

[etorem]

• it seems like when you go back to the map after having looked at the email send page, the button that allows you to go to write an e-mail doesn't seem to work a second time. This doesn't happen if you change out the address. Not a big deal I don't think.
• Is there a way to scoot the E-mail tips down just a smidge from the top of the browser when it first opens? Maybe it's just my browser.

[mmontesanonyc]

@etorem thanks! i think that first one is a real issue for sure - I've got to make sure that somebody can go back to the beginning and re-do if they want to.

[mmontesanonyc]

• add Community Boards to email function (here)

• low hanging fruit: 311 widget.

• [ ] census 311-able topics on the EHDP

• [ ] create crosswalk to the right 311 destination (list, single ex)

• [ ] think through prompt design/placement and management (topic-level markdown frontmatter?)

[mmontesanonyc]

Create crosswalk as yaml file in /data directory - for /data-explorer content. (Or all content? Start with data-explorer and go from there.)

Crosswalk: indicators to relevant 311 topics with KA-codes.

We'll have multiple options for many indicators; instead of 311 button, 311 button launches modal with specific options. Can also include "search 311 for [general option]" and use search result format, eg https://portal.311.nyc.gov/search/?q=housing

[mmontesanonyc]

Requested: remove 'email' functionality, retain tips.

[mmontesanonyc]

@cgettings, @etorem - mocked up the 311 jawn in feature-311-links branch. Please take a look and LMK thoughts - thanks!

[etorem]

That's great - I think it looks good! One thing to consider is that, although the first indicator in the list loads automatically for some topics; you have to actually click on it for the 311 menu options to appear at the bottom of the page. I wonder if that means people might not notice it's there if they are just browsing the first available indicator instead of going deeper into the other datasets?

Some examples:

If you click on Air Quality > Asthma, this doesn't occur and the button appears at the bottom.

If you click on Healthy eating > Unhealthy food access, this does occur and the buttons do not appear until you click on the first indicator. This also occurs with Climate > Daytime Summer Surface Temperatures

[mmontesanonyc]

yeah, thanks for spotting that - I've was fiddling with some things in the loading order, but couldn't quite get it... I think I have now.

[mmontesanonyc]

OK, 311 is merged into dev - I'd like to share this with some folks to get their take on it.

[mmontesanonyc]

NB: consolidated implementation on dev, awaiting go-ahead on prod, all merged together at feature-take-action:

I went with:

• Keywords directly below the topic text, since that's what they're about
• Badges for 311 links (using badge-primary)
• Button for Take Action.

[mmontesanonyc]

Closing, deployed!