Button Customization

Complete guide to customizing your virtual Try-On button with HTML attributes, styling, and dynamic data population.

Understanding the Button

The Try-On button is the trigger that opens your virtual try-on widget. It uses data attributes to pass product information to the widget.

Critical Requirement: The button MUST have the class trialclouds-trial-widget-trigger-button to function.

Required Button Attributes

These four attributes are mandatory for the widget to work:

data-product-id

• Purpose: Unique identifier for the product

• Format: String or number

• Example: data-product-id="SKU-12345" or data-product-id="789"

• Used for: Analytics tracking, product identification

data-product-name

• Purpose: Product title displayed in widget

• Format: String (escape special characters)

• Example: data-product-name="Blue Cotton T-Shirt"

• Used for: Widget header, analytics

data-images

• Purpose: Product images for try-on

• Format: JSON array of image URLs

• Example: data-images='["https://example.com/img1.jpg","https://example.com/img2.jpg"]'

• Requirements:

  • Must be publicly accessible URLs

  • Use HTTPS (not HTTP)

  • Images should show model wearing product

  • Valid JSON format (use single quotes around attribute, double quotes inside)

data-link

• Purpose: URL to product page

• Format: Full URL

• Example: data-link="https://yourstore.com/products/blue-shirt"

• Used for: "Shop Now" link in widget, analytics

Minimal Button Example:

index.html

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="PROD123"
  data-product-name="Stylish Blue Shirt"
  data-link="https://example.com/product"
  data-images='["https://example.com/image.jpg"]'
>
  Try On
</button>

Optional Button Attributes

These attributes enhance functionality but aren't required:

data-brand

• Purpose: Brand or vendor name

• Example: data-brand="Nike"

• Used for: Display in widget, analytics

data-price

• Purpose: Original product price

• Format: Numeric string (no currency symbols)

• Example: data-price="99.99"

• Used for: Display in widget, analytics

data-sale-price

• Purpose: Discounted price (if on sale)

• Format: Numeric string

• Example: data-sale-price="79.99"

• Used for: Shows sale price in widget

data-currency

• Purpose: Currency code

• Format: 3-letter ISO code

• Example: data-currency="USD", "EUR", "GBP", "INR"

• Used for: Price display formatting

data-source

• Purpose: Pre-loaded customer face image URL

• Example: data-source="https://example.com/customer-photo.jpg"

• Used for: Skip upload step for returning customers

• Note: Use only if customer previously uploaded and you stored their image

data-user-id

• Purpose: Customer identifier

• Example: data-user-id="customer_456"

• Used for: Analytics, tracking specific customers

data-user-name

• Purpose: Customer's name

• Example: data-user-name="John Doe"

• Used for: Pre-filling widget forms, personalization

data-user-email

• Purpose: Customer's email address

• Example: data-user-email="[email protected]"

• Used for: Pre-filling forms, follow-up

Full-Featured Button Example:

index.html

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="SKU-789"
  data-product-name="Premium Leather Jacket"
  data-brand="Fashion Co"
  data-price="299.99"
  data-sale-price="249.99"
  data-currency="USD"
  data-link="https://store.com/jacket"
  data-images='["https://store.com/img1.jpg","https://store.com/img2.jpg"]'
  data-user-id="cust_123"
  data-user-name="Jane Smith"
  data-user-email="[email protected]"
>
  Try On 🧥
</button>

Button Text Customization

Change the button text to match your brand voice.

Examples:

• Try On – Simple, clear

• Try On 👗 – With emoji

• Virtual Try-On – Explicit

• See It On You – Personal

• Try Before You Buy – Value-focused

• See How It Looks – Descriptive

Emoji Ideas: 👗 👕 👔 👚 ✨ 🛍️ 👀

index.html

<button class="trialclouds-trial-widget-trigger-button" data-...>
  See It On You ✨
</button>

Styling the Button

Inline CSS (Quick Method)

index.html

<button
  class="trialclouds-trial-widget-trigger-button"
  style="
    background-color: #6366f1;
    color: white;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  "
  data-product-id="123"
  data-...
>
  Try On
</button>

Pros: Quick, no separate CSS file needed Cons: Harder to maintain, can't use :hover without JavaScript

External CSS (Recommended)

styles.css

.trialclouds-trial-widget-trigger-button {
  /* Layout */
  display: inline-block;
  padding: 14px 32px;
  margin: 16px 0;

  /* Typography */
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;

  /* Colors */
  background-color: #4caf50;
  color: white;
  border: none;

  /* Shape */
  border-radius: 8px;

  /* Effects */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trialclouds-trial-widget-trigger-button:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.trialclouds-trial-widget-trigger-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trialclouds-trial-widget-trigger-button:focus {
  outline: 2px solid #4caf50;
  outline-offset: 2px;
}

Pros: Maintainable, supports hover/focus, can be reused Cons: Requires CSS file access

Adding CSS Classes

You can add additional classes for styling while keeping the required class:

index.html

<button
  class="trialclouds-trial-widget-trigger-button btn btn-primary my-custom-button"
  data-...
>
  Try On
</button>

Then style .my-custom-button in your CSS without affecting the widget functionality.

Responsive Design

Make your button mobile-friendly:

styles.css

.trialclouds-trial-widget-trigger-button {
  padding: 12px 28px;
  font-size: 16px;
}

/* Tablet */
@media screen and (max-width: 768px) {
  .trialclouds-trial-widget-trigger-button {
    padding: 14px 32px;
    font-size: 17px; /* Slightly larger for touch */
  }
}

/* Mobile */
@media screen and (max-width: 480px) {
  .trialclouds-trial-widget-trigger-button {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 18px; /* Bigger for small screens */
  }
}

Mobile Best Practices:

• Minimum height: 44px (Apple's tap target recommendation)

• Full-width on mobile: Easier to tap

• Larger font size: Better readability

• Adequate padding: Comfortable tapping

Dynamic Data Population

JavaScript/React Example

script.js

const product = {
  id: "789",
  name: "Blue Cotton Shirt",
  brand: "Fashion Co",
  price: 49.99,
  images: ["https://example.com/img1.jpg", "https://example.com/img2.jpg"],
  url: "https://example.com/products/blue-shirt",
};

const button = document.createElement("button");
button.className = "trialclouds-trial-widget-trigger-button";
button.setAttribute("data-product-id", product.id);
button.setAttribute("data-product-name", product.name);
button.setAttribute("data-brand", product.brand);
button.setAttribute("data-price", product.price);
button.setAttribute("data-currency", "USD");
button.setAttribute("data-link", product.url);
button.setAttribute("data-images", JSON.stringify(product.images));
button.textContent = "Try On 👗";

document.querySelector(".product-actions").appendChild(button);
// Widget automatically detects the new button

WordPress/PHP Example

template.php

<?php
$product_id = get_the_ID();
$product_name = get_the_title();
$product_images = array();
// Get product images logic here
$images_json = json_encode($product_images);
?>

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="<?php echo esc_attr($product_id); ?>"
  data-product-name="<?php echo esc_attr($product_name); ?>"
  data-images='<?php echo $images_json; ?>'
  data-link="<?php echo esc_url(get_permalink()); ?>">
  Try On
</button>

Multiple Buttons Per Page

You can have multiple Try-On buttons on the same page.

Use Case: Same Product, Multiple Locations

index.html

<!-- Near product images -->
<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="123"
  data-...
>
  Try On
</button>

<!-- After product description -->
<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="123"
  data-...
>
  Try On
</button>

<!-- Sticky footer on mobile -->
<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="123"
  data-...
>
  Try On
</button>

All buttons open the same product – customers can click whichever is most convenient.

Use Case: Different Products

index.html

<!-- Product 1 -->
<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="PROD1"
  data-product-name="Blue Shirt"
  data-images='["img1.jpg"]'
  data-link="/product1"
>
  Try On
</button>

<!-- Product 2 -->
<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="PROD2"
  data-product-name="Red Dress"
  data-images='["img2.jpg"]'
  data-link="/product2"
>
  Try On
</button>

Each button opens the widget with its respective product data.

Pre-filling Customer Data

If you have logged-in customers, pre-fill their information.

Benefits:

• Faster experience for returning customers

• Better analytics (track specific customers)

• Personalization

Example with Conditional Logic (pseudo-code):

template.liquid

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="123"
  data-product-name="Product"
  data-images='["img.jpg"]'
  data-link="/product"
  {%
  if
  customer_logged_in
  %}
  data-user-id="{{ customer.id }}"
  data-user-name="{{ customer.name }}"
  data-user-email="{{ customer.email }}"
  {%
  endif
  %}
/>
  Try On
</button>

Security Note: Only use publicly available customer data. Never expose sensitive information (passwords, payment details, etc.).

Common Patterns

Pattern: Icon Button

Button with icon instead of text:

index.html

<button class="trialclouds-trial-widget-trigger-button icon-only" data-...>
  <svg width="24" height="24" viewBox="0 0 24 24">
    <!-- Your icon SVG -->
  </svg>
</button>

styles.css

.trialclouds-trial-widget-trigger-button.icon-only {
  padding: 10px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
}

Pattern: Text + Icon

index.html

<button class="trialclouds-trial-widget-trigger-button" data-...>
  <span class="icon">👗</span>
  <span class="text">Try On</span>
</button>

styles.css

.trialclouds-trial-widget-trigger-button .icon {
  margin-right: 8px;
}

Pattern: Loading State

Show loading indicator while widget initializes:

script.js

button.addEventListener("click", function () {
  this.disabled = true;
  this.innerHTML = "Loading... ⏳";
  // Widget handles the rest
});

Troubleshooting

Button Doesn't Trigger Widget

Check:

• Class is exactly trialclouds-trial-widget-trigger-button (no typos)

• Embed script is loaded (check window.TrialClouds_API in console)

• Required attributes present (product-id, product-name, images, link)

• No JavaScript errors preventing click

Images Not Loading in Widget

Check:

• URLs are publicly accessible (not localhost)

• URLs use HTTPS (not HTTP)

• data-images is valid JSON: '["url1","url2"]'

• Image files actually exist at those URLs

Button Styling Not Applied

Check:

• CSS selector is correct and specific enough

• No conflicting styles from theme

• Browser cache cleared

• CSS file is loaded before page render

Button Not Visible

Check:

• Button HTML is present in page source (View Source)

• No CSS hiding it (display: none, visibility: hidden)

• Button isn't positioned off-screen

• Check z-index if other elements cover it

Best Practices

Data Attributes

• Always escape user-generated content

• Validate URLs before inserting

• Use proper JSON encoding for images array

• Keep data minimal (don't send unnecessary info)

Accessibility

• Use semantic <button> element (not <div> or <a>)

• Ensure sufficient color contrast

• Add focus styles for keyboard navigation

• Consider aria-label for screen readers

Performance

• Don't inline large images in data attributes

• Use CDN URLs for product images when possible

• Lazy load buttons if page has many products

• Minimize DOM manipulation

Mobile

• Make buttons touch-friendly (minimum 44x44px)

• Test on actual devices, not just emulators

• Consider thumb-reach zones for placement

• Full-width buttons often work best on mobile

For platform-specific implementation:

• Shopify Button Settings

• Universal Widget Installation

Need help? Email [email protected]