javascript - Making the chat widget Tawk.io disappear on one component - Stack Overflow

admin管理员组

文章数量:1324975

I am using a tawk.io chat on my reactjs app:- This is content of my index.js file:-

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import BookRead from "./pages/BookRead";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        <Route exact path="/view/:id/:section/:part" ponent={BookRead} />
        <Route ponent={App} />
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js ponent file content :-

import React, { useEffect, useState } from "react";
import { Route } from "react-router-dom";
import Login from "./pages/Login";
import Account from "./pages/Account";
import Contact from "./pages/Contact";
import Home from "./pages/Home";

function App(props) {

  useEffect(() => {
    var Tawk_API = Tawk_API || {},
      Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"),
        s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = ";;
      s1.charset = "UTF-8";
      s1.setAttribute("crossorigin", "*");
      s0.parentNode.insertBefore(s1, s0);
    })();
  }, []);

  return (
    <div className="content">
      <div className="container">
        <Route exact path="/" ponent={Home} />
        <Route path="/contact-us" ponent={() => <Contact user={user} />} />
          )}
        />
        <Route path="/account" ponent={Account} />
      </div>
    </div>
  );
} 
export default App;

How can i show the chat widget in all ponents inside the App.js route and hide/remove it from the route <Route exact path="/view/:id/:section/:part" ponent={BookRead} /> ?

I am using a tawk.io chat on my reactjs app:- This is content of my index.js file:-

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import BookRead from "./pages/BookRead";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        <Route exact path="/view/:id/:section/:part" ponent={BookRead} />
        <Route ponent={App} />
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js ponent file content :-

import React, { useEffect, useState } from "react";
import { Route } from "react-router-dom";
import Login from "./pages/Login";
import Account from "./pages/Account";
import Contact from "./pages/Contact";
import Home from "./pages/Home";

function App(props) {

  useEffect(() => {
    var Tawk_API = Tawk_API || {},
      Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"),
        s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = "https://embed.tawk.to/5a624e/default";
      s1.charset = "UTF-8";
      s1.setAttribute("crossorigin", "*");
      s0.parentNode.insertBefore(s1, s0);
    })();
  }, []);

  return (
    <div className="content">
      <div className="container">
        <Route exact path="/" ponent={Home} />
        <Route path="/contact-us" ponent={() => <Contact user={user} />} />
          )}
        />
        <Route path="/account" ponent={Account} />
      </div>
    </div>
  );
} 
export default App;

How can i show the chat widget in all ponents inside the App.js route and hide/remove it from the route <Route exact path="/view/:id/:section/:part" ponent={BookRead} /> ?

• javascript
• reactjs
• tawk.to

Share Follow edited Sep 28, 2020 at 22:27 Q8root asked Sep 26, 2020 at 10:26 Q8rootQ8root 1,38544 gold badges2929 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Solved by adding the following to BookRead.js ponent :-

useEffect(() => {
    if (window.Tawk_API) {
      window.Tawk_API.hideWidget();
    }
    return () => {
      if (window.Tawk_API) {
        window.Tawk_API.showWidget();
      }
    };
  }, []);

The API docs at https://developer.tawk.to/jsapi/ suggest you could use Tawk_API.showWidget(); and Tawk_API.hideWidget(); to show and hide the widget.

React-Router provides an useLocation hook you can use to figure out when the location has changed.

Put those two together and you should be able to get the effect you want.

本文标签： javascriptMaking the chat widget Tawkio disappear on one componentStack Overflow