@sunsama/splash
@sunsama/splash is a NPM Package that holds all the business logic necessary for our Webflow Splash pages. It makes it easy, as a developer, to build the logic for things like generating waitlist records, tracking facebook pixel values, generating amplitude device ids, tracking affiliate page views, and redirecting users to the right page.
The goal of this package is that you should only need to do three things in Webflow:
- Import
@sunsama/splash
in the <HEAD>
- Initialize the package with the environment with
SunsamaSplash.default.initialize("production
)` - Set the correct id on critical CTA elements like name and email fields and buttons.
If you do that, all the business logic should just work.
The project also contains webflow-simulator
which is a barebones Express app meant to simulate our Webflow pages. It allows you to test your changes to @sunsama/splash
against a real UI on localhost. It's a bit of extra work to maintain this and keep it "in sync" with our Webflow pages but it's helpful because it simplifies local development.
Webflow Requirements
- The id of the field for the "name" input when creating a waitlist record should be
name-header
or name-footer
- The id of the field for the "email" input when creating a waitlist record should be
email-footer
or email-footer
- The id of the button to "request access" and create a waitlist record should be
request-access-footer
or request-access-header
- Any elements who direct to the app.sunsama.com signup page should have
create-account
custom attribute set (e.g. 'start trial' buttons). - Any elements who direct to the app.sunsama.com signup page via the waitlist should have id of
create-account-via-waitlist
. - If a CMS Collection page wants to offer a special trial length it needs this custom code in it's custom code "Before
<body>
tag section":
<script>
window.pageTrialLength = {{wf {"path":"trial-length","type":"Number"\} }}; // This weird stuff is the CMS Collection Item
</script>
Note: When duplicating elements into new pages in Webflow, you might get things like name-2
, so be careful here.
Local Development
From the root of the repo bring up the basic web app service:
make install
make start-lite
Then bring up the "development" environment here
cd library/splash
npm install
npm start
This exposes an extremely basic HTML page at localhost:8080/
that has two text fields and a button that match the webflow pages. The page has the built script bundle imported in it's head and a single call to initialize it SunsamaSplash.default.initialize("development");
after the body. The goal is that we can do the same thing in Webflow and simply change code here.
Testing
Run npm test
for running Cypress tests in CLI, or npm run test/dev
for the UI.
Publishing
- Update the Package Version
- Publish to NPM
npm publish
- Increment the Version in Webflow: https://webflow.com/dashboard/sites/sunsama-new/code and save changes
- Republish the Webflow Page