Add Newsletter sign up box above footer

[ginny-d]

Is your feature request related to a problem? Please describe. The Stacks Explorer is one of Hiro's main touchpoints with its users, however there's no Explorer <> Hiro connection from a communications point of view

Describe the solution you'd like Adding a newsletter sign-up box to highlight this connection. This should be added only on the Homepage.

Additional context @elenananana Can provide additional context if needed

Designs can be found here: https://www.figma.com/file/31q1g27k69z1yXb6r6vrRD/Stacks-Explorer-Working-File?type=design&node-id=6809%3A32205&mode=design&t=FkmHd2FPaShjdZ8S-1

[andresgalante]

@eugeniadigon Where does this widget go?

[ginny-d]

Apologies, I linked to the component but forgot to link the full page

In context: https://www.figma.com/file/31q1g27k69z1yXb6r6vrRD/Stacks-Explorer-Working-File?type=design&node-id=5720%3A1977&mode=dev&t=eHaS1nGj2AtHTgRN-1

[He1DAr]

Ordinal explorer uses Digioh https://help.digioh.com/knowledgebase/install-digioh-lightbox-via-html/ which is a WYSIWYG plugin. @eugeniadigon can you please look into creating these widgets in Digioh?

[ginny-d]

@max-crawford Maybe you can chime in here?

The issue I see is that on Ord explorer we just replicated the one we're already using on hiro.so footer, which is hiro-branded and was already done (not by anyone in the marketing team atm). The Stacks Explorer one should be on brand with the Stacks Explorer UI, hence why it's different. I'm not sure if from the marketing team we have the ability to recreate it on Digioh.

[max-crawford]

You are correct. I've never built a custom form in Digioh before, so I don't know what the scope is for building from scratch. It's also likely I won't be able to recreate this form on a 1:1 basis.

I'm planning to spend time this afternoon playing around with Digioh to see how feasible this is.

[max-crawford]

After playing around for 90 minutes, I was able to create a prototype of the Explorer email capture form in Digioh: https://account.digioh.com/Box/Editor/271156

From that link, you can preview the form and interact with it to see its responsiveness, error messages, etc.

I can share the login credentials for Digioh via Slack if you need them.

A couple notes:

• The design isn't perfect. Some details are proving harder to implement than others (obvious callouts are error messaging icons, and stretching the privacy policy notice across both the email form + button).
• I haven't built any breakpoints/responsiveness yet.

There's a bit more tweaking we can do to dial this in further, but before putting any more time into it, I want to surface a possible blocker.

Digioh forms cannot do light mode/dark mode. We would have to build two distinct forms with two different HTML tags embedded in the explorer, e.g.:

Is it possible to toggle between two different forms as users toggle between light mode / dark mode in the explorer?

[andresgalante]

@max-crawford would you be able to grant access to @eugeniadigon so she can check the result please

[ginny-d]

I have access to Digioh now and have polished the form a bit, and added the mobile breakpoint.

We still have to figure this out @He1DAr :

Digioh forms cannot do light mode/dark mode. We would have to build two distinct forms with two different HTML tags embedded in the explorer, e.g.: Is it possible to toggle between two different forms as users toggle between light mode / dark mode in the explorer?

[ginny-d]

@He1DAr Here are the HTML tags to embed the forms:

Light mode: <div id="lightbox-inline-form-50d327d3-62d7-4896-a6d3-1363b5923751" style="text-align: center;"></div>

Dark mode: <div id="lightbox-inline-form-7c685cbe-1f06-4608-aed4-eacbda36083e" style="text-align: center;"></div>

[andresgalante]

Due to the tool's limitations, we'll hide it in dark mode. Only show it in light mode.