All Collections
Developer Tips
Add standalone voucher / shop widget to your website
Add standalone voucher / shop widget to your website

Selling vouchers and items separate from bookings is now possible

Sienna avatar
Written by Sienna
Updated over a week ago

Below are general guidelines on how to add our voucher widget to your Squarespace or Wordpress website. We have also provided the general code in case you do not use one of these two popular providers.

General Code (without address and notes fields)

Note: you need to add your RSVP URL to the code for it to return the correct info.

<script nomodule src="https://cdn.rsvp-popup.com/webcomponents/rsvp-elements/1.0/rsvp.js"></script>
     <script type=“module” src=“https://cdn.rsvp-popup.com/webcomponents/rsvp-elements/1.0/rsvp.esm.js"></script>

   <script src=“https://js.stripe.com/v3/"></script>


<rsvp-shop url-name=“[ENTER YOUR RSVP URL NAME]”>
  <template>
   <rsvp-step step-name=“SelectItems”>
    <h3>Select your items</h3>
    <rsvp-shop-items-list></rsvp-shop-items-list>
   </rsvp-step>
   <rsvp-step step-name=“ContactInfo”>
    <h3>Enter Details</h3>
    <label for=“FirstName”>First Name
     <input name=“FirstName” type=“text” />
    </label>
    <label for=“LastName”>Last Name
     <input name=“LastName” type=“text” />
    </label>
    <label for=“Email”>Email
     <input name=“Email” type=“text” />
    </label>
   </rsvp-step>
   <rsvp-step step-name=“ConfirmAndPay”>
    <h2>Payment</h2>
    <p>Amount due: <strong>
      <rsvp-text name=“Basket.Total.Value”></rsvp-text>
     </strong></p>
    <rsvp-stripe-element></rsvp-stripe-element>
   </rsvp-step>
   <rsvp-step step-name=“OrderSummary”>
    <h2>Thank You! - Order Completed</h2>
    <p>An email has been sent with further details</p>
   </rsvp-step>
  </template>
 </rsvp-shop>

General Code (with address and notes fields)

Note: You need to add each relevant country you wish to have into the "Address.Country" section. You can see that Denmark and Italy are added as examples below.

<script nomodule src="https://cdn.rsvp-popup.com/webcomponents/rsvp-elements/1.0/rsvp.js"></script>
     <script type=“module” src=“https://cdn.rsvp-popup.com/webcomponents/rsvp-elements/1.0/rsvp.esm.js"></script>

   <script src=“https://js.stripe.com/v3/"></script>


<rsvp-shop url-name="[ENTER YOUR RSVP URL NAME]">
    <template>
        <rsvp-step step-name="SelectItems">
            <h3>Select your items</h3>
            <rsvp-shop-items-list></rsvp-shop-items-list>
        </rsvp-step>
        <rsvp-step step-name="ContactInfo">
            <h3>Enter Details</h3>
            <label for="FirstName">First Name
                <input name="FirstName" type="text" />
            </label>
            <label for="LastName">Last Name
                <input name="LastName" type="text" />
            </label>
            <label for="Email">Email
                <input name="Email" type="text" />
            </label>
            <label for="Address.StreetAddress">Street Address
                <input name="Address.StreetAddress" type="text" />
            </label>
            <label for="Address.City">City
                <input name="Address.City" type="text" />
            </label>
            <label for="Address.Zip">Zip
                <input name="Address.Zip" type="text" />
            </label>
            <label for="Address.Country">Country
                <select name="Address.Country">
                    <option value="DK">Denmark</option>
                    <option value="IT">Italy</option>
                </select>
            </label>
            <label for="Notes">Notes</label>
            <textarea name="Notes" rows="5" cols="40"></textarea>
        </rsvp-step>
        <rsvp-step step-name="ConfirmAndPay">
            <h2>Payment</h2>
            <p>Amount due: <strong>
                    <rsvp-text name="Basket.Total.Value"></rsvp-text>
                </strong></p>
            <rsvp-stripe-element></rsvp-stripe-element>
        </rsvp-step>
        <rsvp-step step-name="OrderSummary">
            <h2>Thank You! - Order Completed</h2>
            <p>An email has been sent with further details</p>
        </rsvp-step>
    </template>
</rsvp-shop>

Squarespace

In order to add a widget to Squarespace, you need to have the Business or Commerce package. If you do not have one of these, you have the option to add a link to RSVP where your vouchers can be purchased.

Take a look at Squarespace's guide on where to add the code to your website at https://support.squarespace.com/hc/en-us/articles/206543167.

Wordpress

For Wordpress, you need to add the Header Script in the Header section of a Wordpress page. Then, copy and paste the Body Code into the content section of the page.

Wix

We don't recommend Wix due to general compatibility issues with external services. However, if you do choose to use Wix, you will need to use the HTML iframe feature. Copy and paste the code into the correct area.

Styling tips

The button color is defaulted to RSVP's. You can change it by adding some custom CSS styling like so:

rsvp-shop {

--rsvp-button-primary: #470000;

}

Where you see "470000," replace that with the color code for the main color that you already have on your website buttons.

Did this answer your question?