Smartify

Widget for React with WebView

Integrate the Tiledesk Widget via a WebView for React Native (Expo or CLI)

Integrate Widget for React Native Expo project with WebView

Prerequisites

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

npx expo install react-native-webview

Methods to load the Tiledesk widget from a WebView

1

Load Tiledesk widget from a local HTML file

Create an *.html file in your assets containing the basic HTML and the Tiledesk embedding script, for example:

<!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>

Then add a WebView component and set the source to 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;
2

Load Tiledesk widget by injecting the embedding script as HTML

Define the HTML content as a string and pass it to the WebView source:

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:

npx expo install react-native-webview

Implementation

Create an *.html file (for example, widget.html) that contains the Tiledesk embedding script, for example:

<!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: android/app/src/main/assets/

  • For iOS: ios//widget.html If the assets folder does not exist (on Android), create it manually.

Add the WebView to App.tsx:

Example

You can find complete examples here:

  • https://github.com/Tiledesk/tiledesk-widget-react-native-expo

  • https://github.com/Tiledesk/tiledesk-widget-react-native-cli

Additional links

  • https://developer.tiledesk.com/widget/integrate-widget-for-flutter-with-webview

  • https://developer.tiledesk.com/widget/integrate-widget-for-wix-website

Last updated 10 months ago

This page links to the Tiledesk privacy policy: https://tiledesk.com/privacy.html

PreviousTagsNextJavascript API: Attributes