Universal Installation

This guide covers installing TrialClouds Virtual Try-On on any website, including WooCommerce, WordPress, Magento, custom platforms, or static HTML sites. The installation involves adding a script tag and button HTML to your website.

Best for: Non-Shopify platforms, custom websites, WooCommerce stores Time required: 15-20 minutes Skill level: Basic HTML knowledge helpful Alternative: For Shopify stores, see Shopify App Installation

Get your Site ID

You will find your Site ID in the TrialClouds dashboard and use it in the embed script.

Add the embed script

Add the TrialClouds script to every page where you want try-on functionality.

Add Try-On buttons

Add the trigger button HTML to product pages so the widget opens with the product data.

Step 1: Get Your Site ID

Go to https://app.trialclouds.com
Login with your account credentials
Complete onboarding if you haven't already

1.2 Find Your Site ID

If you've completed onboarding:

Navigate to Sites section in left sidebar
Find your site in the list
Your Site ID is displayed under the site name
Click the copy icon to copy it

If you haven't set up a site yet:

Click "Add Site" or follow the onboarding flow
Enter your domain (e.g., www.yourstore.com)
Complete the setup wizard
Your Site ID will be generated

Site ID Format: A long alphanumeric string like cmkozmnbi00012euxrl81rx69

Tip: Keep your Site ID handy – you'll need it for the embed script.

[Screenshot Placeholder: Dashboard Sites page showing site card with Site ID highlighted and copy button]

Step 2: Add the Embed Script

The embed script loads the TrialClouds widget on your website. It must be added to every page where you want the try-on functionality to work.

2.1 Get the Script Code

From your dashboard:

Click on your site
Find the "Embed Script" section
Click "Copy to Clipboard"

The script looks like this:

Embed script

<!-- Start of TrialClouds Script -->
<script
  id="tc-snippet"
  src="https://widget.trialclouds.com/script/YOUR_SITE_ID"
></script>
<!-- End of TrialClouds Script -->

Replace YOUR_SITE_ID with your actual Site ID if copying manually.

2.2 Where to Place the Script

Recommended Placement: Just before the closing </body> tag

Why? This ensures the page content loads first, then the widget script loads asynchronously without blocking page render.

Alternative: In the <head> section with defer attribute (advanced)

2.3 Platform-Specific Instructions

WordPress / WooCommerce

Method 1: Theme Footer File (Recommended)

Go to Appearance → Theme Editor
Find and open footer.php (right sidebar, under Theme Files)
Scroll to find the closing </body> tag
Paste the script just before </body>
Click "Update File" to save
The script now loads on all pages

⚠️ Warning: Changes may be lost on theme updates. Consider using a child theme.

Method 2: Plugin (Safer for Theme Updates)

Install a plugin like "Insert Headers and Footers" or "Code Snippets"
Go to plugin settings
Paste the script in the "Footer" section
Save changes
The plugin injects the script automatically

Method 3: Custom Hook (Advanced)

functions.php snippet

function trialclouds_embed_script() {
    ?>
    <script id="tc-snippet" src="https://widget.trialclouds.com/script/YOUR_SITE_ID"></script>
    <?php
}
add_action('wp_footer', 'trialclouds_embed_script');

Custom HTML Website

Open your main layout/template file (e.g., index.html, layout.html, _layout.html)
Find the closing </body> tag
Paste the script just before </body>
Save the file
Upload to your server if needed

Example:

index.html example

<!DOCTYPE html>
<html>
  <head>
    <title>My Store</title>
  </head>
  <body>
    <!-- Your page content -->

    <!-- Start of TrialClouds Script -->
    <script
      id="tc-snippet"
      src="https://widget.trialclouds.com/script/cmkozmnbi00012euxrl81rx69"
    ></script>
    <!-- End of TrialClouds Script -->
  </body>
</html>

Webflow

Go to Project Settings (top left gear icon)
Navigate to Custom Code tab
Scroll to Footer Code section
Paste the TrialClouds script
Click "Save Changes"
Publish your site for changes to take effect

Squarespace

Go to Settings → Advanced → Code Injection
Find the Footer section
Paste the TrialClouds script
Click "Save"
The script will load on all pages

Wix

Go to Settings → Custom Code (under Advanced)
Click "+ Add Custom Code"
Paste the TrialClouds script
Set placement to "Body - end"
Apply to "All Pages" or select specific pages
Publish your site

Magento 2

In Magento Admin, go to Content → Configuration
Select your store view and click "Edit"
Expand "HTML Head" section
Paste the script in "Scripts and Style Sheets"
Save configuration
Clear cache

Alternatively, edit your theme's footer.phtml template file.

React / Vue / Angular (SPA)

For single-page applications, add the script to your main index.html file:

React (public/index.html):

React index.html

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>

    <!-- TrialClouds Script -->
    <script
      id="tc-snippet"
      src="https://widget.trialclouds.com/script/YOUR_SITE_ID"
    ></script>
  </body>
</html>

Dynamic Button Detection: The widget automatically detects buttons added dynamically using MutationObserver, so it works seamlessly with SPAs.

2.4 Verify Script Installation

Open your website in a browser
Press F12 to open Developer Tools
Go to Console tab
Type: window.TrialClouds_API
Press Enter

Expected Result: Should display an object (not undefined)

If you see an object, the script is loaded successfully! ✅

If you see undefined, the script isn't loading. Check:

Site ID is correct
No JavaScript errors in Console
Script URL is accessible (check Network tab)

[Screenshot Placeholder: Browser console showing window.TrialClouds_API object]

Step 3: Add Try-On Buttons

Now that the widget script is loaded, you need to add "Try On" buttons to your product pages.

3.1 Button HTML Template

Here's the complete button code with all attributes:

Button template

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="PRODUCT_123"
  data-product-name="Stylish Blue Shirt"
  data-brand="Your Brand"
  data-price="99.99"
  data-sale-price="79.99"
  data-currency="USD"
  data-link="https://yourwebsite.com/products/blue-shirt"
  data-images='["https://yourwebsite.com/images/blue-shirt-front.jpg","https://yourwebsite.com/images/blue-shirt-side.jpg"]'
>
  Try On 👗
</button>

3.2 Required Attributes

These attributes MUST be present for the widget to work:

Attribute

Description

Example

class

Must be trialclouds-trial-widget-trigger-button

(don't change)

data-product-id

Unique product identifier

"SKU123" or "789"

data-product-name

Product title/name

"Blue Cotton Shirt"

data-images

JSON array of image URLs

'["url1.jpg","url2.jpg"]'

data-link

Product page URL

"https://store.com/product"

3.3 Optional Attributes

These enhance functionality but aren't required:

Attribute

Description

Example

data-brand

Brand/vendor name

"Nike"

data-price

Original price (number)

"99.99"

data-sale-price

Discounted price

"79.99"

data-currency

Currency code

"USD", "EUR", "GBP"

data-source

Pre-loaded customer photo URL

"https://..."

data-user-id

Customer ID (for analytics)

"customer_456"

data-user-name

Customer name (pre-fills widget)

"John Doe"

data-user-email

Customer email

"[email protected]"

3.4 Important Notes

Image URLs:

Must be publicly accessible (not localhost)
Use HTTPS (not HTTP)
Format as JSON array: '["url1","url2"]'
URLs should point to model photos (person wearing product)

Button Text:

Customize as needed: "Try It On", "Virtual Try-On", "See On You"
Emojis work great: 👗, 👕, 👔, ✨

Class Name:

The class trialclouds-trial-widget-trigger-button is REQUIRED
Don't remove or rename it
You can add additional classes for styling

3.5 WooCommerce Implementation

For WooCommerce, you'll want to dynamically populate product data.

Method 1: Template File Edit

Edit your theme's single-product.php or content-single-product.php
Find a good location (after product image or near Add to Cart)
Add this code:

WooCommerce template

<?php
global $product;

// Get product images
$image_urls = array();
$attachment_ids = $product->get_gallery_image_ids();
if ( $product->get_image_id() ) {
    $image_urls[] = wp_get_attachment_url( $product->get_image_id() );
}
foreach ( $attachment_ids as $attachment_id ) {
    $image_urls[] = wp_get_attachment_url( $attachment_id );
}
$images_json = json_encode( $image_urls );
?>

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="<?php echo esc_attr( $product->get_id() ); ?>"
  data-product-name="<?php echo esc_attr( $product->get_name() ); ?>"
  data-brand="<?php echo esc_attr( $product->get_attribute( 'brand' ) ); ?>"
  data-price="<?php echo esc_attr( $product->get_regular_price() ); ?>"
  <?php if ( $product->is_on_sale() ) : ?>
  data-sale-price="<?php echo esc_attr( $product->get_sale_price() ); ?>"
  <?php endif; ?>
  data-currency="<?php echo esc_attr( get_woocommerce_currency() ); ?>"
  data-link="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
  data-images='<?php echo $images_json; ?>'>
  Try On 👗
</button>

Method 2: Using Hook (Recommended)

Add to your theme's functions.php:

functions.php hook

function add_trialclouds_button() {
    global $product;

    // Get product images
    $image_urls = array();
    if ( $product->get_image_id() ) {
        $image_urls[] = wp_get_attachment_url( $product->get_image_id() );
    }
    $attachment_ids = $product->get_gallery_image_ids();
    foreach ( $attachment_ids as $attachment_id ) {
        $image_urls[] = wp_get_attachment_url( $attachment_id );
    }
    $images_json = json_encode( $image_urls );

    ?>
    <button
      class="trialclouds-trial-widget-trigger-button"
      data-product-id="<?php echo esc_attr( $product->get_id() ); ?>"
      data-product-name="<?php echo esc_attr( $product->get_name() ); ?>"
      data-brand="<?php echo esc_attr( $product->get_attribute( 'brand' ) ); ?>"
      data-price="<?php echo esc_attr( $product->get_regular_price() ); ?>"
      <?php if ( $product->is_on_sale() ) : ?>
      data-sale-price="<?php echo esc_attr( $product->get_sale_price() ); ?>"
      <?php endif; ?>
      data-currency="<?php echo esc_attr( get_woocommerce_currency() ); ?>"
      data-link="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
      data-images='<?php echo $images_json; ?>'>
      Try On 👗
    </button>
    <?php
}

// Add button after product summary
add_action( 'woocommerce_after_single_product_summary', 'add_trialclouds_button', 15 );

// Or add before Add to Cart button
// add_action( 'woocommerce_before_add_to_cart_button', 'add_trialclouds_button' );

3.6 Custom Styling

The button inherits your site's default styles, but you can customize it:

Custom CSS

.trialclouds-trial-widget-trigger-button {
  background-color: #6366f1; /* Indigo */
  color: white;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  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: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.trialclouds-trial-widget-trigger-button:active {
  transform: translateY(0);
}

Add this CSS to your theme's stylesheet or in a <style> tag.

Step 4: Test Your Installation

4.1 Basic Test

Open a product page where you added the button
Look for the "Try On" button
Click the button
The TrialClouds widget should open in an overlay

✅ Success: If the widget opens, your installation is working.

4.2 Complete Test

In the widget, click "Upload Photo"
Select a test image with a clear face
Wait for AI processing (20-30 seconds)
View the try-on result
Test download button (if enabled)

4.3 Cross-Browser Testing

Test in multiple browsers:

Chrome
Firefox
Safari
Edge
Mobile browsers (iOS Safari, Chrome on Android)

4.4 Mobile Testing

Test on actual devices:

Open product page on mobile
Button should be visible and tappable
Widget should display properly
Upload from gallery or camera should work

Troubleshooting

Images Not Showing

Check:

✓ Image URLs are publicly accessible (not localhost)
✓ URLs use HTTPS (not HTTP)
✓ data-images is valid JSON: '["url1","url2"]'
✓ No CORS issues (check Network tab in DevTools)

Button Looks Wrong

Check:

✓ CSS conflicts with other styles
✓ Inspect element to see applied styles
✓ Add !important to your custom styles if needed
✓ Check for CSS specificity issues

Need More Help?

Next Steps

Installation complete! Now optimize your setup:

Customize Appearance: Manage Sites
Optimize Button: Button Customization
Improve Placement: Button Placement
Monitor Analytics: Dashboard

Advanced Topics

Multiple Buttons Per Page

You can have multiple try-on buttons on the same page (e.g., for related products):

Multiple buttons example

<!-- 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 will open the widget with its respective product data.

Pre-filling Customer Data

If you have logged-in customers, pre-fill their data for a faster experience:

Prefill example

<button
  class="trialclouds-trial-widget-trigger-button"
  data-product-id="123"
  data-product-name="Product"
  data-images='["img.jpg"]'
  data-link="/product"
  data-user-id="customer_789"
  data-user-name="Jane Smith"
  data-user-email="[email protected]"
>
  Try On
</button>

Security: Never expose sensitive data. Only use publicly available customer info.

Dynamic Buttons (JavaScript)

For SPAs or dynamically loaded products:

Dynamic button JS

// Create button dynamically
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-images", JSON.stringify(product.images));
button.setAttribute("data-link", product.url);
button.textContent = "Try On 👗";

// Add to page
document.querySelector(".product-actions").appendChild(button);

// Widget automatically detects new buttons via MutationObserver

Need help? Contact us at [email protected]

PreviousGetting Started NextShopify App Installation

Last updated 6 days ago

hashtagGet your Site ID

hashtagAdd the embed script

hashtagAdd Try-On buttons

hashtagStep 1: Get Your Site ID

hashtag1.1 Login to Dashboard

hashtag1.2 Find Your Site ID

hashtagStep 2: Add the Embed Script

hashtag2.1 Get the Script Code

hashtag2.2 Where to Place the Script

hashtag2.3 Platform-Specific Instructions

hashtagWordPress / WooCommerce

hashtagCustom HTML Website

hashtagWebflow

hashtagSquarespace

hashtagWix

hashtagMagento 2

hashtagReact / Vue / Angular (SPA)

hashtag2.4 Verify Script Installation

hashtagStep 3: Add Try-On Buttons

hashtag3.1 Button HTML Template

hashtag3.2 Required Attributes

hashtag3.3 Optional Attributes

hashtag3.4 Important Notes

hashtag3.5 WooCommerce Implementation

hashtag3.6 Custom Styling

hashtagStep 4: Test Your Installation

hashtag4.1 Basic Test

hashtag4.2 Complete Test

hashtag4.3 Cross-Browser Testing

hashtag4.4 Mobile Testing

hashtagTroubleshooting

hashtagNext Steps

hashtagAdvanced Topics

hashtagMultiple Buttons Per Page

hashtagPre-filling Customer Data

hashtagDynamic Buttons (JavaScript)