npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sunsama/splash

v1.7.3

Published

@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

Downloads

25

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

sunsamadevsunsamadevbrunobernardinobrunobernardinojaaproodjaaproodpriyadarshypriyadarshybone-sawbone-sawcallaarscallaarszanemccazanemcca

Keywords

Readme

@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)once theDOMContentLoaded` event happens via the footer.
  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

Email Capture Form

If you want to display an element that takes an email, creates a lead (waitlist record), and then forwards the user to the app page:

The email capture form should be a <form> block and follow these rules:

  • The id of the email <input> must be email
  • The class of the <form> must be email-form

Signup from App Button

If you want a button that takes the user to app.sunsama.com/signup:

  • The button needs data-trigger-signupbutton

Trial Length Display

In some cases, we want to display a non-standard trial length.

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> 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 = ""

User Referral Name Display

On some pages, we want to show a banner with the name of the user (not affiliate/ambassador) who referred you.

We do this with the data-refferal-name attribute being set on text element that has the word someone in it. When the page loads, we replace someone with their name, if the tag is present.

Blog pages

The Blog Newsletter sign up button must have the class blog-post_subscribe-button

Conversion Pages

In Webflow, the set of pages under /conversion are used to fire Google analytics events from "in-app" events. For example, when a user starts a trial inside of app.sunsama.com, we render a hidden <iframe> that loads these conversion pages where the Google analytics code runs. See: https://github.com/sunsama/sunsama/pull/5154

Warnings

  1. When duplicating elements into new pages in Webflow, you might get things like name-2 in the id, so be careful here.

AB Testing

This library will automatically show different versions of a page and log the version to Amplitude for AB Testing. Here's how it works:

  1. In Webflow, create multiple copies of an element you want to test e.g. a Headline
  2. Wrap that element in a <div>
  3. Navigate to the Attributes and set them like so:
    • data-experiment=${experimentName}
    • data-variant=${A|B} // Currently only support A or B
    • data-bias // Number between 0 - 1 that controls how often A is shown relative to B e.g. 0.9 would show A 9 times out of 10, this must be set on the A variant. Defaults to 0.5
    • hidden="true" // This is optional and for your sanity in Webflow, you might make your A variant not hidden and your B variant hidden so you don't see duplicated items in the Webflow editor.
  4. When the page loads, the library will automatically unhide/hide the relevant variants and set an Amplitude User Property like { [Experiment ${experiment} Variant Group]: desiredVariant } that you can use to segment events/funnels on.

Demo: https://www.loom.com/share/34a447768d6346c98bdbbe3451a32957

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:3010/ 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