@sunsama/splash
Advanced tools
@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
@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:
@sunsama/splash in the <HEAD>SunsamaSplash.default.initialize("production)once theDOMContentLoaded` event happens via the footer.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.
emailemail-form.<body> tag section":
<script>
window.pageTrialLength = {{wf {"path":"trial-length","type":"Number"\} }}; // This weird stuff is the CMS Collection Item
</script>
data-trial-text = ""blog-post_subscribe-button/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/5154Note: When duplicating elements into new pages in Webflow, you might get things like name-2, so be careful here.
This library will automatically show different versions of a page and log the version to Amplitude for AB Testing. Here's how it works:
In Webflow, create multiple copies of an element you want to test e.g. a Headline
Navigate to the Attributes and set them like so:
data-experiment=${experimentName}data-variant=${A|B} // Currently only support A or Bhidden="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.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
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.
Run npm test for running Cypress tests in CLI, or npm run test/dev for the UI.
npm publishFAQs
@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
The npm package @sunsama/splash receives a total of 4 weekly downloads. As such, @sunsama/splash popularity was classified as not popular.
We found that @sunsama/splash demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.