Zendesk config js file: how not to auto open chat when website opened

Question

I am trying some things on Zendesk and it looks like the chat automatically opens when I open the website. How can I make it so that it remains closed until I actually click the chat button to open the chat window. This is my ZendeskConfig.js file below:

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);
    // added this to solve double chat window problem
    if (document.getElementById("ze-snippet"))
      return
    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,
};

Thank you so much

Tried manipulating DOM but had no success

Answer 1

Zendesk documentation includes the "suppress" option, which allows you to prevent the automatic opening of your chat.

To enable this feature, simply create a new variable for suppression control and insert the following code:

window.zESettings = {
    ...other,
    chat: {
      suppress: chatSuppressed,
    },
  };

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