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.

Event names must be unique - duplicate event names are not allowed, even across different types

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.

To transmit a specific value, use a variable with the same name as the event

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:

• Initialization and instantiation of the API
• Dispatching of Events based on the events used in triggers, with placeholder callbacks
• Registering of Event Listeners based on the events used in actions, with placeholder values

For further details, refer to the Model API docs.

To update the code, synchronize the project in Share popup