Events

Epigraph solutions dispatch custom DOM events through the web component element. You can listen for these events using standard addEventListener on the component reference.

Lifecycle Events

`epgappready`

Fired when the experience has fully loaded and is ready for interaction. This fires after all assets have been fetched, the scene has been built, and rendering has begun.

Property	Value
Event name	`epgappready`
Bubbles	No
Detail	`""` (empty string)

Usage

<epigraph-tour id="tour" sku="my-sku"></epigraph-tour>

<script>
  const tour = document.querySelector("#tour");

  tour.addEventListener("epgappready", (e) => {
    console.log("Experience is ready!");

    //Hide custom loader, etc
  });
</script>

Note: This event also fires on subsequent experience loads (e.g., variant switches in default mode), not just the initial load.

`epgappfailed`

Fired when the experience fails to load. The event detail contains information about the failure.

Property	Value
Event name	`epgappfailed`
Bubbles	No
Detail	`AppEventDetails` — varies by failure type (see below)

Failure types

Error	Value	Cause
`NETWORK`	`"network"`	Network request failure during asset loading
`EXPERIENCE_CONFIG_ERROR`	`"experience-config-error"`	Invalid or missing experience configuration
`SCENE_LOAD_ERROR`	`"scene-load-error"`	Error loading scene assets (models, textures)
`INITIAL_SCENE_LOAD_ERROR`	`"initial-scene-load-error"`	Error during the initial scene setup
`AUTHENTICATION_FAILED`	`"authentication-failed"`	API key or authentication failure

Detail shape

The event.detail varies depending on the failure type:

Authentication failure:

{
  errorCode: { code: 503, message: "Authentication failed" },
  message: "..."  // Additional context
}

Scene load error:

// The raw error object from the failed load
Error { message: "...", ... }

Usage

<epigraph-tour id="tour" sku="my-sku"></epigraph-tour>

<script>
  const viewer = document.querySelector("#tour");

  tour.addEventListener("epgappfailed", (e) => {
    console.error("Experience failed to load:", e.detail);

    // Show fallback content
    document.querySelector("#fallback-image").style.display = "block";

  });
</script>

When it fires

A load error is caught (network, auth, scene, config)
epgappfailed fires with failure details
Analytics event is sent
Splash screen updates to show failure message

Listening to Events

All events are dispatched as native CustomEvent instances on the web component element itself (or a custom EventTarget if overrideEventHubRef was provided during initialization).

const elem = document.querySelector("epigraph-tour");

// Listen
elem.addEventListener("epgappready", handleReady);

// Clean up
elem.removeEventListener("epgappready", handleReady);

Event detail

Access the event payload via event.detail:

elem.addEventListener("epgappfailed", (e) => {
  const detail = e.detail; // string | object | number | boolean | null
});