Copy to clipboard doesn't work

Develop, Build & Integrate APIs & Integrations
1

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>
2

Hi there,
For HubSpot UI extensions, don’t use the browser’s navigator.clipboard.writeText() API directly. Use HubSpot’s UI Extensions SDK clipboard action (copyTextToClipboard) instead:

  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.

Moderator Note: this post was reviewed for relevancy and optimized for clarity on September 30, 2026. Thank you for your contributions to the HubSpot Community!

3

@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 ?