Onboarding Landing Page

[MoeNick]

https://docs.google.com/document/d/101QsSCJNaw_JyOKmBG_RExZakDkolLZXUEc3XFgFeOI/edit#

          hey @c0ric0ri @danelsuga @laurenluz , I cleaned this up and incorporated all of your feedback (as much as I could!) Let me know if you have any comments on this next version: https://docs.google.com/document/d/101QsSCJNaw_JyOKmBG_RExZakDkolLZXUEc3XFgFeOI/edit#

Originally posted by @ahmadabugosh in https://github.com/Giveth/giveth-planning/issues/1254#issuecomment-1521958719

[RamRamez]

@MoeNick What is the desired URL for this page?

[ahmadabugosh]

@MoeNick @RamRamez Can we make it "giveth.io/onboarding" ? (since it's a main page we'll link from the homepage)

[MoeNick]

Due to design problems, @ahmadabugosh asked for changes and @mosaeedi will talk with @Tosinolawale to handle it.

[divine-comedian]

What's the status here @RamRamez @ahmadabugosh ?

[MoeNick]

@mosaeedi asked @Tosinolawale to take care of its design I remembered.

[Tosinolawale]

Onboarding landing page, with information and the option of exploring Giveth either as a project owner or Donor

Explore Giveth as a project owner and explore GIVeconomy

Explore Giveth as a Donor and GIVeconomy

Explore GIVeconomy

Figma link to file here https://www.figma.com/file/hNqwpebu4JCy1XIed2c862/Giveth-Public?type=design&node-id=561%3A47194&mode=design&t=J7X4cOX7OFudjWQh-1

[MoeNick]

Cool. We need @ahmadabugosh @oyealmond confirmation before implemantation

[Tosinolawale]

Cool. We need @ahmadabugosh @oyealmond confirmation before implemantation

Yes, I will also provide the Responsive and Mobile designs

[ahmadabugosh]

Thanks @Tosinolawale ! Made some comments on the Figma, once those are done I think we're good to go.

[RamRamez]

Great! Thanks @Tosinolawale

@ahmadabugosh Please provide the URLs for hyperlinks and the desired URL for each design

[oyealmond]

can you add the Instagram logo in the social media icons @RamRamez? I added the link

[ahmadabugosh]

Left a bunch of comments and also added all the links @RamRamez (I also emailed you the code for the form on the top)

[divine-comedian]

@Tosinolawale can you confirm this with @RamRamez

Let's start work coding this on your Sunday Ramin and we can make minor adjustments before release.

[Tosinolawale]

@Tosinolawale can you confirm this with @RamRamez

Let's start work coding this on your Sunday Ramin and we can make minor adjustments before release.

Yeah, will make all the changes before the end of my day. Implementation will be able to start Sunday

[Tosinolawale]

@RamRamez @divine-comedian dine with all the changes and I’ve also implemented the responsive layouts and mobile pages

[divine-comedian]

Thanks Tosin! @RamRamez - looks like it's ready for you.

[RamRamez]

Thanks Tosin! @RamRamez - looks like it's ready for you.

Great! I'm on it.

[MoeNick]

From @ahmadabugosh i would suggest giveth.io/onboarding for the main one and the other 3 giveth.io/onboarding/donors giveth.io/onboarding/projects giveth/onboarding/giveconomy

[maryjaf]

By entering valid or invalid email address and then taping ob Discover the Future of Giving, nothing happens @RamRamez Private Zenhub Image

[RamRamez]

By entering valid or invalid email address and then taping ob Discover the Future of Giving, nothing happens @RamRamez Private Zenhub Image

That section is not implemented yet. I'm waiting for @ahmadabugosh to send me the form destination.

[ahmadabugosh]

hey @RamRamez , Can you clarify what you mean by form destination? I don't get your point.

You mean the form itself or the thank you page / text for the form?

I emailed you the form itself a few weeks ago (the HTML setup instructions), let me know if you need me to resend it

[RamRamez]

hey @RamRamez , Can you clarify what you mean by form destination? I don't get your point.

You mean the form itself or the thank you page / text for the form?

I emailed you the form itself a few weeks ago (the HTML setup instructions), let me know if you need me to resend it

Hey @ahmadabugosh I haven't received the email. Can you please send it again?

[ahmadabugosh]

@RamRamez No worries, just sent it on Discord

[MoeNick]

@RamRamez any updates?

[RamRamez]

There's 2 new requirements added to this landing page, one is the Ortto form and another one is an external script that will be run by google tag manager, that will act as the form functionality.

1- The form: I think the form design doesn't fit our Figma design. This is the preview link: https://giveth-dapps-v2-git-test-onboarding-form-givethio.vercel.app/onboarding

2- External script: It has script errors and I think it won't run on production

External scripts are not suggested because they add lots of unnecessary codes and functionalities to the app. Here, we have a form and the only requirement is to send an email address to an endpoint, but some big styles and a big JS file is imported. I suggest we use their API and send the form with React without adding any external script.

For now, I suggest we do the landing without input form and scrips (for email address part) and launch it and follow up these issues in another issue.

@divine-comedian what do you think?

FYI @ahmadabugosh @MoeNick

[divine-comedian]

Let's try out using the autopilot API directly, instead of using the form we can capture the email directly and trigger the email using this API:

https://autopilot.docs.apiary.io/#reference/api-methods/trigger-journey/add-or-update-contact

We'll need to set up the proper API trigger on autopilot and get the trigger ID to give to Ramin @ahmadabugosh

then we configure the API request like: POST /v1/trigger//contact/ HTTP/1.1 Host: api2.autopilothq.com Content-Type: application/json autopilotapikey: Content-Length: 105

{ "contact": { "_autopilot_list" : "" } }

[ahmadabugosh]

@divine-comedian we can try this, but we have to use the new Autopilot service (the one you shared will be deprecated at the end of 2023). They're rebranding to Ortto, so we have to use their new API: https://help.ortto.com/developer/latest/developer-guide/creating-and-updating-people/

@RamRamez Should we coordinate this over DM's?

[divine-comedian]

Oh really? I can't find anything in their docs that triggers a journey from API.

At any rate we should start thinking how to use their APIs directly since we will probably move this direction to stop using segment for the dapp

[ahmadabugosh]

@divine-comedian Yeah I don't see a way to add people to journey's directly from the API, but we can add them to an audience or add a tag to that user through the API, then in the dashboard we can manually make a Journey that starts with that criteria (triggers when a user is added to an audience or a tag is added to a user).

[divine-comedian]

Had a chat w/ customer support - they couldn't confirm the date that autopilot will be deprecated, but that it will be at some point, very unfortunate.

We do have however an API for sending emails directly https://help.ortto.com/developer/latest/developer-guide/using-the-api-to-send-emails.html

[ahmadabugosh]

@divine-comedian I think it may be better to not send emails through the API's, since we'd have the define the whole journey in the backend and it would be hard for the Comms team to make changes to emails or journeys that way.

I think it would make more sense to set a tag or add users to an audience via the API, then we can define what journey they get enrolled in from the dashboard.

BTW, this is what I see when I send an email in Autopilot now

[divine-comedian]

@divine-comedian I think it may be better to not send emails through the API's, since we'd have the define the whole journey in the backend and it would be hard for the Comms team to make changes to emails or journeys that way.

I think it would make more sense to set a tag or add users to an audience via the API, then we can define what journey they get enrolled in from the dashboard.

BTW, this is what I see when I send an email in Autopilot now

Ah looks like its official - my bad I can see now journeys in ortto are classified under campaigns - I sent an email to support to see if we can trigger a campaign journey from an API - here is their response:

Ortto doesn't have a direct entry condition to add contacts to a journey via API, but this can be accomplished by using a tag as the entry condition for the journey and tagging the contact via API.

Our developer resource is available for reference if you'd like to check it out here: https://help.ortto.com/developer/latest/developer-guide/creating-and-updating-people/tagging-and-untagging-people.html

So maybe we create the desired email journey with the tag condition - then in this text field here we can add the contact via their input email and give them the tag?

[MoeNick]

Guys, can we ship this landing without the form and Ortto script and continue discussing on other issues for these 2 requirements?

(When it's said its a simple landing and we have a design, it's expected to deliver it in 3 hours, if we have other requirements it will be a PM thing and we have to clarify it BEFORE assigning it to devs. )

@ahmadabugosh @divine-comedian

[ahmadabugosh]

Hey @MoeNick we kind of need the form, because we want them to enter into an email sequence and we did specify in the design phase we needed a form as well.

What is the blocker now? 1) For the Ortto script, I added it inside Google Tag Manager which is active on our production environment. Can't we just do it that way?

2) For the form design, can we just make minor changes to it to fit in with the Figma design? From what I can tell it's just HTML and CSS, can't we just edit it, even if it's with inline CSS?

[MoeNick]

@mosaeedi can you update us on this issue ?

[mosaeedi]

We have this on Figma -> Figma link

[RamRamez]

I merged the onboarding landing page to production just for testing. https://giveth.io/onboarding I didn't change the original styles of input form for testing purposes I submitted an email address in the form test@ramin.com @ahmadabugosh can you please check and see if the email address is submitted or not?

[ahmadabugosh]

hey @RamRamez , yes it worked!

For some reason your test email didn't (maybe because it was marked as spam), but when I tried multiple regular inboxes it went through fine.

I think now we just have to figure out the design part.

[RamRamez]

1. When the email is submitted, no confirmation message is shown. There's a thank you page in the html code from Ortto, but the external script doesn't show it for some reason. Is this acceptable? (I can't fix this problem because the form submission is handled by the external script)

2. I updated the input form as per Figma design. You can check it here: https://giveth.io/onboarding

I submitted an email address (ramin@giveth.io), @ahmadabugosh can you please check again to see if the form is working correctly? I want to make sure it's still working fine after changing the original styles (I tried to keep all class names and html tag IDs to make sure the external script will find the form).

[divine-comedian]

From the dev call today:

Can we bring this script into our codebase internally? Ramin mentioned it will be easier to maintain and integrate into the platform

Also this is the email I receive - Is it not possible to add any designs or is it supposed to look like this?

[ahmadabugosh]

1) @RamRamez I'm not sure why your email is not showing in the system. I got mine, Maryam's and Mitch's but yours is not showing. Are you blocking scripts in your browser maybe? I tested it just now and it worked fine from another email.

2) We do get a confirmation message on the screen when you fill the form (see below):

3) Can you clarify what you mean @RamRamez by "Ramin mentioned it will be easier to maintain and integrate into the platform"? How exactly would it be easier to maintain?

Google Tag Manager makes it super easy to add, remove and edit tags without needing to push new releases to the dapp (I just added you to our Google Tag Manager account, so you can test it out yourself)

4) @divine-comedian We made it text only intentionally since text only usually has a higher open rate and gets higher engagement for these types of emails.

[ahmadabugosh]

@divine-comedian I think it's good to go now and meets the requirements

[RamRamez]

@ahmadabugosh I'm using AdBlock and Privacy Badger Chrome extensions for privacy reasons and blocking ads. I disabled those two extensions then I could successfully see the email submit confirmation copy and I got the email.

Also, I checked this on Brave browser (it has a built-in default ad blocker that blocks trackers), and the email submission wasn't successful.

So, Brave users and users who use adblockers are not able to submit their emails. If this is acceptable, we are good to go. Sending post requests with external scripts is not a standard way though.

[RamRamez]

@ahmadabugosh Also, I can see that the Ortto script runs on all pages. Is it possible to run it on /onboarding page only?

[divine-comedian]

Create the form internally? use our own form, with HTML, have to have normal post form, captures it with html and send that to the API ourselves.

now their script is the one that is sending the form, ortto has a script is through ortto - they are sending the email to their database. if we created the very simple form and create it locally.

ramin suggestion was to launch the onboarding page, good enough for chrome users - lets launch it and track it in another issue and we can use their API to send the form.

This page is for new users to web3 - the audience of the people who use this form might not have ad blockers installed.

we need to link this page to the homepage somehow - need to make follow up issue

Let's launch it as is and follow up in later issues