WebsiteCommunityTutorialsGet started

Widget for React with WebView

This example shows how to integrate the Tiledesk Widget via a WebView for React Native Expo or React Native CLI project

Integrate Widget for React Native Expo project with WebView

Prerequisites

Make sure you have installed react-native-webview via Expo command:

npx expo install react-native-webview

Method 1: load Tiledesk widget from embedding url

Consider an *.html file into assets that contains basic html code with script tag able to integrate tilesk widget insede your webview

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <script type="application/javascript">
      window.tiledeskSettings=
      {
          projectid: "<CHANGE_IT>",
          fullscreenMode: true,
          open:true,
      };
      (function(d, s, id) {
        var w=window; var d=document; var i=function(){i.c(arguments);};
        i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;
        var js, fjs=d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js=d.createElement(s);
        js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document,'script','tiledesk-jssdk'));

      window.addEventListener('load', (event)=> {
        document.dispatchEvent(new Event('mousemove'))
      })

    </script>
</head>
</html>

Add a webview to the file and set the source as the url of the local html file

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


const WebViewScreen = () => {
 return (
   <View style={styles.container}>
     <WebView
       originWhitelist={['*']}
       source={require('../../assets/widget.html')}
       style={{ flex: 1 }}
     />
   </View>
 );
};


const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
});


export default WebViewScreen;

Method 2: load Tiledesk widget from embedding script

Add a webview to the file and set the source as html code

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


const WebViewScreen = () => {
 const htmlContent = `
   <!DOCTYPE html>
   <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


        <script type="application/javascript">
          window.tiledeskSettings=
          {
              projectid: "<CHANGE_IT>",
              fullscreenMode: true,
              open:true,
          };
          (function(d, s, id) {
            var w=window; var d=document; var i=function(){i.c(arguments);};
            i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;
            var js, fjs=d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js=d.createElement(s);
            js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
            fjs.parentNode.insertBefore(js, fjs);
          }(document,'script','tiledesk-jssdk'));


          window.addEventListener('load', (event)=> {
            document.dispatchEvent(new Event('mousemove'))
          })
        </script>
    </head>
    <body>
    </body>
   </html>
 `;


 return (
   <View style={styles.container}>
     <WebView
       originWhitelist={['*']}
       source={{ html: htmlContent }}
       style={{ flex: 1 }}
     />
   </View>
 );
};


const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
});


export default WebViewScreen;

Integrate Widget for React Native CLI project with WebView

Prerequisites

Make sure you have installed react-native-webview via Expo command:

npx expo install react-native-webview

Implementation

Consider an *.html file into assets that contains basic html code with script tag able to integrate tiledesk widget inside your webview ex. “widget.html”

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

      <script type="application/javascript">
        window.tiledeskSettings=
        {
            projectid: "<CHANGE_IT>",
            fullscreenMode: true,
            open:true,
        };
        (function(d, s, id) {
          var w=window; var d=document; var i=function(){i.c(arguments);};
          i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;
          var js, fjs=d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js=d.createElement(s);
          js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
          fjs.parentNode.insertBefore(js, fjs);
        }(document,'script','tiledesk-jssdk'));

        window.addEventListener('load', (event)=> {
          document.dispatchEvent(new Event('mousemove'))
        })

      </script>
  </head>
</html>

Add the widget.html file to the correct project directory.

For Android: Place the file in android/app/src/main/assets/. For iOS: Place the file in ios/<AppName>/widget.html. If the assets folder does not exist (on Android), you can create it manually.

Add webview to App.tsx

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';


import { Platform } from 'react-native';


const App = () => {
 const localFile = Platform.OS === 'ios' ? require('./widget.html') : 'file:///android_asset/widget.html';


 return (
   <SafeAreaView style={styles.container}>
     <WebView
       originWhitelist={['*']}
       source={Platform.OS === 'ios' ? localFile : { uri: localFile }}
       style={styles.webview}
     />
   </SafeAreaView>
 );
};


const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
 webview: {
   flex: 1,
 },
});


export default App;

Extra Android Configurations

On Android, make sure the widget.html file is in the android/app/src/main/assets/ folder. If it doesn't exist, you can create it.

Additionally, the AndroidManifest.xml may require permission to access local files:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Example

You can find here a complete Tiledesk Widget example for React Native EXPO project example or Tiledesk Widget example for React Native CLI project example

PreviousWidget for Flutter with WebViewNextTutorials

Last updated

Was this helpful?