Skip to content

Show users how to opt in to new Premium filter lists

Background / User story

As a new Premium user, I expect that the features I paid for to work straight out of the box, or that I have a clear way for turning them on and benefitting from them.

We're introducing a new Premium list as part of https://gitlab.com/adblockinc/ext/adblockplus/adblockplusui/-/issues/1347. As this list is not turned on by default for subscribers, and we want to make sure they understand the impact of turning it on, we want to show them a mini-onboarding.

As a result, we want to have a dedicated landing page within the extension, that can be linked to from the ABP website. When a new Premium user completes the purchase flow, a confirmation message is shown as well as a CTA that encourages the user to finish their Premium setup. Once a user clicks on the CTA on the ABP website, the extension landing page opens and the user can opt in to Premium filter lists that aren't enabled by default, or turn off those that are.

This onboarding page packaged with the extension will also serve as a basis for future onboarding needs. Currently, aside from a Welcome email, Premium users don't receive any sort of information about what they can do with their new subscription post-purchase.

What to change

Hints for testers

  • This change doesn't contain the trigger for opening the Premium onboarding page (see #1453 (closed)).
  • This change doesn't contain the new cookie filter list yet (see #1454 (closed)), so the checkbox for enabling it doesn't work yet. In the meantime, you can change the following line in the build's premium-onboarding.html file to have the checkbox refer to the existing cookie filter list instead:
- <io-checkbox data-feature="cookies-premium" disabled></io-checkbox>
+ <io-checkbox data-feature="cookies" disabled></io-checkbox>

Hints for translators

Added new translation file "premium-onboarding.json".

Edited by Thomas Greiner
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information