Hi everyone,
My name is Bane and I am coming from Ziggeo, trying to help a customer of ours that is using Softr to help them to not just have our system as part of their workflow rather to have it part of their Softr app making the UX a much smoother and better for everyone.
We offer a whitelabel recorder and player for video, screen and audio with an easy to use interface and ton of features; This makes the recorder or player the part of the form itself regardless of the solutions that you use (non-Softr solutions).
Current state
So far we have found a way to use a custom code block to add short code to the form on Softr page which then creates the recorder as if it is part of the form itself and looks perfect as is, however we need a bit of assistance for the last bit to get it all tied into Softr.
Attempt 1:
Using the Ziggeo events to populate a field in the form with the video token, allowing all of the data to be included together.
- We were able to pass the info into the field correctly, however this has failed because during the collection of form data, the Softr code would remove the info we have set through our event, resulting in submission of empty field every time.
Attempt 2:
Searching online we managed to find:
window.addEventListener('submit-form-form2', (e) => {
console.log(e);
});
We have tried playing around with this to see if we can make it work by first detecting the form submission and then to modify the codes that are sent to actually include our value.
- Unfortunately this did not work - event never fired.
Attempt 3:
Based on the feedback our customer got from Softr team we tried the following code:
window.addEventListener('block-loaded-form2', () => {
const updateFields = new CustomEvent('update-fields-form2', {
detail: {
'Video Token': 'this-is-a-test'
}
});
window.dispatchEvent(updateFields);
});
We have added this after the page has loaded fully as well as before the page is fully loaded and while we could see it being read out, it did not really make any difference for submission.
- Unfortunately this too did not result in any updates
Goal of posting this
Our goal is always to do our best to help our customers have an easy way to integrate Ziggeo, which is usually just a copy and paste of few lines of or code. So this is my attempt to see if someone familiar with Softr can suggest something we can try or do.
If we can make it possible to be part of the form we can then even create a documentation that explains this process so it becomes as easy as copy pasting small amount of code for everyone using Softr as well 
My thoughts about possible ways to sort this have been:
- Use some Softr built in method to add the value into the hidden input field allowing us to have it stay there once submit button is pressed (not cleared by Softr scripts) - ideal
- Hook into form submission event and modify the field right before the data is submitted, allowing us to see if it is empty and then just grab the needed info from the recorder and add it back at that point. - not ideal however if only way is up hill, my mountain shoes are on.
Link: I am a big fan of privacy so I can not provide a link to the app that is not mine.
Similar posts:
Form code in case it helps:
<div id="form2" class="block-e24fa84d-..." category="Form" data-block="form3-v3-3-2-b7">
...
<div class="form-input-holder">
...
<input aria-invalid="false" id="form2-..." name="a4059516" placeholder="ziggeo-video-recorder" type="text" class="MuiInputBase-input MuiOutlinedInput-input css-q1sikp" value="">