React Native integration

3min

Accessing Link using webview
Use react-native-webview as WebView component to load Link for authorization and data sharing.
JS
const urlWhiteList = [
  'https://conecte-sandbox.klavi.ai',
  'https://conecte-testing.klavi.ai',
  'https://conecte.klavi.ai',
  'https://www.google.com/recaptcha',
  'https://recaptcha.google.com/recaptcha',
];

const isInWhitelistFn = (urlString: string) => {
  return urlWhiteList.some(item => urlString.startsWith(item));
};

<WebView
  source={{
    uri: 'https://conecte-testing.klavi.ai/data/v1/basic-links/ofpfdemo?redirect_url=klavilinkdemorn%3A%2F%2Fredirect',
  }}
  webviewDebuggingEnabled
  startInLoadingState
  originWhitelist={['*']}
  onShouldStartLoadWithRequest={(event: ShouldStartLoadRequest) => {
    if (event.url === 'about:blank') {
      return false;
    }
    try {
      if (isInWhitelistFn(event.url)) {
        return true;
      }
      Linking.openURL(event.url);
      return false;
    } catch (error) {
      console.warn(error);
      return false;
    }
  }}
/>

const urlWhiteList = [
  'https://conecte-sandbox.klavi.ai',
  'https://conecte-testing.klavi.ai',
  'https://conecte.klavi.ai',
  'https://www.google.com/recaptcha',
  'https://recaptcha.google.com/recaptcha',
];

const isInWhitelistFn = (urlString: string) => {
  return urlWhiteList.some(item => urlString.startsWith(item));
};

<WebView
  source={{
    uri: 'https://conecte-testing.klavi.ai/data/v1/basic-links/ofpfdemo?redirect_url=klavilinkdemorn%3A%2F%2Fredirect',
  }}
  webviewDebuggingEnabled
  startInLoadingState
  originWhitelist={['*']}
  onShouldStartLoadWithRequest={(event: ShouldStartLoadRequest) => {
    if (event.url === 'about:blank') {
      return false;
    }
    try {
      if (isInWhitelistFn(event.url)) {
        return true;
      }
      Linking.openURL(event.url);
      return false;
    } catch (error) {
      console.warn(error);
      return false;
    }
  }}
/>
﻿
If you were a klavi customer before 22/11/2024, you may be able to use the links according to the old nomenclature, then, the urlWhiteList response may look like:
'https://open-sandbox.klavi.ai',
'https://open-testing.klavi.ai',
'https://open.klavi.ai',
The WebView source may also look differently, such as the example below:
https://open-testing.klavi.ai/data/v1/basic-links/ofpfdemo?redirect_url=klavilinkdemorn%3A%2F%2Fredirect﻿
WebView needs to set originWhitelist to '*', then the method onShouldStartLoadWithRequest can intercept all requests.
It is necessary to set up a whitelist containing the domain name of klavi. Otherwise the klavi link will be opened with the system browser.cept all requests.
GitHub
﻿GitHub - klaviai/KlaviLinkDemoRN﻿
Demo App DownLoad
﻿KlaviLinkDemoRN 
﻿
﻿

Updated 21 Nov 2024

Did this page help you?

Integration WhiteLabel using App2App Flow

Flutter integration