How can click on the other button and open the messenger?

[hamedhtm]

I want to click a button in the header and open messenger chat! how can do that?

[kb1995]

Did you find any solutions for this?

[jamcd]

You can change the 'shouldShowDialog' prop to true dynamically to make the dialogue open. This works for me, but the issue I have is that it completely removes the messenger icon for a second or two before it reappears and then opens the dialogue.

I'm not sure why, but it seems to be causing some kind of re-render when you change that value.

[chentsulin]

I believe the shouldShowDialog prop should work in this case. For example, you could write something like this:

import React, { useState } from 'react';
import MessengerCustomerChat from 'react-messenger-customer-chat';

function MyComponent() {
  const [shouldShowDialog, setShouldShowDialog] = useState(false);
  const handleClick = () => {
    setShouldShowDialog(!shouldShowDialog);
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me!</button>
      <MessengerCustomerChat
        pageId="<PAGE_ID>"
        appId="<APP_ID>"
        htmlRef="<REF_STRING>"
        shouldShowDialog={shouldShowDialog}
      />
    </div>
  );
}