CorvidReference

wix-events

The wix-events module contains functionality for working with Wix Events from client-side code.

Before working with the Events API, you need to install the Wix Events app and create at least one event.

You can use the Wix Event API to create a custom RSVP form.

To use the Wix Events API, import wixEvents from the wix-events module:

   import wixEvents from 'wix-events';

Note

To work with the Wix Events API, you need to publish your site.

Table of Contents

createEventRsvpForm( )

Creates a new RSVP form for the specified event.

Description

Use the createEventRsvpForm() function to retrieve the information you need to create a custom RSVP form for a specified event and to submit the form data to register guests for the event.

Retrieve event IDs to specify an event from the Events/Events collection.

Note

To work with the Wix Events API, you need to publish your site.

Syntax

function createEventRsvpForm(eventId: string): RsvpForm
PARAMETERS
?
Values that you pass to a function.
eventId
string
ID of the event to create an RSVP form for.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
An RSVP form object.

Examples

Create an RSVP form

import wixEvents from 'wix-events';

// ...

const eventId = // get an event ID

const eventRsvpForm = wixEvents.createEventRsvpForm(eventId);

Create and submit an RSVP form

import wixEvents from 'wix-events';
import wixData from 'wix-data';

let form;

// Run a query that will return only one event. Add
// additional filtering to the query if necessary.
wixData.query("Events/Events")
  .eq("title", "My Event")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      form = wixEvents.createEventRsvpForm(results.items[0]._id);
    }
    else {
      console.log("Could not find event");
    }
  });

$w.onReady(function () {
  $w("#submit").onClick( () => {
    const formValues = getFormValues();

    form.submit(formValues)
      .then( (result) => {
        console.log("RSVP form submitted.")
      } )
      .catch( (error) => {
        console.log(`Error message: ${error.message}`);
        if(error.fields) {
          console.log(`Incorrect fields: ${error.fields}`);  
        }
      } );	
  } );
});

function getFormValues() {
  return [
    {"name": "rsvpStatus", "value": "YES"},
    {"name": "firstName", "value": $w("#firstName").value},
    {"name": "lastName", "value": $w("#lastName").value},
    {"name": "email", "value": $w("#email").value},
    {"name": "custom", "value": $w("#foodAllergies").value},

    // When a form contains an address, the way you format the
    // address information for submission depends on what type
    // of input elements you use to gather that information.

    // Wix address input element.
    {"name": "address", "value": $w("#address").value},

    // Single element which is not an address
    // input element, such as a text input.
    {"name": "address", "value": [$w("#address").value]},

    // Multiple elements for the
    // various parts of an address.
    {
      "name": "address", 
      "value": [
        $w("#street").value,
        $w("#city").value,
        $w("#state").value,
        $w("#country").value,
        $w("#postalCode").value
      ]
    },

    // When a form contains an input for adding more guests to an
    // RSVP, format the guest names for submission in an array
    // where each element is the full name of a guest.
    {"name": "additionalGuests", "value": $w('#additionalGuests').value},
    {
      "name": "guestNames",
      "value": [
        `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
        `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
      ]
    }
  ];
}