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:
Copy 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
Copy <!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
Copy 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
Copy 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:
Copy 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”
Copy <!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
Copy 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:
Copy <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
Last updated 4 months ago