{{announcement.body}}
{{announcement.title}}

The Fastest Way to Create an Event Sign-up System

DZone 's Guide to

The Fastest Way to Create an Event Sign-up System

In this article, we show you how to quickly create an event sign-up system using Corvid with little to no strain on your current resources.

· Web Dev Zone ·
Free Resource

In this post, I’m going to show you how to create a simple event sign up system. Since one of the goals is to create something quickly, we are going to use Corvid to build the application.

Corvid is a development platform from Wix, which allows you to concentrate on the logic of the application using JavaScript and not spend time on writing HTML/CSS to create the UI. Corvid is focused on helping teams dramatically decrease time spent on development and ship products faster.

You can find the complete documentation, tutorial videos, and examples here: www.wix.com/corvid

Creating the UI

First of all, we’re going to create a layout for our future page. Fun fact: it will take you from 10 to 25 minutes, depending on your familiarity with the platform.

Let’s assume we have the following user flow:

  • A user signs up for the event by filling out the form =>
  • A unique QR-code is generated based on their user id =>
  • The QR-code can be either saved as a picture or sent to email =>
  • On the day of the event, a user shows the QR-code at the entrance =>
  • Event administrators scan the code and submit the attendance

In the Wix Editor, login and choose to create a new site (“+Create New Site” in the upper right corner of the account dashboard). In this example, I’ve used a blank template, but you can choose any and customize it according to your own preferences.

You may also like: Modeling Domain Events.

You’ll also need to enable Corvid Developer Tools to rename and manage your elements. If you feel confused about how to do this, check out this link: 

https://support.wix.com/en/article/wix-code-enabling-developer-tools.

We’ll need to create two pages: the first one will be public (for users to sign in), and another one is for admins to submit guests’ attendance. I’ve also created two lightboxes (pop-ups) to show success messages after completing the form and attendance submission. You can learn more about how to create pages and lightboxes here: https://support.wix.com/en/article/adding-a-pop-up

At this point, your Site Structure should look pretty much like this:

Site structure

Site structure
Let’s create a basic layout for our sign up “HOME” page. We’ll need to create three user inputs:  #name, #email#phoneNumber, and a  #signUpButton. I’ve put all three inputs in the  #signInBox to make these elements easier to collapse. (You’ll see it later in the code.)

We’ll also add a default image, #qrCodeImage, for our future QR-code and a #sendToEmailButton button to the same page to avoid redirect (you still can put these elements on the other page if you have too many of them, but choose what works better for your project’s performance). Both #qrCodeImage and #sendToEmailButton are collapsed on load and shown to users only when they successfully sign up with the registration form.

In the end, your page should look something like this:

Sample output

Sample output

In the upper right corner, you can see the checkmark in the "Collapsed on load” field. That’s how we collapse #qrCodeImage and #sendToEmailButton when users first loads the page.

Note: there is a difference between “hide” and “collapse.” A collapsed element shifts all elements that are below it up when not visible, and a hidden one doesn’t affect the neighbor elements and reserves place for itself no matter if it’s visible or not. 

Now, when we’re done with our “HOME” page, let’s design the admin page. It will only have two elements: #guestName and #submitButton (nothing fancy).

Note: I’m keeping it simple in this example, but feel free to play around with the page design.

Don’t forget to add success messages to your lightboxes.

Adding a Database

To store our users' data, we will use a built-in database. Let’s create one and call it “Participants” (the naming is up to you). The database needs to have six columns:

  1. title: (fieldType: Text).
  2. phone: (fieldType: Number).
  3. attended: (fieldType: Boolean).
  4. userId: (fieldType: Text).
  5. qrCodeLink: (fieldType: Url).
  6. email: (fieldType: Text).

If you’re not sure about how to create a database, check out this documentation page.

Writing Code

And now we’re coming to the most fun part: coding. We’re going to use the Corvid API and some custom JavaScript code to describe logics for our site. All API references and examples can be found here: https://www.wix.com/corvid/reference/.

I’m going to break it into several feature-based parts:

  1. Signing up.
  2. Generating a QR-code.
  3. Submitting data to the database.
  4. Showing the QR-code to the user.
  5. Sending it to a user’s email.
  6. Attendance submission.

Signing Up

Let’s add an event to our #signUpButton. In this example, I’m adding all events inside the $w.onReady() function. First of all, I’m importing four built-in modules, which I’ll use to process data: uuid (to generate unique user id), wixData (to submit data to the database), wixLocation (for passing url to QRCode generator function), and wixWindow (to open the lightbox).

I’m also creating a new object with user data that will be passed from the inputs later and an obligatory _id field.

JavaScript




x
23


 
1
import uuid from 'uuid';
2
 
          
3
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
 
          
7
$w.onReady(function () {
8
    const userId = uuid();
9
 
          
10
    const newUser = {
11
        _id: userId,
12
        userId: userId,
13
        title: “”,
14
        email: ””,
15
        phone: ””,
16
        qrCodeUrl: “”
17
    }
18
 
          
19
    $w("#signUpButton").onClick(() => {
20
        
21
    });
22
});
23
 
          



Generating QR-Code

Corvid supports some built-in npm packages which can be installed right from the editor. The complete list of currently supported modules and how to add them to your project can be found here (more modules will be added in the nearest future): https://www.wix.com/corvid/npm-modules.

I’m using the module named “qrcode,” which makes it super easy to convert URLs to QR. The documentation for this module is on Github: https://github.com/soldair/node-qrcode.

We must import all the npm modules to the backend, so, in the backend section of the project, I’ve created a jsw-module called “createUrl.jsw”.

Quick update on the site structure:

Updated file structure

Updated file structure

In this module, I import the npm-package and return the QR-code URL:

JavaScript




xxxxxxxxxx
1
12


1
import QRCode from 'qrcode';
2
 
          
3
export function createQR(userIdUrl) {
4
    return QRCode.toDataURL(userIdUrl)
5
        .then(url => {
6
            return url;
7
        })
8
        .catch(err => {
9
            console.error(err)
10
        })
11
}
12
 
          



Submitting Data to the Database

Now, let’s receive the actual user’s data and on “Sign up” button click submit it to the database.

JavaScript




xxxxxxxxxx
1
33


 
1
import uuid from 'uuid';
2
 
          
3
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
import wixCRM from 'wix-crm';
7
 
          
8
import { createQR } from 'backend/createUrl.jsw'
9
 
          
10
$w.onReady(async function () {
11
    const userId = uuid();
12
    const urlToPass = `${wixLocation.baseUrl}/attendance-admin?userId=${userId}`;
13
    const QRCodeUrl = await createQR(urlToPass);
14
 
          
15
    const newUser = {
16
        _id: userId,
17
        userId: userId,
18
        title: "",
19
        email: "",
20
        phone: 0,
21
        qrCodeUrl: QRCodeUrl
22
    }
23
 
          
24
    $w("#signUpButton").onClick(() => {
25
        newUser.title = $w("#name").value,
26
            newUser.email = $w("#email").value,
27
            newUser.phone = $w("#phoneNumber").value,
28
 
          
29
            wixData.save("Participants", newUser)
30
    });
31
 
          
32
});
33
 
          



Showing the QR-Code to the User

Let’s get back to our “HOME” code. The wixData.save() API returns a promise, so chain .then() methods to process the result returned. I’m waiting until the end of database submission, passing the received URL as a source to #qrCodeImage, collapsing the form, and expanding the #qrCodeImage and #sendToEmailButton. Finally, I’m cleaning all the form’s values.

JavaScript




xxxxxxxxxx
1
37


1
import uuid from 'uuid';
2
 
          
3
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
import wixCRM from 'wix-crm';
7
 
          
8
import { createQR } from 'backend/createUrl.jsw'
9
 
          
10
$w.onReady(async function () {
11
    const userId = uuid();
12
    const urlToPass = `${wixLocation.baseUrl}/attendance-admin?userId=${userId}`;
13
    const QRCodeUrl = await createQR(urlToPass);
14
 
          
15
    const newUser = {
16
        _id: userId,
17
        userId: userId,
18
        title: "",
19
        email: "",
20
        phone: 0,
21
        qrCodeUrl: QRCodeUrl
22
    }
23
 
          
24
    $w("#signUpButton").onClick(() => {
25
        newUser.title = $w("#name").value,
26
            newUser.email = $w("#email").value,
27
            newUser.phone = $w("#phoneNumber").value,
28
 
          
29
            wixData.save("Participants", newUser)
30
            .then(() => {
31
                $w("#qrCodeImage").src = newUser.qrCodeUrl;
32
                $w("#signInBox").collapse();
33
                $w("#qrCodeImage, #sendToEmailButton").expand();
34
            })
35
    });
36
});
37
 
          



Sending a QR-Code to the User’s Email

The last thing we are going to finish before going to the admin’s page is sending a success email with a QR-code to the user. In Corvid, you can easily create triggered emails by adding your email template to the “Email marketing” tab in the Dashboard. 

To learn more, check out this link: https://support.wix.com/en/article/about-triggered-emails.

Response email

Response email

For this triggered email, I’ve created two variables: ${userName} and ${qrCodeLink} to pass custom data. 

Corvid provides you with ready-to-go snippets after clicking on the "Save & Publish" button. Let’s copy it to our code inside the "Send to email" button event:

Note: There is no Wix login required in this example, so before sending the email, we need to create a contact in the Wix CRM system.

I also open a lightbox with a success message and return the page to initial state after the email is sent.

JavaScript




xxxxxxxxxx
1
63


 
1
import uuid from 'uuid';
2
 
          
3
import wixData from 'wix-data';
4
import wixLocation from 'wix-location';
5
import wixWindow from 'wix-window';
6
import wixCRM from 'wix-crm';
7
 
          
8
import { createQR } from 'backend/createUrl.jsw'
9
 
          
10
$w.onReady(async function () {
11
    const userId = uuid();
12
    const urlToPass = `${wixLocation.baseUrl}/attendance-admin?userId=${userId}`;
13
    const QRCodeUrl = await createQR(urlToPass);
14
 
          
15
    console.log(QRCodeUrl);
16
 
          
17
    const newUser = {
18
        _id: userId,
19
        userId: userId,
20
        title: "",
21
        email: "",
22
        phone: 0,
23
        qrCodeUrl: QRCodeUrl
24
    }
25
 
          
26
    $w("#signUpButton").onClick(() => {
27
        newUser.title = $w("#name").value,
28
            newUser.email = $w("#email").value,
29
            newUser.phone = $w("#phoneNumber").value,
30
 
          
31
            wixData.save("Participants", newUser)
32
            .then(() => {
33
                $w("#qrCodeImage").src = newUser.qrCodeUrl;
34
                $w("#signInBox").collapse();
35
                $w("#qrCodeImage, #sendToEmailButton").expand();
36
            })
37
    });
38
 
          
39
    $w("#sendToEmailButton").onClick(event => {
40
        wixCRM.createContact({
41
                "firstName": newUser.tite,
42
                "emails": [newUser.email],
43
                "phones": [newUser.phone]
44
 
          
45
            })
46
            .then((contactId) => {
47
                wixCRM.emailContact('RLXj7Uh', contactId, {
48
                    variables: {
49
                        userName: newUser.title,
50
                        qrCodeLink: newUser.qrCodeUrl
51
                    }
52
                })
53
            }).then(() => {
54
                wixWindow.openLightbox("Subscription success");
55
            })
56
            .then(() => {
57
                $w("#name, #email, #phoneNumber").value = "";
58
                $w("#signInBox").expand();
59
                $w("#qrCodeImage, #sendToEmailButton").collapse();
60
            })
61
    })
62
});
63
 
          



Attendance Submission

The last part of this user journey will happen on the day of the actual event. A user shows the downloaded QR-code at the entrance, gets it scanned, and their attendance is submitted. 

Let’s add the following logic to the Attendance Admin page:

JavaScript




xxxxxxxxxx
1
25


 
1
import wixLocation from 'wix-location';
2
import wixData from 'wix-data';
3
import wixWindow from 'wix-window';
4
 
          
5
$w.onReady(async function () {
6
    const userId = wixLocation.query.userId;
7
 
          
8
    const guestData = await wixData.query("Participants")
9
        .eq("userId", userId)
10
        .find()
11
        .then((result => result.items[0]));
12
 
          
13
 
          
14
    $w("#guestName").text = guestData.title;
15
 
          
16
    $w("#submitButton").onClick() => {
17
        const newGuestData = Object.assign({}, guestData, { attended: true });
18
 
          
19
        wixData.save("Participants", newGuestData)
20
            .then(() => {
21
                wixWindow.openLightbox("Attendance success");
22
            })
23
    })
24
});
25
 
          



A unique userId is passed as a query in the URL from the QRcode, so we need to receive it using  wixLocation.query.userId.

After this id is received, we are able to receive the user’s data from the database, pass their name to the text field, #guestName on the page, and submit refreshed data with a changed “attended” field value back to the database.

Note: don’t forget to change permissions of the Attendance Admin page to make it only visible to admins. To learn more follow this link: https://support.wix.com/en/article/applying-page-permissions.

Further Reading

Topics:
corvid ,web dev ,javascrip ,qr code ,dom ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}