RSVPs widget is built with browser native web components custom elements. This offers a great deal of flexibility using normal web code. The custom elements like <rsvp-step>, <rsvp-title>, etc. can be considered just like normal HTML tags, and can be combined, styled, handled and manipulated just like you might any other tags on your website.
CSS and CSS variables
In the widget code samples we include the CSS variables that are used for styling. These can be used in addition to normal CSS styling, to do things like:
rsvp-element.dark-mode {
--rsvp-selector-color: #efefef;
color: #efefef;
}
Additional Content
You can mix and match any regular HTML content with the widget code. Insert your own text, images or even animations and video, for example:
...
<rsvp-step step-name="Initial">
<h3>Hi, please select a date and time here!</h3>
<img src="..." />
<rsvp-seating-selector booking-mode="widget">
...
Responding to guest interactions (custom javascript)
The widget will emit a range of events that you can subscribe to using normal javascript syntax, like:
document.querySelector("rsvp-element").addEventListener("paxChanged", function(){...});You can use this to show or hide elements depending on the number of guests selected in the widget, like special messages for low or high numbers. Other events include "rangeChanged" or "seatingChanged".
Responding to changes in the widget steps
You can listen for the "stepChanged" event in order to react to changes in the widget step, for example when a user progresses through the booking process. This can be useful to show or hide messages depending on the stage the guest is on, or to call analytics tracking to be able to track the guest booking funnel progress.
Like other events, simply use the default syntax in your framework of choice, or native javascript, to add the event listener for "stepChanged". The event detail will contain the name of the step the user progressed to.
document.querySelector("rsvp-element").addEventListener("stepChanged", function(evt){console.log("Step changed to " + evt.detail)});