Wix Installation

Add virtual product visualization to your Wix website using custom code elements.

Requirements

• A Wix website (Premium plan required for custom code)
• A Tap and Try account (free tier available)
• Wix Editor or Wix Studio access

Step 1: Get Your API Key

1. Create a Tap and Try account if you haven't already
2. Go to your Dashboard → Settings → API Keys
3. Create a new API key and copy it

Step 2: Add Products

1. Go to your Tap and Try Dashboard
2. Click New Product to add products
3. Upload product images (backgrounds will be removed automatically)
4. Set the checkout URL to your Wix product page
5. Publish the product and note the product slug

Step 3: Add the Widget Script

Add the Tap and Try widget to your Wix site:

Using Wix Editor

1. Open your site in the Wix Editor
2. Click Settings in the left menu
3. Select Custom Code under Advanced
4. Click + Add Custom Code
5. Paste the following code:

<script 
  src="https://tapandtry.com/widget.js" 
  data-api-key="YOUR_API_KEY"
></script>

6. Set placement to Body - end
7. Choose to load on All pages or specific pages
8. Click Apply

Step 4: Add the Try It On Button

Add a button to your product pages that opens the visualizer:

Option A: Using an HTML Embed

1. In the Wix Editor, click Add Elements (+)
2. Go to Embed Code → Embed HTML
3. Drag the element to your product page
4. Click Enter Code and paste:

<button 
  onclick="TapAndTry.open('your-product-slug')"
  style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit;"
>
  Tap & Try It
</button>

Replace your-product-slug with your actual product slug from the Tap and Try dashboard.

Option B: Using Wix Velo (Advanced)

For dynamic product pages, you can use Wix Velo to automatically set the product:

1. Enable Velo Dev Mode in your Wix Editor
2. Add a button element to your product page
3. Add this code to your page:

import wixWindow from 'wix-window';

$w.onReady(function () {
  $w('#tryItButton').onClick(() => {
    // Get product slug from your data
    const productSlug = $w('#dynamicDataset').getCurrentItem().slug;
    wixWindow.postMessage({ type: 'tapandtry-open', slug: productSlug });
  });
});

Wix Stores Integration

If you're using Wix Stores, you can match products by using the Wix product ID as the "External ID" in Tap and Try. This allows for easier product matching on dynamic store pages.

Troubleshooting

Button not working?

• Ensure the widget script is added to your site's custom code
• Verify your API key is correct
• Check that the product slug matches exactly
• Make sure the product is published in Tap and Try

Custom code not appearing?

• Custom code requires a Wix Premium plan
• Publish your site after adding custom code
• Check the browser console for JavaScript errors

Styling issues?

• HTML embeds may need explicit font-family styles
• Use inline styles for consistent appearance
• Test on both desktop and mobile views