Antla Custom Events Documentation

📌 Overview

Antla fires custom DOM events whenever users interact with key parts of the try-on experience.

Events are dispatched with the prefix: antla_
Each event includes rich contextual data about the funnel, user, and product.

🧩 Event Types

You can listen for the following events:

Enum Key	Event Name
MODAL_OPEN	antla_modal_open
MODAL_CLOSE	antla_modal_close
IMAGE_UPLOADED_SUCCESS	antla_image_upload_success
IMAGE_UPLOADED_ERROR	antla_image_upload_error
IMAGE_GENERATED_SUCCESS	antla_image_generated_success
IMAGE_GENERATED_ERROR	antla_image_generated_error
TRY_ON_DISCOUNT_SHOWED	antla_try_on_discount_showed
TRY_ON_DISCOUNT_COPIED_CLIPBOARD	antla_try_on_discount_copied_clipboard
PRODUCT_ADDED_TO_CART	antla_product_added_to_cart
EMAIL_SEND	antla_email_send
EMAIL_SEND_ERROR	antla_email_send_error
SOCIAL_SEND	antla_social_send
SOCIAL_SEND_ERROR	antla_social_send_error

📡 How to Listen to Events

Example:

document.addEventListener("antla_modal_open", (event) => {
  const data = event.detail;
  console.log("Modal opened", data);
});

📦 Event Payload Structure

Each event includes a payload with the following fields:

Field	Type	Description
cart_token	string \| null	Unique token for the customer’s cart.
customer_data	CustomerData \| null	Detailed customer info (name, email, orders).
product_data	ProductData \| null	Product details (ID, title, price).
input_product_image	string \| null	URL of product image used for generation.
input_user_image	string \| null	URL of the user’s image (e.g., profile picture).
selected_variant	string \| null	Selected product variant, if applicable.
output_try_on_image	string \| null	Generated try-on result image.
error_message	string \| null	Error message if event failed.
provider	"email" \| "social" \| null	Communication channel.
funnel_id	number \| null	Funnel ID tied to the event.
isEmailShared	boolean	Email sent successfully.
isWhatsAppShared	boolean	WhatsApp message sent successfully.
isFacebookShared	boolean	Facebook message sent successfully.

📦 Product Data Structure

Field	Type	Description
id	number	Unique product ID.
category	string	Product category.
collections	array	Collections this product belongs to.
available	boolean	Whether the product is available for purchase.
compare_at_price	number	Original price before discount.
compare_at_price_max	number	Max compare-at price across variants.
compare_at_price_min	number	Min compare-at price across variants.
compare_at_price_varies	boolean	If compare-at price varies across variants.
content	string	Additional content or details.
created_at	string	Timestamp product was created.
customImages	array	Custom product images.
description	string	Product description.
featured_image	string	URL of featured image.
firstAvailableOrSelected	object	First available or selected variant.
handle	string	Unique product slug (URL).
images	array	Array of product image URLs.
media	array	Media (e.g., videos).
options	array	Available options (size, color).
price	number	Product price.
price_max	number	Max variant price.
price_min	number	Min variant price.
price_varies	boolean	If prices vary across variants.
published_at	string	Timestamp when published.
requires_selling_plan	boolean	If product requires a selling plan.
selling_plan_groups	array	Related selling plan groups.
tags	array	Tags for filtering.
title	string	Product title.
type	string	Product type (e.g., Shirt, Jacket).
variants	array	Product variants.
vendor	string	Vendor name.

👤 Customer Data Structure

Field	Type	Description
id	number	Unique customer ID.
first_name	string	Customer’s first name.
last_name	string	Customer’s last name.
email	string	Customer’s email.
orders_count	number	Number of orders placed.
tags	array	Tags (e.g., loyalty status).
total_spent	string	Total spent by the customer.

🛒 Link Antla to Sidecart

<script>
    document.addEventListener("antla_product_added_to_cart", () => {
        setTimeout(() => {
            document.dispatchEvent(
              new CustomEvent('cartaddsuccess', {
                detail: {
                  openCart: true,
                },
              }),
            )
        }, 500)
    })
</script>

📸 Select second/third image at scale

First image is video, and you want the second image to be automatically selected

<script>
  {% if product.tags contains 'PACK' %}
    window.antla_preferred_image_url = {{ product.images[1] | json }};
  {% endif %}
</script>

🎨 Custom Button Placement & Styling

If you want to custom place the Antla Virtual Try-On button inside your product image gallery (e.g., in the “True Classic” style), you can override the default placement and styling.

1. Select Target Placement

Use your page’s product gallery selector (for example, .liquid-pdp__gallery-main) to place the button where you want it to appear:

.liquid-pdp__gallery-main { 
  /* Target container for custom button placement */ 
}

2. Hide the Default Antla Button

The default Antla button must remain in the DOM tree, but hidden from view. Use display: none;:

<style>
  .antla-button {
    display: none;
  }
</style>

3. Add Your Custom Button

Insert your own button in the desired location. Example:

<button class="my-custom-vtr-btn" onclick="customAntlaOpenModal()"> Virtual Try On </button>

Style this button to match your brand’s vibe

4. Hook Into Antla’s Modal

Bind the button to Antla’s openModal() method:

<script>
function customAntlaOpenModal() {
 const defaultAntlaPopup = document.querySelector('antla-block');
 if (defaultAntlaPopup) {
 defaultAntlaPopup.openModal();
 }
}
</script>