React Native Guide

1. Install react-native-webview
2. Create a new View to handle the webView
3. In the View add the following:

import React from 'react';
import {View} from 'react-native';
import {WebView} from 'react-native-webview';
const Support = () => {
  return (
    <View style={{ flex: 1 }}>
      <WebView
          source={{
            uri:
              'https://cdn.solvvy.com/deflect/customization/solvvy_webview_rn/support.html',
          }}
        />
    </View>
  );
};

export default Support;

This is the basic code for opening your webview URL (which should auto-launch Solvvy). If Solvvy is not installed on your webview URL or does not auto-launch, contact your Solvvy Sales Engineer or Solutions Engineer.

Passing data to the webview

In certain situations, it is necessary to pass data to Solvvy running in the webview, e.g. to specify which language the app is using so Solvvy can be properly localized, or helpful metadata that needs to be included on the ticket if the user does not self-serve (like mobile platform, app version, user ID, etc.). This can easily be accomplished by setting JS variables on the webpage when launching the webview. Put all your variables in the window.solvvyConfig object. If you want the data to be passed directly into tickets as certain custom fields, please use the custom field ID as the variable name, as below:

const passingData = `
  window.solvvy = {};
  window.solvvyConfig = {
    language: 'de',
    email: 'example@me.com'
    custom_23793987: 'test123', // Support ID
    custom_23873898: 'iPad', // Device Type (Name)
    darkMode: true, // Dark mode (boolean) 
    some_array: [ 'item1', 'item2' ], // Some array of strings
  };
  true;
`;

Getting Data From the Webview

When a user is not able to self-serve, Solvvy presents a list of options (or channels) for contacting support (or automatically defaults to one if only one is configured). Most of these support options can be handled, or executed, within the Solvvy flow, such as email ticket submission. However, for some support options (e.g. live chat), it may be preferable to execute the support contact flow directly from the native app (e.g. using a 3rd party native SDK). To facilitate this, your native app needs to find out from the webview whether this native support flow needs to launch after the webview dismisses itself (i.e. if the user was not able to self-serve). Your app also needs to get the question that the user typed in at the beginning of the Solvvy flow, so they don't have to re-type their issue. Both of these things can be accomplished with the following code.

6. Define a callback function to receive the user's original question:

Make sure you use the exact name: name: "supportOptionHandler" because that is what Solvvy will call when a support option is clicked by the user.

const passingData = `
window.solvvy = {
  native: {
    supportOptionHandler: {
      handle: function (data) {
        window.ReactNativeWebView.postMessage(JSON.stringify(data));
      }
    },
  }
};
true;
`;

the response will be an object like this

response = {
    channel: 'chat',
    question: 'question', // actual question
    questions: ['question'] // array with all the question the user did
}

Closing the webview when the user self-served

When a user is satisfied with one of the answers returned, they can click "Yes" to indicate they got their answer. On the next screen, if they click "Close" to end the Solvvy experience, the webview needs to pass control back to the native app. This happens through another callback function which the Solvvy modal calls when that "Close" button is clicked. Use the following code to handle that callback:

const passingData = `
window.solvvy = {
  native: {
    exitHandler: {
      handle: function() {
        window.ReactNativeWebView.postMessage("closeSupport");
      }
    },
  }
};
true;
`;

Allowing attachments on tickets

iOS

For iOS, all you need to do is specify the permissions in your ios/[project]/Info.plist file. By default, when you use the WebView component provided by React Native, iOS will respond to it by displaying a dialog that will allow you to select a file from your device.

Android

Add permission in AndroidManifest.xml:

<manifest ...>

  <!-- this is required only for Android 4.1-5.1 (api 16-22)  -->
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

  ......
</manifest>

Intercept URL requests from within a webview

The webView provides a handler to catch the URL changes, if you want to catch this you should use onNavigationStateChange

const onNavigationStateChange = ({ navState }) => {
// navState objects includes:

/*
  canGoBack
  canGoForward
  loading
  navigationType
  target
  title
  url
*/
};

Clear cookies

The webView provides a different option to handle the cookies and the history inside the webview.

In order to clean the cookies, there is an property is clearCache, and for clear all the data the prop is clearHistory, but those methods works only in android devices

To do a better handle for both platforms you can handle using a javascript code and injected it in the webView, or you can user a third party library like cookies this is for react native community

7. Now your View should look like this:

import React from 'react';
import {View} from 'react-native';
import {WebView} from 'react-native-webview';

const Support = () => {
  let webref = null;

  const passingData = `
    window.solvvy = {
      native: {
        supportOptionHandler: {
          handle: function (data) {
            window.ReactNativeWebView.postMessage(JSON.stringify(data));
          }
        },
        exitHandler: {
          handle: function() {
            window.ReactNativeWebView.postMessage("closeSupport");
          }
        }
      }
    };
    window.solvvyConfig = {
      language: 'de',
      email: 'jose.bogantes@salsamobi.com'
      custom_23793987: 'test123', // Support ID
      custom_23873898: 'iPad', // Device Type (Name)
      darkMode: true, // Dark mode (boolean) 
      some_array: [ 'item1', 'item2' ], // Some array of strings
    };
    true;
  `;
  
  const onNavigationStateChange = ({ navState }) => {
    // navState objects includes:

    /*
      canGoBack
      canGoForward
      loading
      navigationType
      target
      title
      url
    */
  };

  setTimeout(() => {
    webref.injectJavaScript(passingData);
  }, 1);
  return (
    <View style={{ flex: 1 }}>
      <WebView
          ref={(r) => {
            webref = r;
          }}
          source={{
            uri:
              'https://cdn.solvvy.com/deflect/customization/solvvy_webview_rn/support.html',
          }}
          injectedJavaScript={passingData}
          onMessage={handleEvent}
          incognito={true}
          style={styles.webView}
          onNavigationStateChange={onNavigationStateChange}
        />
    </View>
  );
};

export default Support;

Load error handling

Possible scenarios where you might want to handle load errors include:

• Network issues
• Incompatible browser or device*
• Solvvy load failure

Although these scenarios are rare, the following load error handler can be implemented to provide a cleaner experience for your users. The possible load errors are:

• "loading_timeout" - Solvvy did not load within 10 seconds
• "loading_failed" - Solvvy failed to load
• "incompatible_browser" - Incompatible browser or device*

See What browsers or devices does Solvvy support?:::

If this handler is not implemented, where possible, the Solvvy team will implement a generic fallback to redirect to your web contact form.

1. Define a callback function to be called when an error occurs:

Make sure you use the exact name: "loadErrorHandler" because that is what Solvvy will call when a load error occurs.

const passingData = `
window.solvvy = {
  native: {
    loadErrorHandler: {
      handle: function (data) {
        window.ReactNativeWebView.postMessage(JSON.stringify(data));
      }
    },
  }
};
true;
`;

The response will be an object like this

response = {
    error: 'loading_timeout' // one of the possible load errors defined above
}