Button onclick to copy the text and open email pop-up in contacts

[JMacasero]

I am working with HubSpot to integrate our application. I am creating a custom CRM card and using serverless functions to call APIs. I want to set it up so that when I click a button on the custom card in Contacts, it will copy the subject and email body details and paste them into the HubSpot email pop-up. This way, the email will be ready for the user to send. Is this possible?

[danmoyle]

Hey there @JMacasero - welcome to the Community. Here's some info as I understand it in HubSpot (I'm not a developer, but I did a little searchign and found this). 

Yes, it is possible to create a custom CRM card with a button that copies subject and email body details and pastes them into the HubSpot email pop-up. Here's how you can accomplish this:

1. Create a custom CRM card using HubSpot's UI extensions. This allows you to build flexible custom cards that integrate seamlessly with HubSpot's standard features.
2. Use serverless functions to handle the API calls and data processing. These functions can fetch the necessary email details from your application.
3. Add a button to your custom card using HubSpot's library of standard card components. This button will trigger the action to copy the email details.
4. When the button is clicked, use the HubSpot UI Extensions SDK to interact with the HubSpot interface. Specifically, you'll want to use the hubspot.emailEditor methods.
5. Here's a basic example of how the button click handler might look:

6. The hubspot.emailEditor.open() method will open the email pop-up with the pre-filled subject and body. The user can then review and send the email.

This approach allows you to create a seamless workflow for your users, enabling them to quickly prepare emails based on data from your application. Remember to handle any potential errors and provide appropriate feedback to the user.

Keep in mind that while this solution is possible, it requires careful implementation to ensure a smooth user experience. You'll need to consider factors like error handling, performance, and user interface design to make sure the feature works reliably and intuitively within the HubSpot environment.

I'd also look in the Developers forums for additional help if you need it. 

[JMacasero]

Exactly!, this is what I want. Thank you for your great response, but can you help me more ? 

Cannot read properties of undefined (reading 'open')

may i know the 
await.hubspot.emailEditor.open

already imported like this:

import {
Divider,
Link,
Button,
hubspot
} from "@hubspot/ui-extensions";

and then :

const handleSendEmail = async (email) => {
    
    try {
      await hubspot.emailEditor.open({
        subject: email.scheduledEmail?.subject || "No Subject",
        body: email.promptResponse?.text || "No Body Text",
        to: [{ email: "test@gmail.com" }], 
      });
    } catch (error) {
      console.error("Error opening email editor:", error);
    }
  };

What import library or install for this to work? I am using react version. Thanks

[danmoyle]

@JMacasero looking through some tools (again, not a developer myself, so I'd see if you can find someone who is), here's what I've found: 

The issue you're encountering suggests that the hubspot object is not properly imported or initialized. For React-based HubSpot custom CRM cards, the approach is slightly different. Let me provide you with the correct way to use the email editor in a React-based HubSpot custom CRM card:

1. First, make sure you're using the latest version of the @hubspot/ui-extensions package. You can update it in your package.json file.
2. Instead of importing hubspot directly, you should use the useServerlessFunction hook from the @hubspot/ui-extensions package. This hook provides access to serverless functions, including the ability to open the email editor.
3. Here's how you should modify your imports and code:

4. You'll also need to create a serverless function to handle opening the email editor. Create a new file, for example, openEmailEditor.js, in your serverless functions directory:

5. Make sure this serverless function is properly configured in your serverless.json file.

This approach uses the useServerlessFunction hook to interact with HubSpot's serverless functions, which in turn can access the email editor functionality. The serverless function acts as a bridge between your React component and HubSpot's internal APIs.

Remember to handle any potential errors and provide appropriate feedback to the user. Also, ensure that your serverless function has the necessary permissions to open the email editor.

This method should resolve the "Cannot read properties of undefined (reading 'open')" error you were experiencing. If you continue to face issues, double-check your HubSpot developer environment setup and make sure all necessary permissions are in place.

[JMacasero]

Hi. may i know where can i see the docs about the context.actions.openEmailEditor? 

I was looking for this docs but haven't seen context.actions

[JMacasero]

Error opening email editor TypeError: Cannot read properties of undefined (reading 'openEmailEditor')

Hi. i dont understand this:
this is what I did,  I will not post all of my code just specifically the openEmailEditor related only:

import React, { useState, useEffect } from "react";
import { Button, hubspot } from "@hubspot/ui-extensions";

// Define the extension to be run within the Hubspot CRM
hubspot.extend(({ context, runServerlessFunction, actions }) => (
  <Extension
    context={context}
    runServerless={runServerlessFunction}
    sendAlert={actions.addAlert}
  />
));

const Extension = ({ context, runServerless, sendAlert }) => {
  const [loginState, setLoginState] = useState({
    token: null,
    personId: null,
    workEmail: null,
  });

  const handleSendEmail = async (email) => {
    const { response } = await runServerless({
      name: "openEmailEditor",
      parameters: {
        subject: email.scheduledEmail?.subject || "No Subject",
        body: email.promptResponse?.text || "No Body Text",
        to: [{ email: loginState.workEmail }],
      },
    });
  };

  return (
    <Button
      type="submit"
      onClick={() => handleSendEmail(email)}
      variant="destructive"
    >
      Send Email
    </Button>
  );
};

export default Extension;

 
then i created a file openEmailEditor.js:

const hubspot = require("@hubspot/api-client");

exports.main = async (context = {}) => {
  console.log(context)
  const { subject, body, to } = context.parameters;

  try {
    await context.actions.openEmailEditor({
      subject,
      body,
      to,
    });

    return {
      statusCode: 200,
    };
  } catch (error) {
    console.error("Error opening email editor", error);
    return {
      statusCode: error,
    };
  }
};

 
and i tried to console.log the context but the result referred to event is undefined as you can see below:

{
  propertiesToSend: {},
  parameters: {
    subject: 'Doubling leads with Union',
    body: 'Hi Brian,\n' +
      '\n' +
      "I wanted to share how our unique approach to sales, inspired by Union's Intent Based Sales, helped us double qualified leads in just a few months. By identifying and prioritizing target audiences, we've seen amazing results. I'm curious, how are you currently approaching lead gen and integrating your marketing, sales and service teams? With your AI-powered HubSpot platform, I bet there are some powerful opportunities to explore.\n" +
      '\n' +
      'Best,\n' +
      'John',
    to: [ [Object] ]
  },
  event: undefined,
  secrets: {}
}

 Here is my serverless.json:

{
  "appFunctions": {
    "myFunc": {
      "file": "example-function.js",
      "secrets": []
    },
    "emailLogin": {
      "file": "email-login.js",
      "method": "POST",
      "secrets": []
    },
    "fetchPlaybooks": {
      "file": "fetch-playbooks.js",
      "method": "GET",
      "secrets": []
    },
    "generatePlaybook": {
      "file": "generate-playbook.js",
      "method": "POST",
      "secrets": []
    },
    "fetchContact": {
      "file": "fetch-contact.js",
      "method": "GET",
      "secrets": []
    },
    "fetchEmails": {
      "file": "fetch-emails.js",
      "method": "GET",
      "secrets": []
    },
    "openEmailEditor": {
      "file": "openEmailEditor.js",      
      "secrets": []
    }
  }
}

 
upon executing, i got an error here : 

await context.actions.openEmailEditor
since the  context.actions is undefined. 

[danmoyle]

@JMacasero I think you're best off chatting with a HubSpot developer, not me. Or looking in the HubSpot Developers documentation. Your questions have moved beyond my skillset 😊 I've exhausted the tools I have to help find solutions, and you might need someone with more skills than I have. Sorry I couldn't help more. 

[JMacasero]

can you help me where is the specific docs of that ? it doesn't show here:
https://developers.hubspot.com/docs/platform/serverless-functions

[danmoyle · Accepted solution]

@JMacasero I'm not well-versed in the Devlopers documentation area, I'm sorry. That's why if I were you, I'd work with someone who's a HubSpot Developer with that deep knowledge. 

[JMacasero]

Thanks  i will check this out!.. I am getting near