# @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 `` 2. Initialize the package with the environment with `SunsamaSplash.default.initialize("production`)`once the`DOMContentLoaded` 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 `
` block and follow these rules: - The `id` of the email `` must be `email` - The class of the `` 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 `` tag section": `` 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 `