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

Prerequisites

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

npx expo install react-native-webview

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;

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;

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;

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 WebView NextWidget for Wix Website platform

Last updated 9 months ago

Was this helpful?

Widget for React with WebView

Integrate Widget for React Native Expo project with WebView

Prerequisites

Method 1: load Tiledesk widget from embedding url

Method 2: load Tiledesk widget from embedding script

Integrate Widget for React Native CLI project with WebView

Prerequisites

Implementation

Example