Try-on events in the browser

The try-on fires events on window so your store’s code can react when it becomes ready, opens, closes, adds to cart, identifies the shopper or fails. They are all CustomEvents; the data is in event.detail.

window.addEventListener("reverbs:cartUpdated", function (event) {
  // Refresh your theme's mini cart here.
});

Register your listeners as early as possible, ideally before the Provei code, so you don’t miss events that fire during page load.

Which events each try-on fires

Event	Rooms (furniture, flooring and walls)	Fashion and eyewear	Sizing
reverbs:ready	Yes	No	No
reverbs:error	Yes	No	No
reverbs:init, reverbs:open, reverbs:close, reverbs:destroy	Yes	Under other names: reverbs:fashion:init, reverbs:fashion:open, reverbs:fashion:close, reverbs:fashion:destroy	No
reverbs:cartUpdated	Yes	Yes	No
reverbs:identityComplete	Yes	Yes	Yes

reverbs:ready

The room try-on finished loading and looking up the page’s product. Fires once per page.

detail: { widget, userId }

• widget: the try-on, the same object as window.reverbsWidget.
• userId: the ID of the account that owns the try-on.

Ready doesn’t mean the button is showing: on products outside the catalog, the try-on loads but doesn’t show the button.

reverbs:error

The room try-on couldn’t load.

detail: { code, message, userId }

Use message to log the error to the console or to your monitoring tool. The code values can change, so don’t build store logic on them.

The most common causes are:

• the ID in the code was cut off or altered;
• the page has codes from two different accounts;
• a blocker or the store’s security policy blocked the script;
• a temporary failure while loading the store settings.

See what to do in each case in Room try-on loader.

reverbs:init

The try-on finished initializing. That doesn’t guarantee the button shows: see The try-on button doesn’t show.

detail: { widget }

In the fashion and eyewear try-ons, the name is reverbs:fashion:init, with the same detail.

reverbs:open and reverbs:close

The try-on window opened or closed, either by the shopper or through the JavaScript API.

detail: { widget }

In the fashion and eyewear try-ons, the names are reverbs:fashion:open and reverbs:fashion:close.

reverbs:destroy

The try-on was removed from the page and stopped working.

detail: { widget }

In the fashion and eyewear try-ons, the name is reverbs:fashion:destroy.

reverbs:cartUpdated

The shopper added a product to the cart from the try-on and the store’s platform confirmed it.

detail: the cart data returned by the platform. The format varies from platform to platform, so treat the event as a signal and read the cart through your own theme.

Use this event to refresh the theme’s mini cart or item counter. In the room try-on, the window closes before the event fires.

Tip

If the theme’s cart doesn’t update after a shopper adds an item from the try-on, listen for this event and call the theme function that reloads the cart.

reverbs:identityComplete

The shopper completed the identification required by the access rules, for example by leaving their contact details before the try-on.

detail: { completed: true }

The event doesn’t include name, email or phone. Contacts are under Clientes (Customers) in the dashboard.

Frequently asked questions

How do I refresh the theme's mini cart after a shopper adds an item from the try-on?

Listen for the reverbs:cartUpdated event on window and, when it fires, have the theme reload the cart.

Do the events include the shopper's personal data?

No. The identification event only carries completed true. Name, email and phone are under Clientes (Customers) in the dashboard.

See also

• Try-on JavaScript API
• Room try-on loader
• Try-on in SPA and headless stores