DEV Community

Abhi Raj
Abhi Raj

Posted on

how to add zendesk chat widget in react js

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,
};

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
kalambekarvijay profile image
Vijay Kalambekar

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?

Collapse
 
foxart78 profile image
foxart78

I've same need, appreciate any suggestion. Thanks.

Collapse
 
alexantoniades profile image
Alexander Antoniades • Edited

But this is the exact same code as react-zendesk...

Collapse
 
chomuekez profile image
chomuekez

HOW DO I RUN THE SAME CODE ON THIS PLATFORM

edabit.com/challenge/4E9gTrRWErpTC...