CODEWITHSUNDEEP
javascriptreact-nativewebviewchatlivechat
Shady Hakim
Shady Hakim

Reputation: 415

React native webview javascript simulate click

Hello i use Tidio for live chat and i put it in my react native app using webview

it appears like that enter image description here

and then it needs to click on the chat icon to open the chat box like that enter image description here

I want it to open the chat box directly not to show the welcome message,

I tried to use injectedJavaScript but it doesn't work


<WebView
        javaScriptEnabled={true}
        injectedJavaScript={`(function() { document.getElementById('button-body').click()})();`}
        source={{
          uri: 'https://www.tidio.com/talk/ekmt9gtdgbc4rou29f7tuwvpbhcotzmx'
        }}
      />

Upvotes: 1

Views: 1225

Answers (3)

Animesh Mondal
Animesh Mondal

Reputation: 106

I found a quick fix for it create a html file like in the following

HTML code 👇🏻

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tidio chat app</title>
  </head>
  <body>
    <script
      src="your tidiojs script.js"
      async
    ></script>
    <script>
      window.addEventListener('load', () => {
        tidioChatApi.open();
      });
    </script>
  </body>
</html>

then just host this static html somewhere and use that url in your react native with react-native-webview

React Native web view sample code 👇🏻

<WebView
 source={{uri: 'your html hosted url'}}
/>

it will directly open the chat box.

Upvotes: 0

Joseph Ajibodu
Joseph Ajibodu

Reputation: 1676

Check tidio Api... The Api supports it ... tidio.open()

Upvotes: 0

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

Using WebView you can find a button and click it by loading a url, but in your case what you are doing wrong is you are finding a button which is loaded from iframe and trying to click it which is not possible.

If you really don't want to show the first page replace texts on the screen with your own text like you can replace welcome to iLampagency.com to Hi welcome to chat bot some thing like that.

Hope this helps!

Upvotes: 0

Related Questions