Integration with Form Assembly

Ziggeo has created an integration with FormAssembly.

Here's how it works

  • Manage your application settings on Ziggeo and check: "Let us host separate subpages for each single video".

  • Head over to the form builder on FormAssembly. For every video that you want to be recorded, create a text field with the placeholder text "ziggeo" (without the "").

  • Add the following custom code to your form (via Properties, Custom Code). Make sure to replace YOUR_APPLICATION_TOKEN by the actual application token from your Ziggeo dashboard.

      <!-- Add Ziggeo resources -->
      <link rel="stylesheet" href="https://assets-cdn.ziggeo.com/v2-stable/ziggeo.css" />
      <script src="https://assets-cdn.ziggeo.com/v2-stable/ziggeo.js"></script>
      <!-- Add Ziggeo codes -->
      <script>
        //Create Application
        var ziggeoApp = new ZiggeoApi.V2.Application({
          token:"YOUR_APPLICATION_TOKEN", // Sets the token
          webrtc_on_mobile: true,           // Enables WebRTC for mobile giving you more options
          webrtc_streaming_if_necessary: true     // WebRTC option for specific cases such as with Safari (where WebRTC Streaming is the only WebRTC option)
        });
    
        //Event handler to change specific elements into recorders
        document.addEventListener("DOMContentLoaded", function() {
            //Grab the list of all elements set for Ziggeo
            var list = document.querySelectorAll("input[placeholder='ziggeo']");
    
            for(i = 0, c = list.length; i < c; i++) {
                //Get the input field
                var input = list[i];
    
                //Hide input field
                input.style.display = 'none';
    
                var recorder = new ZiggeoApi.V2.Recorder({
                    element: input.parentElement,
                    attrs: {
                        width: 320,
                        height: 240,
                        theme: "modern",
                        themecolor: "red"
                    }
                });
    
                recorder.activate();
    
                recorder.on('verified', function() {
                    input.value = "https://ziggeo.io/v/" + recorder.get('video');
                });
            }
        });
      </script>