Embedding feathery form on mobile (swift ios and kotlin android)

Support
1

Trevin_Chow @Trevin_Chow: Is there any tips on embedding a feathery form in mobile app (swift ios and kotlin android)? We want to embed a feathery form as part of our new account sign up flow. Wanted to check if there is any tips on this

peter @peter: we don’t have a mobile-native SDK, but you could embed your Feathery form into a webview

Trevin_Chow @Trevin_Chow: Is there any advice/best practices dismissing the embed on survey completion so it feel seamless? My guess is doing some type of callback on the final button click which then probably means a unique survey per app
Normally you’d do something like this:

<button onclick="AndroidInterface.dismissWebView()">Dismiss</button>

Can a feathery button be wired up with an onclick handler like this?

peter @peter: in your form settings, you could set the form completion behavior to “hide”. in that case, the form will automatically disappear on completion

Trevin_Chow @Trevin_Chow: @peter if we go this route, even though the form will dismiss, it won’t dismiss the webview. So typically for this to be smooth there needs to be some way for the web content to talk to the parent native code… usually this is done through a js bridge somehow.

peter @peter: you could listen to the form completion event, which is when the form gets dismissed https://docs.feathery.io/develop/react/api-guide/form/event-handlers/onformcomplete

onFormComplete()

Trevin_Chow @Trevin_Chow: @peter that’s for react but we are embedding this in an iOS and Kotlin android app.
Or is the recommendation here to instead of embedding the feathery form url, to instead have our web app instantiate the feathery form with the JS or react SDK, then have our mobile apps embed that?

peter @peter: ah i see. we could probably extend the form to send an event to the webview on completion, something like this: https://stackoverflow.com/questions/56737292/how-can-i-send-a-message-from-the-webview-to-react-native

Stack Overflow: How can I send a message from the WebView to React Native?

does one of these stack overflow solutions work for you guys?

Trevin_Chow @Trevin_Chow: My engineers say yes

peter @peter: does this work for you? if we post a message like this

  window.ReactNativeWebView.postMessage(event.data);

Trevin_Chow @Trevin_Chow: yeah that’ll work. In meantime we have this working in our proof of concept in iOS:

<script>
   (() => {
             function handleFormComplete(feedback) {
               console.log('User completed feedback form:', feedback);
               window.webkit.messageHandlers.test.postMessage(`Form completed`);
             }
        
             Feathery.init('6c6b111b-d39c-42b3-9a73-82fe1ecc0875');
             const context = Feathery.renderAt('container', { formName: 'Jens test', onFormComplete: handleFormComplete });
    })();
 </script>

if you just handled the form completion with a specific message to listen for that would save part of that custom code

peter @peter: this is now available on 2.0.91 https://docs.feathery.io/develop/react/api-guide/form/event-handlers/onformcomplete#detect-form-completion-in-webkit-webview

onFormComplete()

[/quote]