Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@sunsama/splash

Package Overview
Dependencies
Maintainers
4
Versions
106
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@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

  • 1.5.3
  • npm
  • Socket score

Version published
Maintainers
4
Created
Source

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

  1. Import @sunsama/splash in the <HEAD>
  2. Initialize the package with the environment with SunsamaSplash.default.initialize("production)`
  3. Set the correct id or data-tag on critical elements in Webflow.

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

  1. The id of the field for the "email" input when creating a waitlist record should be email
  2. The id of the form to "request access" and create a waitlist record should be email-form.
  3. 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 {&quot;path&quot;:&quot;trial-length&quot;,&quot;type&quot;:&quot;Number&quot;\} }}; // This weird stuff is the CMS Collection Item
    </script>
    
  4. When a PartnerStack key is detected, we give a 30 day trial. In order for text like "14-day" to be replaced with "30-day" make sure to set the attribute data-trial-text = ""

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

  1. Update the Package Version
  2. Publish to NPM npm publish
  3. Increment the Version in Webflow: https://webflow.com/dashboard/sites/sunsama-new/code and save changes
  4. Republish the Webflow Page

FAQs

Package last updated on 03 Nov 2022

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc