<aside> <img src="/icons/thought-alert_gray.svg" alt="/icons/thought-alert_gray.svg" width="40px" /> Event names must be unique - duplicate event names are not allowed, even across different types.

</aside>

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:

Initialization and instantiation of the API
Dispatching of Events based on the events used in triggers, with placeholder callbacks