---
title: "Codificar tu cliente"
url: https://docs.catalyst.zoho.com/es/tutorials/event-app/nodejs/configure-client/
description: "Configura una Event Function de Catalyst y asóciala con una regla en Catalyst Signals que enviará correos electrónicos de bienvenida automatizados a los usuarios de la aplicación cuando se registren."
last_updated: 2026-08-28T07:59:38Z
service: All Services
type: tutorial
related_links:
  - name: "Client Directory"
    url: /es/cli/v1/project-directory-structure/introduction
---

# Codificar tu cliente

Ahora configuremos el componente del lado del cliente. El cliente contiene la página de registro y el script en segundo plano que obtiene los datos del usuario y los pasa a Catalyst.

El [directorio del cliente](https://docs.catalyst.zoho.com/es/cli/v1/project-directory-structure/client-directory) contiene por defecto:

* El archivo `index.html` para el código HTML de la aplicación frontend. También contendrá el Web SDK necesario para implementar Embedded Authentication.
* El archivo `main.css` para el código CSS
* El archivo `main.js` para el código JavaScript
* El archivo de configuración `client-package.json`
* Crearemos dos archivos nuevos en `EventApp/client/`:
    - `tour.html`: Contendrá la página que se mostrará a los usuarios finales una vez que confirmen su cuenta.
    - `redirect.html`: Contendrá la página a la que serán redirigidos los usuarios finales una vez que se registren.

Crearemos dos archivos nuevos en este directorio.

Codificaremos `index.html`, `main.js`, `main.css`, `tour.html` y `redirect.html`, así como los archivos nuevos.

> **Nota**: Revisa el código en esta sección para asegurarte de comprenderlo completamente.

Copia el código a continuación y pégalo en los archivos correspondientes ubicados en el directorio `client/` de tu proyecto usando un IDE y guarda los archivos.

**index.html**

```xml
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>signup - label</title>
    <script src="https://www.zoho.com/crm/js/js-lib-file.js"> </script>
   <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"> </script>
<script src="/__catalyst/sdk/init.js"> </script>
<script>
  catalyst.auth.signIn("login", {});
</script>
<style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }
        html {
            overflow-y: scroll;
        }
        body {
            background: #c1bdba;
            font-family: 'Titillium Web', sans-serif;
        }
        a {
            text-decoration: none;
            color: #1ab188;
            transition: .5s ease;
        }
        a:hover {
            color: #179b77;
        }
        .form {
            background: rgba(19, 35, 47, 0.9);
            padding: 40px;
            max-width: 600px;
            margin: 40px auto;
            border-radius: 4px;
            box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
        }
        .tab-group {
            list-style: none;
            padding: 0;
            margin: 0 0 40px 0;
        }
        .tab-group:after {
            content: "";
            display: table;
            clear: both;
        }
        .tab-group li a {
            display: block;
            text-decoration: none;
            padding: 12px;
            background: rgba(160, 179, 176, 0.25);
            color: #a0b3b0;
            font-size: 20px;
            float: left;
            width: 50%;
            text-align: center;
            cursor: pointer;
            transition: .5s ease;
        }
        .tab-group li a:hover {
            background: #179b77;
            color: #ffffff;
        }
        .tab-group .active a {
            background: #1ab188;
            color: #ffffff;
        }
        .tab-content>div:last-child {
            display: none;
        }
        h1 {
            text-align: center;
            color: #ffffff;
            font-weight: 600;
            margin: 0 0 30px;
        }
        label {
            position: absolute;
            -webkit-transform: translateY(6px);
            transform: translateY(6px);
            left: 13px;
            top: 8px;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.25s ease;
            -webkit-backface-visibility: hidden;
            pointer-events: none;
            font-size: 16px;
        }
        label .req {
            margin: 2px;
            color: #1ab188;
        }
        label.active {
            -webkit-transform: translateY(50px);
            transform: translateY(50px);
            left: 2px;
            font-size: 14px;
        }
        label.active .req {
            opacity: 0;
        }
        label.highlight {
            color: #ffffff;
        }
        input,
        textarea {
            font-size: 16px;
            display: block;
            width: 100%;
            /* height: 100%; */
            padding: 12px 10px;
            background: none;
            background-image: none;
            border: 1px solid #a0b3b0;
            color: #ffffff;
            border-radius: 0;
            box-sizing: border-box;
            transition: border-color .25s ease, box-shadow .25s ease;
        }
        input:focus,
        textarea:focus {
            outline: 0;
            border-color: #1ab188;
        }
        textarea {
            border: 2px solid #a0b3b0;
            resize: vertical;
        }
        .field-wrap {
            position: relative;
            margin-bottom: 40px;
        }
        .top-row:after {
            content: "";
            display: table;
            clear: both;
        }
        .top-row>div {
            float: left;
            width: 48%;
            margin-right: 4%;
        }
        .top-row>div:last-child {
            margin: 0;
        }
        .button {
            border: 0;
            outline: none;
            border-radius: 0;
            padding: 14px 0;
            font-size: 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .1em;
            background: #1ab188;
            color: #ffffff;
            transition: all 0.5s ease;
            -webkit-appearance: none;
        }
        .button:hover,
        .button:focus {
            background: #179b77;
        }
        .button-block {
            display: block;
            width: 100%;
        }
        .forgot {
            margin-top: -20px;
            text-align: right;
        }
        .h-65 {
            height: 65vh;
        }
</style>
</head>
<body>
    <div class="form">
        <ul class="tab-group">
            <li class="tab active"> <a href="#signup">Sign Up</a> </li>
            <li class="tab"> <a href="#login">Log In</a> </li>
        </ul>
        <div class="tab-content">
            <div id="signup">
                <h1>Sign up to Continue to EventApp</h1>
                <form>
                    <div class="top-row">
                        <div class="field-wrap">
                            <label> First Name<span class="req">*</span> </label>
                            <input id="firstname" type="text" required autocomplete="off" />
                        </div>
                        <div class="field-wrap">
                            <label> Last Name<span class="req">*</span> </label>
                            <input id="lastname" type="text" required autocomplete="off" />
                        </div>
                    </div>
                    <div class="field-wrap">
                        <label> Email Address<span class="req">*</span> </label>
                        <input id="email" type="email" required autocomplete="off" />
                    </div>
                    <button onclick="signupAction(this)" class="button button-block" />
                    Get Started
                    </button>
                </form>
            </div>
            <div id="login" class="h-65">
            </div>
        </div>
        <!-- tab-content -->
    </div>
    <!-- /form -->
    <script src="main.js"> </script>
    <script>
        $(document).ready(function () {
            $('.form').find('input, textarea').on('focus', function (e) {
                var $this = $(this),
                    label = $this.prev('label');
                label.addClass('active highlight');
            });
 
            $('.form').find('input, textarea').on('blur', function (e) {
                var $this = $(this),
                    label = $this.prev('label');
                if ($this.val() == '') {
                    label.removeClass('active highlight');
                } else {
                    label.removeClass('highlight');
                }
            });
            $('.tab a').on('click', function (e) {
                e.preventDefault();
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
                target = $(this).attr('href');
                $('.tab-content > div').not(target).hide();
                $(target).fadeIn(600);
            });
        });
</script>
</body>
</html>

```

**main.js**

```javascript
function signupAction(ele) {
    var firstName = document.getElementById("firstname").value;
    var lastName = document.getElementById("lastname").value
    var email = document.getElementById("email").value;
    var data = {
        "first_name": firstName,
        "last_name": lastName,
        "email_id": email,
        "platform_type": "web"
    };
    var auth = catalyst.auth;
    var signupPromise = auth.signUp(data);
    signupPromise
        .then((response) => {
            console.log(response.content);
        })
        .catch((err) => {
            console.log(err);
        });
}

```

**main.css**

```css
html,
body {
    scroll-behavior: smooth;
    -webkit-scroll-behaviour: smooth;
}

.container {
    max-width: 960px;
}

.site-header {
    background-color: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.site-header a {
    color: #999;
    transition: ease-in-out color .15s;
}

.site-header a:hover {
    color: #fff;
    text-decoration: none;
}

.product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}

.product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.flex-equal>* {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
}

@media (min-width: 768px) {
    .flex-md-equal>* {
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
    }
}

.overflow-hidden {
    overflow: hidden;
}

```

**tour.html**

```xml
<!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>

```

**redirect.html**

```xml
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>redirect.html</title>
</head>
<body>
    <h2>Please check your email for a product tour</h2>
</body>
</html>

```

Analicemos rápidamente los archivos del cliente:

* `index.html`: Incluye el Web SDK para implementar Embedded Authentication.

* `main.js`: Contiene el script para la página de registro. Obtiene los datos del formulario en la página del cliente y los pasa al listener de eventos que escucha el evento de registro de usuario.

* `tour.html`: Contiene el código de la página a la que el usuario será dirigido desde el correo electrónico de bienvenida que recibe.

* `redirect.html` Después de que el usuario complete la configuración de su contraseña para acceder a Event App, será redirigido a esta página.

Ahora debes habilitar esta redirección a `redirect.html` de forma predeterminada. Puedes hacerlo configurando el archivo de configuración `client-package.json` en el directorio `/client`.

Copia el código proporcionado a continuación y reemplázalo con el código predeterminado presente en el archivo `client-package.json`.

**client-package.json**

```json
{
  "name": "EventAppClient",
  "version": "0.0.1",
  "homepage": "index.html",
  "login_redirect": "redirect.html"
}

```

El componente del lado del cliente de tu proyecto de Catalyst se ha configurado correctamente.

### Desplegar tu proyecto

Desplegaremos el proyecto una vez más para asegurarnos de que los cambios en el código estén disponibles en la consola de Catalyst para configurar correctamente la [regla](https://docs.catalyst.zoho.com/es/signals/help/rules/key-aspects/) requerida.

Para [desplegar el proyecto en la consola](https://docs.catalyst.zoho.com/es/cli/v1/deploy-resources/introduction/), ingresa el siguiente comando en tu CLI y ejecútalo.

```sh
catalyst deploy
```

![catalyst_tutorials_eventapp_cli__first_deploy](https://catalyst-docs-development.zohostratus.in/images/tutorials/event-app/catalyst_tutorials_eventapp_cli__first_deploy.webp)