Copy to clipboard doesn't work

[JMacasero]

I am creating a custom CRM card and I want to implement functionality like copying text or copying to the clipboard, but I keep encountering an error.

Failed to copy: Cannot read properties of undefined (reading 'writeText')

Here is what i've done :

const copyToClipBoard = async (copyType, copyText) => {
  try {
    await navigator.clipboard.writeText(copyText);      
    sendAlert({
      message: `${copyType} copied to clipboard!`,
    });
  } catch (err) {
    sendAlert({
      message: `Failed to copy: ${err.message}`,
      variant: "error",
    });
  }
};


<Button
  onClick={() =>
    copyToClipBoard("Email Subject",email.scheduledEmail.subject)
  }
  variant="primary"
  size="sm"
  type="button"
>
  Copy Subject
</Button>

[JMacasero]

@Danielle_J  thank you for your respose.

I've already updated my google chrome browser from its latest version. Talking about https, its already https protocol since its from hubspot contacts. 

How may i know if the site has permissions to acces the clipboard ?

[Danielle_J]

Hi there,
This can happen if the Clipboard API is not supported in the environment or if there are some security restrictions. I would suggest verifying the following:

1. Ensure that the Clipboard API is supported in the browser you're using. Perhaps add a simple check before calling the writeText method.
2. I believe the Clipboard API only works in secure contexts (HTTPS). Make sure your application is served over HTTPS.
3. Ensure that the site has permissions to access the clipboard. 

I would also add some additional validation to your code, something like: 

const copyToClipBoard = async (copyType, copyText) => {
  if (!navigator.clipboard) {
    sendAlert({
      message: `Clipboard API is not supported in your browser.`,
      variant: "error",
    });
    return;
  }

I hope this helps.