Web Integration

Add the "Add to Wishr" button to your product pages using simple HTML and JavaScript. The button opens Wishr in a popup window with pre-filled product information.

Required Data Fields

<!-- Add this button next to your "Add to Cart" button -->
<button
  onclick="addToWishr()"
  class="wishr-button"
  style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background-color: #9333EA; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600;">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <polyline points="20 12 20 22 4 22 4 12"></polyline>
    <rect width="20" height="5" x="2" y="7"></rect>
    <path d="m12 22 0-10"></path>
    <path d="m8 12-3-3 3-3"></path>
    <path d="m16 12 3-3-3-3"></path>
  </svg>
  Add to Wishr
</button>

<script>
function addToWishr() {
  // Required product data
  const productData = {
    name: "Product Name",           // Required
    description: "Product details", // Required
    price: "29.99",                 // Required (string or number)
    image: "https://...",           // Required (full URL)
    url: window.location.href       // Optional but recommended
  };

  // Open Wishr with product data
  const params = new URLSearchParams({
    name: productData.name,
    description: productData.description,
    price: productData.price,
    image: productData.image,
    url: productData.url || ''
  });

  window.open(
    `https://app.wishr.com/add-item?${params.toString()}`,
    'wishr-popup',
    'width=500,height=700,left=100,top=100'
  );
}
</script>

Integration Steps

1. 1
   Add the button HTML

   Place the button next to your "Add to Cart" button on product pages.

2. 2
   Populate product data

   Replace the placeholder values with your actual product data (name, description, price, image URL).

3. 3
   Test the integration

   Click the button to verify it opens Wishr with the correct product information.

4. 4
   Go live

   Deploy to production and let customers start adding items to their Wishr wishlists!