Website logoFermion

Creating a custom landing page on Fermion

A custom landing page is a great way to drive traffic and attention with a specific campaign for your brand.

Whenever you create a course or a digital product on Fermion, you automatically get a sales page for the product. For most cases, that is sufficient. However, it might not be sufficient if you are an advanced marketer or have a team of marketing people with you who want to:

  • Run A/B test experiments
  • Have different landing pages for different mediums
  • Want to quantify the conversion rate, bounce rate, etc.

…among other reasons. This document lists how you can build a custom page on Fermion.

What is a custom page?

A custom page on Fermion is a page that you fully control on a source code level. That means, you can write raw HTML that needs to be served on that page and we’ll do that.

Would you also host CSS, JS, and other assets?

Yes, Fermion automatically hosts all static assets that are included in your build output, including:

  • CSS files
  • JavaScript files
  • Images
  • Fonts
  • Other media files (videos, audio, etc.)

When you upload your ZIP file containing the build output, we automatically:

  • Extracts all assets from the ZIP file
  • Uploads them to our CDN (content delivery network)
  • Makes them available through your unique CDN Prefix URL.

All assets will be served from a URL that looks like this:

Please make sure that:

  • All assets must be included in your build output folder before zipping
  • Assets should be referenced using relative paths in your code
  • The CDN ensures fast loading times globally
  • There’s no need to host assets separately – everything is handled automatically
  • Make sure your assets are properly optimized before building (compressed images, minified CSS/JS)

How to create a custom page in Fermion?

There are two ways to

Follow the steps below:

  • Login as an instructor in your Fermion school and click on “Custom pages”

  • Click on the button “Create New Page”

  • Enter a page slug here. Note that this can be any valid path. For example, if you want to group all your custom event-based landing pages with /event/ prefix, you can do that easily.

  • A text editor will open up with the ability to add any HTML-based code. You can add any code here.
  • Once you’re done and ready to publish, save your changes and hit on “Publish Page”

  • Once published, you can see that the page works.

  • Any time you feel you’re not ready, you can switch back the page to Draft mode and it will unpublish your page.

How do I include checkout links to my course?

If you have a course hosted on Fermion, you can add checkout links to your products as follows.

Any anchor link or button where the redirect URL is as follows will open the checkout page:

/api/buy-course?course-slug=<YOUR COURSE SLUG HERE>

Here is a documentation of all the URL parameters you can use:

  • course-slug: Slug of your course that you want the user to purchase. This field is mandatory and cannot be omitted.
  • discount-code: Any discount code that needs to be automatically applied to users’ checkout session. Note that this discount code must exist in your Course Discounts section inside your Manage Course area for that course. If it doesn’t exist or is expired, user will see an “Invalid discount code” warning, and they will be able to complete the checkout at full price. This field is optional and can be omitted.
  • prefilled-name: Add the name of the user here to be prefilled on checkout. This is useful if your landing page takes user input. This field is optional and can be omitted.
  • prefilled-email: Add the email of the user here to be prefilled on checkout. This is useful if your landing page takes user input. This field is optional and can be omitted.
  • prefilled-phone-number: Add the phone number of the user here to be prefilled on checkout. This is useful if your landing page takes user input. This field is optional and can be omitted.
  • smart-checkout-redirect: Set this to true inside parameter and if prefilled-email and prefilled-name is present, we will automatically redirect to the best available payment gateway. This reduces one step for user to complete.

Code Sample

Please make sure to encode values in your parameters properly otherwise it may break checkout flow. Use the following JavaScript code to construct the checkout page URL if you are unsure:

function initiateCheckout() {
	// assuming `initiateCheckout` javascript function is called on a button click

	const params = new URLSearchParams({
		'discount-code': 'EARLY_LAUNCH',
		'course-slug': 'my-awesome-course-slug',
		'prefilled-name': nameOfUser || '',
		'prefilled-email': emailOfUser || '',
		'prefilled-phone-number': phoneNumber || '',
		'smart-checkout-redirect': 'true',
	})

	// remove extra parameters
	params.forEach((value, key) => {
		if (value === '') params.delete(key)
	})

	window.location.href = `/api/buy-course?${params.toString()}`
}

The code snippet above properly constructs URL parameters in a safe manner. If you wish to construct your URL manually and not use an approach like above, please make sure to use encodeURIComponent for every value in your input to avoid creating a broken URL, especially when you take prefilled input like name and email from customers. Read more about encodeURIComponent here.