@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 amplitu

npm

Version: 1.4.0

Version published: 3 years ago

Weekly downloads: 6

Maintainers: 5

Weekly downloads

Created: 5 years ago

Source

@sunsama/splash

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
The id of the field for the "email" input when creating a waitlist record should be email
The id of the button to "request access" and create a waitlist record should be request-access
The id of the button to "start a trial" and go to the app.sunsama.com signup page should be create-account

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-splash-test/code and save changes
Republish the Webflow Page

FAQs

What is @sunsama/splash?

Is @sunsama/splash popular?

Is @sunsama/splash well maintained?

Package last updated on 29 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install