Tiledesk Developer Hub
WebsiteCommunityTutorialsGet started
  • Introduction
  • Community
  • Ask for Support
  • Public Roadmap and Changelog
  • Tutorials
  • Widget
    • Widget SDK
    • Javascript API: Methods
    • Javascript API: Attributes
    • Javascript API: Listeners/Events
    • Widget Authentication
    • Widget Angular integration
    • Widget React integration
    • Widget for Android with WebView
    • Widget for iOS with WKWebView
    • Widget for Flutter with WebView
    • Widget for React with WebView
    • Widget for Wix Website platform
    • Tutorials
      • Hide widget
      • Show/Hide widget programmatically
      • Force widget loading without user interaction
      • Mobile positioning
      • Custom size (width/height)
      • Installing widget on selected pages
    • Conversation Embedded Apps
      • Payment App Tutorial
      • Prechat form App Tutorial
    • Advanced
      • Preset the Widget on a specific Department
      • Authentication Flow
      • Widget protocol specs
      • Prechat Form JSON specs
      • Prevent multiple conversations
      • Old versions
        • Web SDK v4
  • External Chatbot
    • Introduction
    • Hello World tutorial
    • Chatbot to Human handoff
    • Send Text Buttons
    • Advanced Tutorials
      • Introduction
      • Tutorial 1 - Dialogflow as external chatbot
      • Tutorial 2 - Buttons and images
      • Tutorial 3 - Automatic human handoff with fallback intent
      • Tutorial 4 - Explicit Human handoff with user intent
      • Tutorial 5 - Gracefully handling operating hours during handoff
      • Generate Dialogflow Google Credentials file
    • Rasa tutorials
      • Rasa Tutorial 1 - Rasa as external chatbot
  • Resolution bot
    • Introduction
    • Quickstart
    • Webhook service
    • Rich messages
    • Tutorials
      • Chatbot chooser (multilanguage)
      • Department chooser
      • Order info (webhook)
  • APIs
    • REST APIs
      • Introduction
      • Authentication
      • Requests
      • Leads
      • Messages
      • Activities
      • Projects
      • Team
      • User
      • Analytics
      • Canned responses
      • Tags
      • Events
      • Jwt
      • Labels
      • Images
      • Files
      • Segments
      • Chatbots
      • Knowledge Bases
        • Knowledge Base
        • Contents
        • Question & Answer
      • Management Api
        • Departments
        • Groups
    • NodeJS SDK
    • Webhooks
      • Subscriptions
    • Conversation Messages APIs tips
    • Realtime API
    • JWT Authentication
      • JWT Custom authentication Tutorial
    • Tutorials
      • REST API
        • Sending and receiving messages with Tiledesk APIs
        • PHP Tiledesk REST API example
        • Import multiple messages into Tiledesk using REST APIs from third party app
      • Webhooks
        • Custom Request assignment
        • Request transcript on close
  • Apps
    • Build Custom App - Quick start
    • External Channels integration flow diagram
    • Telegram integration tutorial
  • Dashboard & AgentChat SDK
    • Dashboard SDK
    • Agent Chat SDK
  • Architecture
    • Architecture overview
    • Components list
    • Bot Design diagram
    • Multi Channel Message Flow
  • Installation
    • Installation
    • Running Tiledesk using Docker Compose
    • Running Tiledesk with Kubernetes using Helm
    • Choosing Hardware
  • Configuration
    • Chat21 channel configuration
    • Email parameters and templates configuration
    • Configure the logging system
Powered by GitBook
On this page
  • 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

Was this helpful?

  1. Widget

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;

Example

PreviousWidget for Flutter with WebViewNextWidget for Wix Website platform

Last updated 2 months ago

Was this helpful?

You can find here a complete or

Tiledesk Widget example for React Native EXPO project example
Tiledesk Widget example for React Native CLI project example