Add polite CTA to articles

[laurosilvacom]

Articles have ZERO CTAs. Adding CTA's to articles is essential to customer acquisition and retention. A good first step is adding the "Polite" multi-stage CTA component to the articles. It is polite and inviting when reading an article. It's multi-stage and gives the user the opportunity to "eject" at any time.

Live Example

Untitled.mp4

Implementation Details

The component already exists in the Skill Recordings Starter and it has been implemented in several partner products.

The current implementation of the component uses Convertkit for the subscribe form. We will be using Customer.io instead and summiting the form to the "New Learner" campaign.

We can create a new subscriber form using the EmailEntryForm component.

Own your Online Presence is an example that uses the customer.io EmailEntryFrom component.

Are there any additonal considerations missing here?

Copy

Pending TODO on the actual copy of the CTA

[joelhooks]

I think this switch statement is relevant here as a sort of "proto-plinko"

https://github.com/eggheadio/egghead-next/blob/main/src/components/app/header/index.tsx#L48-L73

So we can take a look at converkit, customer-io, and egghead data and determine what is the appropriate CTA to present to the current learner. This can start very simply!

[joelhooks]

related #826 discussion about the "global CTA plinko"

[MaggieAppleton]

In terms of the UX design of the component have two small notes:

1. If I type in an incorrect email address the error message shows up in english instead of spanish:
   
   We should double check all error messages are in Spanish so it's consistent across the site

2. I expected that clicking "no" would make the banner go away. Instead it did nothing. In general if we put a button on a screen it needs to be clickable and trigger an action.
   
   I'd recommend making "no" trigger the same action as clicking the small x in the corner – dismisses the popup

[laurosilvacom]

@MaggieAppleton good catch on both points!

[MaggieAppleton]

Re: plinko component. If we're going to build this as a reusable component and already getting the user to answer questions on an in-app pop-up, we may as well create the in the functionality to ask them multiple questions before delivering a CTA.

Eg. Do you want to improve you frontend skills? Yes / no --> What level are you at in your career? Just starting out / Junior / Mid-level / Senior --> Want our {introductory/advanced} series on {React/JavaScript}?

No sure how much that suggestion complicates matters.