Events (for API)

Overview

Events allow external communication with a project by adding to interactions, enabling connections between the project and external environments.

Events enable cross-communication with a website through the Model API:

  • Send information to triggers by dispatching events

  • Listen from actions by subscribing to events

Events are configured in interactions (Interact mode) and can be added to triggers and actions:

  • When used in triggers, they function as listeners

  • When used in actions, they function as dispatchers

This enables bidirectional data exchange, allowing a model embedded on a site to send information externally and react to incoming data.

Events as Triggers

Events can be used in triggers. If an event with a matching name is dispatched (either from an action or the Model API), it activates the trigger within its interaction.

Events as Actions

Events can be used in actions for dispatching and transmitting data.

Debugger

Debugger enables event dispatching within Studio, simulating external API calls from the Model API. Enter a value and activate it by clicking the radio button.

Debugger also displays variable values and changes.

Debugger tab appears in Preview mode if at least one event exists.

Embed code

Once an event is created, the embed code in the Share popup includes a script (in addition to the standard iframe). This script should be added to the site for dispatching and listening to events.

<iframe
  id="VECTARY_EMBED_ID"
  src="https://app.beta.vectary.com/p/{model_id}"
  frameborder="0"
  width="100%"
  height="480"
></iframe>

<script type="module">
  import { VctrModelApi } from "https://app.beta.vectary.com/studio-lite/scripts/api.js";
  const modelApi = new VctrModelApi("VECTARY_EMBED_ID");
  await modelApi.init();

  // Example of listening to events sent from Vectary
  modelApi.addEventListener("event_name_1", value => { 
    console.log(value);
  });

  // Example of sending an event to Vectary
	modelApi.dispatchEvent('event_name_2', 'hello');
</script>

The script includes the following information:

For further details, refer to the Model API docs.

Last updated