All Collections
Developer Tips
Code to add Waitlist feature to the widget
Code to add Waitlist feature to the widget
Sienna avatar
Written by Sienna
Updated over a week ago

Below is the basic code that should be added for the Waitlist feature to be activated on the booking widget. From here, you have the ability to further customize the information gathered or the type of date selection guests can make (e.g. a single date, a date range, or any available date / time).

Add a custom Not-Available section inside the <rsvp-seating-section> tags:

<rsvp-seating-section>
    <div class="custom-unavailable">
      <p>Sorry, there are no availabilities.</p>
      <rsvp-step-link name="SoldOutWaitlist">Click here to join the waitlist</rsvp-step-link>
    </div>
</rsvp-seating-section>

Then add a new <rsvp-step> section, next to the existing <rsvp-step> sections:

<rsvp-step step-name="SoldOutWaitlist">
  <h3>Please select your preferred date and time</h3>
  <rsvp-input type="count" name="Seats" label="Number of people"></rsvp-input>
  <rsvp-input name="PreferredDateTime" type="datetime"></rsvp-input>
  <label><input type="checkbox" name="FlexibleDates"></input> Date is flexible</label>
  <rsvp-input type="text" name="Comment" ></rsvp-input>
  <h3>Contact details</h3>
  <rsvp-input type="text" name="Name" ></rsvp-input>
  <rsvp-input type="text" name="ContactEmail" ></rsvp-input>
  <rsvp-input type="text" name="Phone" ></rsvp-input>
</rsvp-step>

<rsvp-step step-name="WaitlistSuccess">
<h3>Success!</h3>
<p>You have been added to <rsvp-span name="Bookable.Name"></rsvp-span> waiting list
for <rsvp-span name="Seats"></rsvp-span> people at <rsvp-span name="PreferredDateTime" data-type="date">
</rsvp-span>
</p>
<p>Email confirmation is sent to <rsvp-span name="ContactEmail"></rsvp-span>
</p>
</rsvp-step>


Did this answer your question?