A Wishelia button for your store

A complete AI-agent brief covering store platform detection, installation, real product data, variant updates, accessibility and testing.

1. You are an AI development agent integrating Wishelia into my store. Inspect the repository first; identify Shopify/Liquid, WooCommerce/PHP, React/Next, Vue/Nuxt or the actual platform, product templates and existing controls. Do not invent project structure.

2. A shopper clicks the button, opens Wishelia in a new tab, reviews the product, chooses or creates a wishlist and confirms saving. Guest wishlists do not require registration. A store click is NOT a completed save: never show a fake Saved state.

3. Place the control beside product actions, never nested in a link/button or used as a cart form submit. Preserve checkout, analytics, variant selection and mobile navigation.

4. Include the official CSS and defer script once in the shared template, not once per product. Respect CSP without unsafe-inline exceptions. Do not add dependencies, API keys or private Wishelia API calls.

5. Bind each button to its own real product: absolute public HTTPS URL, title, image, short text, numeric current price and ISO currency. Omit unknown optional fields instead of inventing them. In category grids never reuse the first product for every button.

6. Update product URL/variant ID, image and price on variant selection. Use platform numeric values, not parseFloat on localized currency strings. Call window.WisheliaSave.mount(document) after updates and AJAX/SPA insertion, once the script has loaded. Repeated mounting must not duplicate icons or handlers.

7. Build the no-JavaScript href using URL/URLSearchParams with /save on the selected official domain and the url parameter. Encode once, preserve meaningful product variant parameters and HTML-escape attributes with the platform. Avoid unsafe innerHTML and never send access tokens, sessions, customer email, passwords, cart data or browsing history.

8. Use the selected style below. Use the original Wishelia PNG from /integrations/wishelia-symbol.png, not a replacement SVG or emoji. Icon-only links need a meaningful accessible name. Support Tab/Enter, visible focus, contrast and 48px normal,32px desktop mini and at least44px touch targets; prevent page-wide horizontal overflow.

9. Test product/category pages, multiple distinct products, all three variants,320/390px phones and desktop, keyboard/screen reader, variant updates, repeated mount, missing/invalid URLs, script failure, region and currency. Private IP, localhost and javascript: product URLs must not work. Do not make purchases or save into another person’s wishlist to test.

10. Supplied data is a hint: Wishelia parses the page and the shopper confirms the result. Do not bypass invalid-URL checks. Report changed files, platform field mappings, variant updates, checks and limitations. Keep useful code comments and follow my project’s approval process before publishing store changes.

REGION: US
DOMAIN: https://wishelia.com
CURRENCY: USD
VARIANT: primary
SIZE: normal
BRAND_ICON: https://wishelia.com/integrations/wishelia-symbol.png

HTML:
<!-- Button styles. Include once in the page or store template <head>. -->
<link rel="stylesheet" href="https://wishelia.com/integrations/wishelia-save.css">
<!-- Button logic. defer runs after HTML parsing; include once. -->
<script src="https://wishelia.com/integrations/wishelia-save.js" defer></script>

<!--
data-wishelia-save marks this integration element; it needs no value.
data-wishelia-market: UA = Ukraine, PL = Poland, US = English version.
data-wishelia-variant: primary = filled with icon, outline = outlined, icon = icon only.
data-wishelia-size: normal = 48px; mini = 32px (44px touch).
data-wishelia-url is the full public URL of THIS product, not the store or cart.
data-wishelia-title is the real product name, up to 200 characters.
data-wishelia-currency: UAH = Ukrainian hryvnia; PLN = Polish zloty; USD = US dollar; EUR = euro; GBP = British pound.
href works without JavaScript: /save opens product capture; url contains the URL-encoded product address.
target opens a new tab; rel and referrerpolicy isolate it and suppress the Referer header.
Link text names the action for shoppers and screen readers; icon mode hides it visually.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="US"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Ceramic mug"
   data-wishelia-currency="USD"
   href="https://wishelia.com/save?url=https%3A%2F%2Fyour-store.example%2Fproduct%2Fmug"
   target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"><img data-wishelia-icon src="https://wishelia.com/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Save to Wishelia</span></a>

<!--
Full optional-data example: replace the previous <a> with this one; do not add a second button.
Public absolute product image URL, without private addresses or access tokens.
Plain-text product description, up to 500 characters, with no personal data.
Numeric price from 0 to 999999999. Use a decimal point, no grouping or currency symbol.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="US"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Ceramic mug"
   data-wishelia-currency="USD"
   data-wishelia-image="https://your-store.example/images/mug.jpg"
   data-wishelia-description="Ceramic mug, 350 ml"
   data-wishelia-price="499.00"
   href="https://wishelia.com/save?url=https%3A%2F%2Fyour-store.example%2Fproduct%2Fmug"
   target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"><img data-wishelia-icon src="https://wishelia.com/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Save to Wishelia</span></a>

You can also supply an image, a short description, a price and currency. Wishelia reads the product page; the shopper can edit the result.

<!--
Full optional-data example: replace the previous <a> with this one; do not add a second button.
Public absolute product image URL, without private addresses or access tokens.
Plain-text product description, up to 500 characters, with no personal data.
Numeric price from 0 to 999999999. Use a decimal point, no grouping or currency symbol.
-->
<a data-wishelia-save
   class="wishelia-save-button wishelia-save-button--primary"
   data-wishelia-market="US"
   data-wishelia-variant="primary"
   data-wishelia-size="normal"
   data-wishelia-url="https://your-store.example/product/mug"
   data-wishelia-title="Ceramic mug"
   data-wishelia-currency="USD"
   data-wishelia-image="https://your-store.example/images/mug.jpg"
   data-wishelia-description="Ceramic mug, 350 ml"
   data-wishelia-price="499.00"
   href="https://wishelia.com/save?url=https%3A%2F%2Fyour-store.example%2Fproduct%2Fmug"
   target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"><img data-wishelia-icon src="https://wishelia.com/integrations/wishelia-symbol.png" width="28" height="28" alt="" aria-hidden="true"><span data-wishelia-label>Save to Wishelia</span></a>

If your store loads more products without refreshing the page, call WisheliaSave.mount(document) after they appear.