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)
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?
I've same need, appreciate any suggestion. Thanks.
But this is the exact same code as react-zendesk...
HOW DO I RUN THE SAME CODE ON THIS PLATFORM
edabit.com/challenge/4E9gTrRWErpTC...