Welcome to Your Personalized Wedding Seating Chart Lookup!

We’re excited to help you create a seamless, interactive experience for your wedding guests. By using this custom Squarespace plugin, you can easily display your wedding guest seating chart online, with the convenience of a QR code that guests can scan to find their seats. Simply follow the instructions below to integrate this feature into your Squarespace website, and watch your wedding planning process get even easier!

Guest List Generator

Step 1: Get Your Guest List Code

This ensures your guests will be correctly added (Name, Table Number per line)


Step 2: Copy Guest list:















  
Step 3: Copy and Paste the Code Below:
Make sure to update the guest list below (name and table number) with your guest information!
<div id="guest-lookup-container" style="font-family: Georgia, serif; color: black; text-align: center; max-width: 600px; margin: 40px auto;">
  <h2 style="font-weight: normal; font-size: 2em; margin-bottom: 10px;">Find Your Table</h2>
  <label for="guest-search" style="font-style: italic; display: block; margin-bottom: 6px;">Enter your name:</label>
  <input type="text" id="guest-search" placeholder="e.g., Sarah Green" style="padding: 10px; width: 80%; font-size: 1em; margin-bottom: 10px;">
  <button id="lookup-btn" style="background:black; color:white; padding:10px 20px; font-size: 1em; border:none; cursor:pointer;">Search</button>
  <div id="search-results" style="font-style: italic; margin-top: 20px;"></div>
</div>
<script>
const guestList = [
****////Replace with guest list generated above
  { name: "Sarah Green", table: "5" },
  { name: "Michael Green", table: "5" },
  { name: "Ava Green", table: "5" },
  { name: "John Smith", table: "2" },
  { name: "Emily Smith", table: "2" }
];
function performLookup() {
  const input = document.getElementById("guest-search").value.toLowerCase().trim();
  const results = document.getElementById("search-results");
  results.innerHTML = "";
  if (!input) return;
  const matchedGuest = guestList.find(guest => guest.name.toLowerCase() === input);
  if (matchedGuest) {
    const othersAtTable = guestList
      .filter(guest => guest.table === matchedGuest.table)
      .map(guest => guest.name)
      .join("<br>");
    results.innerHTML = '<p><strong>Table ' + matchedGuest.table + '</strong></p><p>' + othersAtTable + '</p>';
  } else {
    results.textContent = "Guest not found.";
  }
}
document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("lookup-btn").addEventListener("click", performLookup);
  document.getElementById("guest-search").addEventListener("keypress", function(e) {
    if (e.key === "Enter") {
      e.preventDefault();
      performLookup();
    }
  });
});
</script>























  
  








  
Step 4: Place Code within Squarespace
  1. Go to your Squarespace site and navigate to the page you want to edit. Click "Edit" at the top left.
  2. Click "Add Block", select "Embed", and then click the pencil tool in the Embed block.
  3. Choose "Code Snippet", paste the code, and click Apply.
  4. Save your changes.
The below is what your code should look like on your site:























  
  





  
Find Your Table

  
  
  
  









  
Step 5: Create a QR Code
Now that your guest list code is ready, you can generate a QR code for your guests to easily access. Simply copy the URL of the page where you’ve added the guest lookup code, and use a free QR code generator, such as qr-code-generator.com, to create your QR code. This QR code can be printed and placed at your wedding.
Important Note:
 Even if you update the guest list later, the QR code will stay the same as long as you don’t change the URL of the page. So you can update your list without worrying about a new QR code.