Let’s now configure the client component. The client contains the signup page and the background script which obtains the data from the user and passes it on to Catalyst.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Welcome to Eventapp</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom styles -->
<link href="product.css" rel="stylesheet">
</head>
<body>
<nav class="site-header sticky-top py-1">
<div class="container d-flex flex-column flex-md-row justify-content-center">
<a class="py-2 d-none d-md-inline-block" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="d-inline-block align-self-center">
<circle cx="12" cy="12" r="10"> </circle>
<line x1="14.31" y1="8" x2="20.05" y2="17.94"> </line>
<line x1="9.69" y1="8" x2="21.17" y2="8"> </line>
<line x1="7.38" y1="12" x2="13.12" y2="2.06"> </line>
<line x1="9.69" y1="16" x2="3.95" y2="6.06"> </line>
<line x1="14.31" y1="16" x2="2.83" y2="16"> </line>
<line x1="16.62" y1="12" x2="10.88" y2="21.94"> </line>
</svg>
</a>
</div>
</nav>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 font-weight-normal">Welcome to Event App</h1>
<p class="lead font-weight-normal">Your one-stop destination to create, organize, and manage events!</p>
<a class="btn btn-outline-secondary" href="#features">Features</a>
</div>
<div class="product-device box-shadow d-none d-md-block"> </div>
<div class="product-device product-device-2 box-shadow d-none d-md-block"> </div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3" id="features">
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Trouble-free event management experience</h2>
<p class="lead">Event App makes sure you have a seamless and an experience in organizing events by
automating your tasks</p>
</div>
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
</div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Create and manage events of all types</h2>
<p class="lead">Create events, group them in categories, customize them and add details as you need</p>
</div>
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> </div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Invite people and keep track of their RSVPs</h2>
<p class="lead">Invite people through various platforms to your events, record their RSVPs and obtain a
final count of the attendees to your events</p>
</div>
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"> </div>
</div>
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Customize your event invites in your own creative ways</h2>
<p class="lead">Embedd images, videos, and links in your event invitations, and customize the designs of the
event invites based on their contexts</p>
</div>
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
</div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Integrate Event App with various social media platforms</h2>
<p class="lead">Share your events on Facebook, Twitter, Instagram, Yelp, LinkedIn and other social media
platforms</p>
</div>
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
</div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Track sales analytics and performances of your events</h2>
<p class="lead">Event App also provides you reports and statistics of your event performances for your
convenience</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
</div>
</div>
</div>
<footer class="container-fluid py-5">
<div class="row">
<div class="col-md-7 p-lg-5 mx-auto text-center">
<h3 class="display-6 font-weight-normal">Get started with Event App today!</h3>
</div>
</div>
</footer>
</body>
</html>
View more
redirect.html
copy
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>redirect.html</title>
</head>
<body>
<h2>Please check you email for a product tour</h2>
</body>
</html>
View more
Let us quickly discuss the client files:
index.html: Includes the web SDK to implement Embedded Authentication.
main.js: Contains the script for the sign-up page. This obtains the data from the form on the client page and passes it on to the event listener that listens for the user sign-up event.
tour.html: Contains the code of the page the user will be navigated to, from the onboarding email they receive.
redirect.html After the user completes setting up their password to access Event App, they will be redirected to this page.
You must now enable this redirection to redirect.html by default. You can do this by configuring the client-package.json configuration file in the /client directory.
Copy the code given below and replace it with the default code present in the client-package.json file.
The client component of your Catalyst project is now configured successfully.
Deploy Your Project
We will be deploying the project once more to ensure the changes to code are available in the Catalyst console to successfully configure the required Rule.