How do you send data generated from custom components back to weweb?

Developer corner
1

Hello everyone,
I’m currently developing a custom voice recording component for weweb. I’m just using provided components from the vue library (trying out several different ones). The library I got the furthest with is this one: GitHub - tderflinger/vue-audio-tapir: Audio recorder component for Vue.js 3. It enables to record, play and send audio messages to a server.

The whole element is simply this:

<template>
  <tapir-widget :time="2" backendEndpoint="https://your-endpoint.com/.netlify/functions/audio-message" 
                buttonColor="green"/>
</template>

<script>
import TapirWidget from 'vue-audio-tapir';
import 'vue-audio-tapir/dist/vue-audio-tapir.css';

export default {
  name: 'App',
  components: {
    TapirWidget,
  }
}
</script>

My issue here is that instead of sending the recording straight through the API I want to first send and access the recording inside weweb, then handle it through weweb and send it to xano where I could save it and then just show the recording elsewhere inside the app later on. The reason I want to pass the recoding through weweb is that there is a certain flow in my app that requires everything to be synced with weweb and if I send the recording straight to the API endpoint, weweb will be stuck and won’t know what to do.

So my main question is: how do I pull the finished recording from the custom component to weweb where I could then handle is however I want?

2

You need to trigger an emit as an event and pass the data through it.

Something like this in your

ww-config.js

triggerEvents: [
    {
      name: "send:data",
      label: { en: "After your action" },
      event: { returnedData: {} },
      default: true, // If you want this to be selected by default on creation of the new workflow
    },
  ],

wwElement.vue

// Define your emits in your component Settings
...
emits: ['trigger-event'],
...

// Send the data
this.$emit("trigger-event", {
     name: "send:data",
     event: {
       returnedData: value,
     }
});