All Collections
Developer Tips
RSVP Widget Code - Example 3
RSVP Widget Code - Example 3

See the code we used to create the booking experience at https://insider.rsvp-popup.com/site3

Sienna avatar
Written by Sienna
Updated over a week ago

Below, you will find both the HTML and CSS code for RSVP's customized widget, Example 3. Further down, we have included screenshots corresponding to each step and any code for custom elements in that step.

HTML

<rsvp-element bookable-id="2814" api-path="restaurants" target-slot="dev">
                                            <rsvp-booking-steps button-text="Next">
                                                <template>
                                                    <rsvp-step step-name="Initial">
                                                        <rsvp-seating-selector booking-mode="widget">
                                                            <div>
                                            <rsvp-range-section default-expanded="false" range-type="month-status">
                                                                    <div slot="left-icon">
                                                                        <div class="pax-arrow">
                                                                            <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/left-arrow.png" class="rsvp-calender-left-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/left-arrow.png" />
                                                                        </div>
                                                                    </div>
                                                                    <div slot="right-icon">
                                                                        <div class="pax-arrow">
                                                                            <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/right-arrow.png" class="rsvp-calender-right-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/right-arrow.png" />
                                                                        </div>
                                                                    </div>
                                                                    <div slot="left-month-icon"><div class="pax-arrow">-</div></div>
                                                                    <div slot="right-month-icon"><div class="pax-arrow">+</div></div>
                                                                </rsvp-range-section>
                                                            </div>
                                                            <div style="padding-top:20px;">
                                                                <rsvp-pax-section text-value="PEOPLE" current-value="2" min-value="1" max-value="10">
                                                                    <div slot="left-icon"><div class="pax-arrow">-</div></div>
                                                                    <div slot="right-icon"><div class="pax-arrow">+</div></div>
                                                                </rsvp-pax-section>
                                                            </div>
                                                            <rsvp-seating-section available-text="No availability"></rsvp-seating-section>
                                                        </rsvp-seating-selector>
                                                    </rsvp-step>
                                                    <rsvp-step step-name="ContactDetails">
                                                        <div class="step-title">
                                                            <h3 class="text-center underline">YOUR DETAILS</h3>
                                                        </div>
                                                        <div class="step-container">
                                                            <div class="padding-top-10">
                                                                <rsvp-input label=" " placeholder="First Name*" name="FirstName"></rsvp-input>
                                                            </div>
                                                            <div class="padding-top-10">
                                                                <rsvp-input label=" " placeholder="Surname*" name="LastName"></rsvp-input>
                                                            </div>
                                                            <div class="padding-top-10">
                                                                <rsvp-input label=" " placeholder="Email*" name="ContactEmail"></rsvp-input>
                                                            </div>
                                                            <div class="padding-top-10">
                                                                <rsvp-phone label="Phone" name="Phone" code="+45"></rsvp-phone>
                                                            </div>
                                                        </div>
                                                    </rsvp-step>
                                                    <rsvp-step step-name="ConfirmInfo">
                                                        <div class="step-title">
                                                            <h3 class="text-center underline">YOU ARE BOOKING FOR</h3>
                                                        </div>
                                                        <div class="step-container">
                                                            <div class="padding-top-10">
                                                                <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/user.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/user.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Seats"></rsvp-span> PEOPLE</span>
                                                            </div>
                                                            <div class="padding-top-10">
                                                                <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/calendar.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/calendar.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="date"></rsvp-span> </span>
                                                            </div>
                                                            <div class="padding-top-10">
                                                                <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/clock-circular-outline.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/clock-circular-outline.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="time"></rsvp-span></span>
                                                            </div>
                                                            <div class="padding-top-20">
                                                                <rsvp-input type="textarea" label=" " name="Comments" placeholder="Dietary requirements or comments..." rows="5"></rsvp-input>
                                                            </div>
                                                            <div class="padding-top-20">
                                                                <label class="step-checkbox-container">Yes, I confirm the details and conditions<input type="checkbox" name="Confirm" /> <span class="step-checkmark"></span> </label>
                                                                <label class="step-checkbox-container"> Yes, please notify me of future events<input type="checkbox" name="ConfirmEmail" /> <span class="step-checkmark"></span></label>
                                                            </div>
                                                        </div>
                                                    </rsvp-step>
                                                    <rsvp-step step-name="Summary">
                                                        <div class="step-title">
                                                            <h3 class="text-center underline">SUCCESS!</h3>
                                                        </div>
                                                        <div class="step-container">
                                                            <h3 class="font-weight-200">Your booking is confirmed for</h3>
                                                            <div class="padding-top-20">
                                                                <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/user.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/user.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Seats"></rsvp-span> PEOPLE</span>
                                                            </div>
                                                            <div class="padding-top-10">
                                                                <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/calendar.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/calendar.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="date"></rsvp-span> </span>
                                                            </div>
                                                            <div class="padding-top-10">
                                                                <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/clock-circular-outline.png" class="attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/clock-circular-outline.png" /> <span class="padding-left-10"><rsvp-span name="Booking.Time" data-type="time"></rsvp-span></span>
                                                            </div>
                                                            <p class="padding-top-30">
                                                                Email confirmation is sent to <rsvp-span name="Booking.Email"></rsvp-span>
                                                            </p>
                                                        </div>
                                                    </rsvp-step>
                                                </template>
                                            </rsvp-booking-steps>
                                        </rsvp-element>

CSS

<style>

        rsvp-element {
            --rsvp-expand-position: relative;
            --rsvp-font: Roboto,Times New Roman,Georgia,Times,serif;
            --rsvp-font-weight: 500;
            --rsvp-font-size: 1.3em;
            --rsvp-text-primary: #000;
            --rsvp-selector-color: #333;
            --rsvp-selected-background: #e9d4d0;
            --rsvp-selected-color: #000;
            --rsvp-border-color: #cca59e;
            --rsvp-button-primary: #000;
            --rsvp-button-text: #fff;
            --rsvp-background-color: transparent;
            font-family: Roboto,Times New Roman,Georgia,Times,serif;
        }


        rsvp-booking-button {
            height: 40px;
            max-width: 150px;
            margin-top: 30px;
            cursor: pointer;
        }

        rsvp-pax-section {
            --rsvp-selector-title-flex: 0 0 auto;
        }

        rsvp-range-section rsvp-selector-row {
            --rsvp-selector-title-flex: 0 0 auto;
        }

        rsvp-seating-section h4.seating-section-header {
            text-align: center;
            text-transform: uppercase;
            border-bottom: 2px solid #d1a8a0;
            font-weight: 800;
            padding-bottom: 12px;
        }

        rsvp-seating-section .seating-items {
            padding-top: 15px;
        }

        rsvp-seating-section > div {
            padding-top: 30px;
        }

        rsvp-seating-item {
            max-width: 80px;
        }

            rsvp-seating-item > div {
                background-color: #fff;
                padding: 8px 2px;
                border: 1px solid #000;
                border-color: #000;
                border-radius: 0px;
                margin: 5px;
                font-size: 20px;
                letter-spacing: 1px;
            }



        rsvp-calendar-month {
            --rsvp-calendar-header-color: #000;
            --rsvp-calendar-color: #000;
            --rsvp-calendar-background-color: #fff;
            --rsvp-calendar-selected-background-color: #000;
            --rsvp-calendar-selected-color: #fff;
            --rsvp-calendar-placeholder-background-color: #e9d4d0;
            --rsvp-calendar-placeholder-border: 1px solid #fff;
            --rsvp-calendar-border-radius: 0px;
            --rsvp-calendar-font-weight: 700;
            --rsvp-font-weight: 800;
            --rsvp-selector-text-transform: uppercase;
            --rsvp-font-size: 28px;
        }

            rsvp-calendar-month rsvp-selector-row {
                font-size: 48px;
            }

INPUT

rsvp-input input, rsvp-input textarea {
            background-color: #f6eeec;
            border: none;
            padding: 8px !important;
            font-size: 15px;
        }

            rsvp-input input:focus, rsvp-input textarea:focus {
                border: 1px solid #d1a8a0;
                outline: none;
            }


rsvp-input input::-webkit-input-placeholder, rsvp-input textarea::-webkit-input-   placeholder {
                color: #000;
            }

            rsvp-input input:-ms-input-placeholder, rsvp-input textarea:-ms-input-placeholder  
     {
                color: #000;
            }

            rsvp-input input::placeholder, rsvp-input textarea::placeholder {
                color: #000;
            }

CHECKBOX

        .step-checkbox-container {
            display: block;
            position: relative;
            padding-left: 30px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .step-checkbox-container input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

        .step-checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #eee;
        }

        .container:hover input ~ .checkmark {
            background-color: #ccc;
        }

        .step-checkbox-container input:checked ~ .step-checkmark {
            background-color: #cca59e;
        }

        .step-checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .step-checkbox-container input:checked ~ .step-checkmark:after {
            display: block;
        }

        .step-checkbox-container .step-checkmark:after {
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

COMMON

        .rsvp-calender-left-arrow {
            width: 16px;
            height: 16px;
            margin-left: -3px;
            margin-top: 2px;
        }

        .rsvp-calender-right-arrow {
            width: 16px;
            height: 16px;
            margin-top: 2px;
        }

        .pax-arrow {
            padding: 0px 0px 2px 2px;
            background-color: #d1a8a0;
            border-radius: 50%;
            font-size: 30px;
            height: 30px;
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .font-weight-200 {
            font-weight: 200;
        }


        .padding-top-10 {
            padding-top: 10px;
        }

        .padding-top-20 {
            padding-top: 20px;
        }

        .padding-top-30 {
            padding-top: 30px;
        }

        .padding-left-10 {
            padding-left: 10px;
        }

        .step-title h3 {
            padding-bottom: 12px;
            font-weight: 800;
            text-align: center;
            border-bottom: 2px solid #d1a8a0;
        }

        .step-container {
            padding-top: 12px;
        }

        .underline {
            border-bottom: 2px solid #d1a8a0;
        }

        rsvp-seating-section .limited-seats-label > span {
            width: 20px;
            height: 20px;
            border: 2px solid red;
            margin-right: 12px;
        }

        .limited-seats-label {
            color: #000 !important;
            text-transform: uppercase;
            font-weight: 600 !important;
            font-size: 16px !important;
            display: flex;
            align-items: center;
        }
</style>

SCREENSHOTS

Step 1: Initial Step

Below is the code to set custom selector icons for the number of guests

<rsvp-pax-section text-value="PEOPLE" current-value="2" min-value="1" max-value="10">
        <div slot="left-icon"><div class="pax-arrow">-</div></div>
                 <div slot="right-icon"><div class="pax-arrow">+</div></div>
</rsvp-pax-section>


Below is the code to set custom selector icons for the calendar

<rsvp-range-section default-expanded="false" range-type="month-status">
      <div slot="left-icon">
           <div class="pax-arrow">
                 <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/left-arrow.png" class="rsvp-calender-left-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/left-arrow.png" />
              </div>
         </div>
        <div slot="right-icon">
             <div class="pax-arrow">
                  <img width="24" height="24" src="~/Site3/wp-content/uploads/2019/right-arrow.png" class="rsvp-calender-right-arrow attachment-medium size-medium lazyload" alt="Seats" title="Seats" data-src="../Site3/wp-content/uploads/2019/right-arrow.png" />
                 </div>
          </div>
      <div slot="left-month-icon"><div class="pax-arrow">-</div></div>
            <div slot="right-month-icon"><div class="pax-arrow">+</div></div>
</rsvp-range-section>

Step 2: Contact Detail Step

Step 3: Confirm Info Step

Step 4: Summary Step


Did this answer your question?