how to add zendesk chat widget in react js

#aws #cloudcomputing #devops #beginners

Save this as ZendexConfig.js in your src folder

import { Component } from "react";
import PropTypes from "prop-types";

const canUseDOM = () => {
  if (
    typeof window === "undefined" ||
    !window.document ||
    !window.document.createElement
  ) {
    return false;
  }
  return true;
};

export const ZendeskAPI = (...args) => {
  if (canUseDOM && window.zE) {
    window.zE.apply(null, args);
  } else {
    console.warn("Zendesk is not initialized yet");
  }
};

export default class Zendesk extends Component {
  constructor(props) {
    super(props);
    this.insertScript = this.insertScript.bind(this);
    this.onScriptLoaded = this.onScriptLoaded.bind(this);
  }

  onScriptLoaded() {
    if (typeof this.props.onLoaded === "function") {
      this.props.onLoaded();
    }
  }

  insertScript(zendeskKey, defer) {
    const script = document.createElement("script");
    if (defer) {
      script.defer = true;
    } else {
      script.async = true;
    }
    script.id = "ze-snippet";
    script.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskKey}`;
    script.addEventListener("load", this.onScriptLoaded);
    document.body.appendChild(script);
  }

  componentDidMount() {
    if (canUseDOM && !window.zE) {
      const { defer, zendeskKey, ...other } = this.props;
      this.insertScript(zendeskKey, defer);
      window.zESettings = other;
    }
  }

  componentWillUnmount() {
    if (!canUseDOM || !window.zE) {
      return;
    }
    delete window.zE;
    delete window.zESettings;
  }

  render() {
    return null;
  }
}

Zendesk.propTypes = {
  zendeskKey: PropTypes.string.isRequired,
  defer: PropTypes.bool,
};

and in your App.js paste this code

import React from "react";
import ReactDOM from "react-dom";
const ZENDESK_KEY = "##########################";
import Zendesk, { ZendeskAPI } from "./ZendexConfig";
const App = () => {
  const handleLoaded = () => {
    ZendeskAPI("messenger", "open");
  };
  return (
    <div>
      <Zendesk defer zendeskKey={ZENDESK_KEY} onLoaded={handleLoaded} />
    </div>
  );
};

export default App;

Follow this docs to add anything in your handleLoadedFunction
https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/sdk_api_reference/#custom-launcher

Top comments (4)

Vijay Kalambekar • Apr 27 '23

Thanks for this. I am having an issue, I want to load the zendesk widget only on particular page. Even if I add the Zendesk tag only on the particular page, all the other pages display the widget. document.body.removeChild doesnt remove the widget. Any suggestions here?